Jump to content

qcom

Members
  • Posts

    85
  • Joined

  • Last visited

qcom's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Hey everyone,I was checking out the Chrome OS Features Page and I noticed their amazingly-cool buttons, that I'm assuming were made using JavaScript, most likely, jQuery.Does anyone have any tips on how to replicate such features?Do you think they used a plugin? I would imagine that it's most-likely hand-made, but, you never know.In the mean time, I'm checking the source markup to see if that yields any results.Thanks!!UPDATE:Sorry about that!It looks like these are utilizing canvas, but, I guess the question may still apply, considering it is most likely utilizing the JavaScript API's necessary (are they 100% necessary?) to make cool canvas effects like these.
  2. Exactly, WebForms is tempting to many (including me) to use just because a relatively powerful web application can be produced quickly via the dragging and dropping of those server controls. It is definitely possible to develop a WebForms web application and still maintain a reasonably good handle of standards-based markup, however, almost always, an ASP.NET MVC web app will output far more standards-compliant markup than WebForms.And yes, I completely agree with page refreshes and postbacks on every user click. Like I mentioned in my previous post, WebForms attempts to veil the naturally stateless nature of the web environment, whereas MVC accepts that the internet is stateless, and therefore does not include postbacks with many page refreshes in its framework.And like I said before as well, they are both a great way (in my opinion of course) to develop dynamic web applications. I myself have been trying to get my head wrapper around the MVC architecture just because I think the Separation of Concerns is very valuable as far as maintainability and extendability. To give an example, think about if you wanted to develop an eCommerce site by scratch. Although easy to do in WebForms, with ASP.NET MVC, you could reuse that Model logic that you developed to build your eCommerce platform, for another new eCommerce website, while updating your Views to match the new look of the site. Additionally, when attempting to make a change to your entire web application's architecture, you will know where to look when you are hunting for that specific line of code, as opposed to WebForms, where it may be buried.
  3. OK, yeah, the design is awful to say the least! :)However, the backend, I agree, is where the value comes in.I appreciate your suggestion, thanks for the help!
  4. Due to the fact that both ASP.NET WebForms and ASP.NET MVC are two alternative frameworks (meaning that MVC is not mandatory and although came out later than WebForms does not actually replace it) of ASP.NET, they both share the .NET framework and the same essential runtime. Even though MVC adds on an additional runtime of sorts, to help with routing I believe...Anyway, it really comes down to personal preference.I'm starting new, currently, and am adopting MVC, but here are some very good pros and cons to both:WebForms:Pros- Allows rapid development of web applications- Doesn't require prior knowledge of HTMLCons- Rapid development leads to messy client ID outputs (or it can)- Masks the web (http's) true stateless environment- Although it can be tested, it does not provide intrinsic functionality like MVCMVC:Pros- Produces output with standards-compliant HTML- Separation of Concerns (everything has its own place like the Models, Views and Controllers that make up the "MVC" acronym) which leads to overall good development practices, extendability, maintainability and aids in projects where there is more than one person working on it. Say, the designer could be working on the views (the user-interface) while the developer or database-manager could be working with Models, etc, etc.- Easily testable with standard VS2010 (Visual Studio 2010) built-in and also support for many third-party testing platforms.Cons- Requires knowledge of HTML- Can be much slower to output a project than WebForms (due to its SoC nature)In the end, like I said before, this is really a personal question, however, in my opinion, it really depends on the project.Let's say you want to build a quick web application for a client, you may choose WebForms because you or your client or you and your client to particularly care about keeping HTML standards-compliant markup. However, if you would like to build a full-fledged ecommerce platform (although many use WebForms for this as well), you may choose MVC so that it could be maintained and extended so easily.Like I said previously, I'm just starting and although it's tempting to just use WebForms and piece together a web application real quick (because the drag and drop server controls really make this quite easy and fun! ), I really enjoy working with the MVC framework, just because it produces such clean code.Have fun and good luck!
  5. That's cool, now, when you say web developer are you considering web design a part of what a web developer does? Because, obviously, making simple changes to a static website is so simple it's great, whereas this project was quite complex. Agreed. OK, like you gave in your range, it will vary depending on the project's complexity. That's quite nice! Thanks for pointing that out. That appears to make it real easy to offer multiple "ends" of the project to different users with varying experience level. Even if it is based off of a free template? I thought $100 was way to low. Hmm, any good way to convince a future client? :)But yes, like you said, this isn't just for the money, as I like designing and developing and could use some great experience, which this provides, but I also like getting the biggest bang for my buck! :)Thanks so much for your help!
  6. Hey guys,I was doing a website for a client, and being quite new to this stuff since I'm only just starting and I'm in high school , I wanted to get some feedback from everyone here.The client is asking for a functional website that they can maintain themselves.Their website name is www.aquadual.com where they specialize in a certain unique type of bathing suite.Now, I'm capable of doing more work than what you see currently. And, the reason you don't seen any products or categories other than samples, is just because I did not say that I would be doing their data entry, which is why they have their GUI, fully-capable back-end.I was wondering what you think a project like this is worth?I need some honest advice and experience here.I'm getting $100 for this.Is this way to high or low?This was a modified version of a tutorial too, just because I've been more familiar with Microsoft technologies, where their server over at Hostgator required them to use PHP, so I didn't feel like making one of my kinds of sites from scratch. So please don't take this as all of my work.Sorry if this isn't the place to post this, I didn't know anywhere else I could ask!Thanks!
  7. @thescientist Thanks for the clarification, I understand what you mean now.. I like the site btw! @MrFish I gotcha. The only problem I have with the suggestion is the fact that I'm going to be converting my html pages into ASP pages, so I'll have a "header.asp" page which I'll "include" in my other pages.What should I do now? I think in a way, it may make it a little easier.Thanks for the feedback by the way guys, and yeah, I'm in the process of adding some products! That's kind of important too. Also, that's actually the main reason I put the media section up, was so I could link to embed flash Mario games, but I like the trailers idea!
  8. Great! Thanks, I like that suggestion a lot.What else did you think? By the way, I have not implemented the music on the other pages, yet, so the home page is where the action is, but do you recommend using ajax to aid in the "remembering" which part of the song is being played? In other words, so it continues from the same spot of the track?What else did you think?Thanks again!
  9. Hey guys!My site Mario Planet (http://www.marioplanet.com) has a goal of selling Mario Toys related to the Super Mario Brothers video game series.Now, I'm hard at work on the "back-end" of my site as we speak, working on my database and such. So, for now, if you take a look at my site, please look only at my homepage (index.htm). You are free to go to the other sites (obviously! ) but, I'm mainly looking for judging of my home page currently.Note:The site is supposed to have music, a feature I'm currently debating as it is great for people who have played the Mario games as I believe it invokes a certain sense of nostalgia, however, for newcomers and for people who don't like music, it will deter them. Anyway, I don't have the music functioning properly in FF and Chrome. Sorry! For some reason, when I upload OGG files to my server, and I point my browser to the direct file, it says 404 Error: File not Found, even though I can verify the fact that I have uploaded the OGGs in both Cyberduck FTP and Dreamweaver's FTP program. Weird..ANY suggestions, critiques, words of wisdom and complete bash-downs (just kidding!) are welcome!Thanks!
  10. Haha! Thank you so so much!!That was such a good idea. Check it out again, it looks pretty beast.OK, so a few things I'm trying to research as of right now due to some semi-cross-browser-compatibility-issues.Here's the browser statuses:Firefox 3.6.8:- Great except for when an end-user places his/her cursor in the input field, for some reason the cursor is kind of large, but then upon the end-user beginning to type, the font-size is normal.. A little strange.- Can't tell if the cursor should be bumped down 1 pixel also, not so sure yet.Chrome 5.0.375.126:- Great except just like FF 3.6.8 this definitely needs the cursor to be bumped down by 1 pixel.Safari 5.0.1:- Same cursor placement as FF and ChromeIE 7:- Great, same cursor placement problem, except this one appears to perhaps need a bump slightly more than 1 pixel down, perhaps not though.IE 8:- Same as IE 7 except this actually has a spacing problem in between the media button and the globalsearch <div> intersting! Good 'ol IE!I have yet to test on IE 6.. Oh GAWD!! :)Thanks again, this has been a great help, the image was a heck of a lot easier and the only downside I've seen so far is the highlight upon entering your cursor I believe in webkit browsers perhaps, which highlights the curves. I have the highlight set off so it doesn't look odd having a rounded image with a rectangular highlight!
  11. I'm still quite n00by, but your simpleton terms are helping :)But the innerbox is where the padding will be applied, so that it is the actual <form type="text"> whereas the box which nests the innerbox contains the background image, correct? And the innerbox will have a higher z-index to be placed on top, and with the outerbox's full image, it will give the impression that it is one <form> tag with some really fancy CSS3 magic going on!Tell me if I'm way off..What's the best way to code this in your opinion?
  12. Hey thanks! I personally agree 100% haha :)Like the idea a LOT, I've been having problems with this now.Hmm, that sounds pretty good, now, could I just specify the input's background as that entire image?What would happen when they type more text on the right side? I guess it would be fine?
  13. OK, so if you check out http://www.marioplanet.com you can see that I am trying to mimic the design of apple.com for my menu bar, including my global search bar.Now, I'm trying to mimic Apple's input field for the global search bar, as close as I possibly can, so I need some help here.I would like the left and right cap images and the input field to be centered with the height, but I cannot figure out a way to specify this in CSS to be compatible in all browsers.I also need to have a grayed out placeholder string reading Search but I think I may be able to use JS for that. If can use HTML or CSS, please let me know.OK, you can check out the site, but here is the code as well:index.htm: <div id="header"> <p align="center"><img id="logo" src="/images/logo/logo.png" alt="logo"></p> <script type="text/javascript"> var searchSection = 'global'; var searchCountry = 'us';</script> <div id="globalheader" class="apple"> <!--googleoff: all--> <ul id="globalnav"> <li id="gn-home"><a href="index.htm">Home</a></li> <li id="gn-catalog"><a href="catalog.asp">Shop!</a></li> <li id="gn-about"><a href="about.htm">About</a></li> <li id="gn-contact"><a href="contact.htm">Contact</a></li> <li id="gn-media"><a href="media.htm">Media</a></li> </ul> <div id="globalsearch"> <form id="searchform"> <div> <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" /> <span class="left"></span> <span class="right"></span> </div> <div id="suggestions"></div> </form> </div> <!--googleon: all--> </div> </div> /code]nav.css:[code]/* GLOBALHEADER */#globalheader { width: 671px; height: 37px; margin: auto; position: relative; z-index: 100; }#globalheader #globalnav { margin: 0; padding: 0; zoom: 1; width: 100%;}#globalheader #globalnav:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }#globalheader #globalnav li { display: inline; }#globalheader #globalnav li a { float: left; width: 103px; height: 37px; text-indent:-1000em; overflow: hidden; background-image:url(/images/globalnav/wanzart.png); _background-image: url(/images/globalnav/wanzart.png); background-repeat: no-repeat; }#globalheader #globalsearch { background-image: url(/images/globalnav/wanzart.png); _background-image: url(/images/globalnav/wanzart.png); background-repeat: no-repeat; }/* BUTTONS */#globalheader #globalnav li#gn-home a { background-position: 0 0; }#globalheader #globalnav li#gn-catalog a { background-position: -103px 0; }#globalheader #globalnav li#gn-about a { background-position: -206px 0; }#globalheader #globalnav li#gn-contact a { background-position: -309px 0; }#globalheader #globalnav li#gn-media a { background-position: -412px 0; }/* OVER STATES */#globalheader #globalnav li#gn-home a:hover { background-position: 0 -37px; }#globalheader #globalnav li#gn-catalog a:hover { background-position: -103px -37px; }#globalheader #globalnav li#gn-about a:hover { background-position: -206px -37px; }#globalheader #globalnav li#gn-contact a:hover { background-position: -309px -37px; }#globalheader #globalnav li#gn-media a:hover { background-position: -412px -37px; }/* PRESSED STATES */#globalheader #globalnav li#gn-home a:active { background-position: 0 -76px; }#globalheader #globalnav li#gn-catalog a:active { background-position: -103px -76px; }#globalheader #globalnav li#gn-about a:active { background-position: -206px -76px; }#globalheader #globalnav li#gn-contact a:active { background-position: -309px -76px; }#globalheader #globalnav li#gn-media a:active { background-position: -412px -76px; }/* ON STATES */#globalheader.home #globalnav li#gn-home a:hover { background-position: 0 0; cursor: default; }#globalheader.store #globalnav li#gn-catalog a { background-position: -103px -114px !important; }#globalheader.mac #globalnav li#gn-about a { background-position: -206px -114px !important; }#globalheader.ipod #globalnav li#gn-contact a { background-position: -309px -114px !important; }#globalheader.iphone #globalnav li#gn-media a { background-position: -412px -114px !important; }/* GLOBAL SEARCH */#globalsearch {width: 156px; height: 37px; position: absolute; top:0; right: 0; background-position: 100% 0; background-repeat: no-repeat; text-align: center; border-width: 0px; }#searchform .left { display: block; position: absolute; left: 0; top: 0; width: 20px; height: 19px; margin-top: 5px; background: url(/images/globalnav/searchfield_leftcap.png) left top no-repeat; }#searchform .right { display: block; position: absolute; right: 0; top: 0; width: 10px; height: 19px; margin-top: 5px; background: url(/images/globalnav/searchfield_rightcap.png) right top no-repeat; } globalsearch.css: /* BASIC RESET */body, div, img, p { padding:0; margin:0; }a img { border:0 }/* HTML ELEMENTS */body { font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; }/* COMMON CLASSES */.break { clear:both; }/* SEARCH FORM */#searchform { margin:auto auto; font-size:18px; }#searchform div { color:#eeeeee; }#searchform div input { font-size:10px; width:133px; }#suggestions{ position: relative; left:235px; width:320px; display:none; }/* SEARCHRESULTS */#searchresults { border-width:1px; border-color:#919191; border-style:solid; width:320px; background-color:#a0a0a0; font-size:10px; line-height:14px; margin-top: auto; }#searchresults a { display:block; background-color:#e4e4e4; clear:left; height:56px; text-decoration:none; }#searchresults a:hover { background-color:#b7b7b7; color:#ffffff; }#searchresults a img { float:left; padding:5px 10px; }#searchresults a span.searchheading { display:block; font-weight:bold; padding-top:5px; color:#191919; }#searchresults a:hover span.searchheading { color:#ffffff; }#searchresults a span { color:#555555; }#searchresults a:hover span { color:#f1f1f1; }#searchresults span.category { font-size:11px; margin:5px; display:block; color:#ffffff; }#searchresults span.seperator { float:right; padding-right:15px; margin-right:5px; background-image:url(../images/shortcuts_arrow.gif); background-repeat:no-repeat; background-position:right; }#searchresults span.seperator a { background-color:transparent; display:block; margin:5px; height:auto; color:#ffffff; } Any help is much appreciated!Thanks!
  14. I am trying to use a snippet of jQuery to resize my images but it has been acting up..If you point your browser so you can view the problem on my page, at http://www.marioplanet.com/product.htm you may see the problem.If you have visited my site before in order to help me debug, which I appreciate, please make sure you delete your cookies for my site, and empty the cache, as it appears to only have a problem upon a first visit.The problem appears to be different for different browsers:Firefox (3.6.8) and IE (8): Underneath the bold text reading: "Category Plush" where the images should be properly resized, they are way to small.Chrome (5.0.375.125) and Safari (5): Underneath that same bold text where the images should be, there are just two outlined squares and nothing else.The "fixes" that I have found as far as not updating the code appear to be:Firefox (3.6.8) and IE (8): A simple refresh, and the images go back to the size I want them to be upon first visiting.Chrome (5.0.375.125) and Safari (5): By pointing these two browsers to the URL http://www.marioplanet.com/product.htm# which can easily be done by adding the pound symbol (#) or by clicking the YouTube icon in the "Follow Us On" social networking tray, the images will be sized the way I would like them to be upon first visit.So, I was thinking, regarding the jQuery snippet, that perhaps the .width() action doesn't have widespread support, Googling yielded no results, and that wouldn't make sense to not have it work well across ANY major browser.So, then I was thinking perhaps the snippet of jQuery was not in the $(document).ready event handler, so the DOM, and therefore the images, had not been properly loaded. Upon investigation of my code, everything looked ok.Finally, I was wondering if any sizing remaining on my images had screwed up the jQuery resizing and everything again seemed ok, but perhaps it has to do with the width of the tables and table rows and cells?Any suggestions or ideas as to what the problem is would be much appreciated!!Thanks!
  15. Hello everyone,I think it may be easier to user Firebug and check it out in your FF browsers than for me to provide all of the source code, as I have a few different external CSS files attached to my site.I am having a problem with some unwanted spacing between my Apple-themed navigation menu and the following <div>'s on my page.You can view the problem at www.marioplanet.comIt just looks like a thin, 1px high or so part of the background bordering the nav bar and the rest of the <div>'s.Any suggestions as to what is causing this problem would be really helpful!Thanks!UPDATE:Thanks for everyone trying to check it out.@dsonesuk, if I remove just the #globalheader #globalnav li a top padding, it removes that sliver of background, but, it also hides the nav bar.. Then, upon removing the #globalheader height, it removes all of the spacing of where the nav bar should be, underneath the logo.Here is a screenshot of the strip of the background that I would like to remove:
×
×
  • Create New...