Category archives: html5

 

 

Say hello to DeveloperDrive.com

Read more
 

It’s time to welcome a new member to the WebdesignerDepot family of sites! Say hello to DeveloperDrive.com , our brand new blog dealing with web development. We’ve been in beta for a little while so you may have bumped into it already, but if you haven’t yet, we highly recommend checking it out! While at WDD we focus mostly on the visual aspects of web design, we hope DeveloperDrive becomes your ‘go to’ place for web development, tutorials, and coding in general. You’ll find articles covering topics such as responsive design , CSS3 , HTML5 , WordPress and much more. We welcome your feedback as we keep improving the site and bring you more fresh content. Thanks for visiting and enjoy! Design and sell your first iPhone game – only $59! (reg. $249) Source

 

Google Play Music switches on labs features: HTML5 player, star ratings and notifications

Read more
 

We’re so used to Google Labs features on commonly used services like mail and maps that we often forget they’re technically experimental and now Music has a few of its own. The new features available on the desktop version of its web player include toggles for an HTML5 player (there was already a mobile version for iOS ) instead of Flash, Gmail-style desktop notifications (Chrome only) and the ability to rate music on a five star scale instead of just thumbs up or thumbs down. There’s been a steady of stream of updates to the Music arm of Google Play since it was first announced last May , now that the velvet invite rope has been lifted has it become a part of your daily soundtrack? Google Play Music switches on labs features: HTML5 player, star ratings and notifications originally appeared on Engadget on Mon, 09 Apr 2012 23:12:00 EDT. Please see our terms for use of feeds . Permalink | Google Play Music | Email this | Comments

 

Mozilla demos WebRTC integration, browser-powered video chat (video)

Read more
 

Last week at IETF 83 in Paris Mozilla gave a little demo that went almost completely unnoticed. The team behind Firefox showed off an experimental built of its flagship browser with integrated WebRTC support. To showcase the real-time communication plug-in’s capabilities, the foundation built a simple video chat client based around Persona and SocialAPI. Whether or not such a feature will ever make it into an official build of the browser remains to be seen, but for now you can check out the simple, yet impressive, HTML and Javascript demo after the break. Continue reading Mozilla demos WebRTC integration, browser-powered video chat (video) Mozilla demos WebRTC integration, browser-powered video chat (video) originally appeared on Engadget on Mon, 09 Apr 2012 21:36:00 EDT. Please see our terms for use of feeds . Permalink TechCrunch | Mozilla Hacks | Email this | Comments

 

Flickr adopting Aviary for photo edits, waves goodbye to Picnik

Read more
 

With Google set to close the Picnik shop on April 19th, it was obvious that Flickr had to go out and seek a fresh replacement. Today, the Yahoo-owned service is announcing Aviary (a Jeff Bezos -backed startup) as the new photo editing tool on its site. Along with promising to be simpler and speedier than its soon-to-be deceased predecessor, Aviary brings expected features like cropping, rotating, sharpening, red-eye reduction and cosmetic whitening, just to mention a few. Of note, Aviary is written in HTML5, opening the doors to become useful on a handful of slates and handsets. Flickr is set to commence the rollout later today, though it may take a few days until you can check out the changes. Flickr adopting Aviary for photo edits, waves goodbye to Picnik originally appeared on Engadget on Thu, 05 Apr 2012 10:02:00 EDT. Please see our terms for use of feeds . Permalink Electronista | Flickr Blog | Email this | Comments

 

Mozilla releases BrowserQuest for HTML5 gamers and warriors (video)

Read more
 

Mozilla is flexing its HTML5 muscles today, with a new game called BrowserQuest. Designed specifically for browser-based gaming, BrowserQuest brands itself as a “tribute to classic video games with a multiplayer twist.” The game’s plot is relatively routine — warriors, hidden treasure, etc. — but what’s most interesting is its underlying architecture. Its 2D tile graphics engine is powered by HTML5 Canvas, with browser-to-server communications handled by WebSockets. Sound effects, meanwhile, are powered by HTML5 audio APIs, and each player’s progress is saved using localStorage. The game also supports lots of simultaneous players, thanks to a JavaScript-coded backend that runs on Node.js. You can keep track of the player load in real-time at the BrowserQuest Dashboard (linked below). For more details, check out the source link at the bottom of the page, or click past the break for a brief demo video. Continue reading Mozilla releases BrowserQuest for HTML5 gamers and warriors (video) Mozilla releases BrowserQuest for HTML5 gamers and warriors (video) originally appeared on Engadget on Wed, 28 Mar 2012 06:28:00 EDT. Please see our terms for use of feeds . Permalink Ars Technica | Mozilla | Email this | Comments

 

Back to basics: how to code an HTML5 template

Read more
 

Markup is a beautiful thing, and it certainly has changed over the years. What was effectively HTML1, has certainly progressed to an amazing semantic markup language, to which we can largely thank the W3C. And, what do ya know, the next thing to thank them for has come about – HTML5. Unlike previous version of HTML, where the code was mostly a limited structure that was determined by how you made use of the class and ID elements, html5 really attempts to provide much more structure. All of the layout can be created with semantic tags and elements that determine how you should structure, and, arguably more important, that help you structure each page. This produces code that is much more clean and readable than in previous versions of HTML, and really is something quite amazing. The new tags really require that you think about how you are structuring your page, which let’s be honest – in the end that is a great thing for us web designers and developers alike. Before understanding the structure of HTML5, and how to create and code an example template to use for your projects you should be aware of how it came about. Be aware though that the current version of HTML5 has not reached a version that the W3C could call final as of yet, but their is quite a lot to learn about and start using in your code right now. Here is what the W3C has to say on this issue: “Implementors should be aware that this specification is not stable. Implementors who are not taking part in the discussions are likely to find the specification changing out from under them in incompatible ways. Vendors interested in implementing this specification before it eventually reaches the Candidate Recommendation stage should join the aforementioned mailing lists and take part in the discussions .” But, don’t let that scare you. There are always people out there constantly making sure that it doesn’t get changed out from underneath of all of us. So you will certainly be aware if such a drastic change does indeed happen. Back on topic, one of the main questions people have about HTML5 is “ , , , these tags seem understandable enough but where in the world did the W3C come up with these?” Well, that question is easy enough to answer. It came from you! It actually came from all of us. In 2005 Google conducted a study of over 3 billion websites and found that the most common classes used in common markup were actually what you see there on that page. Footer, menu, title, small, text, content, header, and nav are all among the top of the popularity chart. And essentially that is how the W3C decided on what to use for the new semantic tags for HTML5. Now that we know about that, let’s dive right into what those tags are and the basic fundamental changes in HTML5. The doctype A doctype isn’t particularly an element of the HTML, but it is a deceleration, and one that has become more and more important as time goes on. Using one appropriately can help your browser understand what sort of HTML it is trying to parse so we always want to use the appropriate doctypes. In all honesty, at this current time, you can pretty much just use the HTML5 doctype for everything though – but let’s cover some past ones as well. Here is where we have come as far as simplicity: HTML2: HTML3: HTML4: HTML5: Pretty great right? You don’t need to keep a document for copying and pasting in some ridiculously long doctype, or even worse yet, try to remember the ridiculously long doctypes of versions past. For HTML5 you simply have to type . Ah, what a relief. Other simplifications in HTML5 Before leaving this section, let’s go through some of the other elements that have gotten simpler. The root element has been simplified, to which instead of having to write something like: We can just write: The things we need to copy and paste getting smaller and smaller by the minute. For instance, also, In the head element, our character encoding went from things like: to the newer version in HTML5: And lastly, our links have dropped their type attribute. So for instance, this: Becomes this: So what’s with these new tags? The “section” tag The section element is basically any generic section of an HTML document. Most typically though, it is a thematic grouping of content – which can have a heading but doesn’t require one. A general rule of thumb for using the section heading is only use it if it would be explicitly referenced in the document’s outline. If, in the outline, there was a ‘section’ that you referenced or feel that all the content in one area is a ‘section’ of sorts – then do indeed include the section tag. If you want to use it mainly for styling purposes though, just don’t . Instead, use a tag as you normally would. The “nav” tag The “nav” element represents any section of a page that links to other parts of that page or other pages within the sitemap. Anytime you think of navigation links, you should think “nav tag”. The nav element is particularly intended for larger navigation blocks. Any large element that links to other sections of the site’s page or other pages of the site. Keep in mind though, a navigation section doesn’t have to be in the form of a list, albeit that is pretty standard. It can be in prose, paragraph tags, or pretty much anything – as long as it was originally suited to be in such tags in the first place. The article tag The article element represents a self-contained composition in a document, page, or any site. The really important thing to keep in mind with article tags is that it is, typically, independently distributable or reusable content is what is usually placed within the tags. It could be a forum post, a magazine or newspaper article, or a blog entry, even comments – as long as it is any independent item of content. Articles can hold “section”s inside them, “header”s inside them, even “hgroup”s inside them. But do keep in mind when and how you are using this element, as it isn’t quite as commonly used as a tag. So in summation, it isn’t a one-in-all answer for everything, but it does indeed have a lot of uses. Let’s hop into an example. For instance, let’s say you have a blog post with some comments. You can do that like this in HTML5: The Blog Entry Title 12/25/2045 Blog entry … Comments Posted by: Name of person Time: 15 minutes ago Comment text here /p> Posted by: Name of person Time: 25 minutes ago Another comment here The “aside” tag The aside element represents any section of a page that consists of content that is tangentially related to the content around the aside element. The most important thing to remember with this tag is that although it is content tangentially related to the content around the aside tag, it is typically information or content that is separated in characteristic. You will most often use it in sidebars, as most sidebars are perfect to be entirely wrapped in aside tags. Other uses can include pull quotes, bits of advertising, groups of nav links, or even addresses near the address of a location in question. To get into more detail though, it is for anytime you feel the need to quite literally take an aside and explain, reference, mention, state, or question something. You can even use an aside element for a larger section of a site, such as a side-bar for Twitter, or Facebook, or random links. You could have it be an aside, then use a header and nav section within it even to help understand what is going on there. You can use it in the footer section of blog posts to reference things about them, or pretty much anywhere it can be perfectly implemented. The “hgroup” tag The hgroup element represents the heading of a section. This element is best used to group a set of h1-h6 elements when the heading has multiple levels, or subheadings – such as exactly the article you are reading. This would be perfect for an hgroup. You can also use it for alternative titles, or tag-lines. The W3C reminds us: “For the purposes of document summaries, outlines, and the like, the text of hgroup elements is defined to be the text of the highest ranked h1–h6 element descendant of the hgroup element, if there are any such elements, and the first such element if there are multiple elements with that rank. If there are no such elements, then the text of the hgroup element is the empty string. Other uses, for instance, include areas of a blog where you are listing the header and subtitle for your blog post. You can also use it for book titles and descriptions, for listing doctors in your area and their areas of expertise, or even use it to help replicate the functionality of a table. Let’s take a look at such an example now. On a table we’d have: Doctor Name: Randy McDocterson Doctor Specialty Slapping People So there you can clearly see, in the markup, that we have a doctor named Randy McDoctoerson who’s specialty is slapping people. Now, that is a little odd, but hey – it gets the point across. The “header” tag The header tag represents any group of introductory or navigational aids within a site, or sections of a site. So now that the formal definition has been stated, let’s break it down a bit. We all know what a header is, but to be specific it includes various things on the top of most site. These header areas usually include branding sections, call to action items, and perhaps some navigation. Really it can be used any place that you used to write: you can now write , and get the same semantic markup structure. It is important to note, that the W3C especially remarks that a header element should contain either a set of H1’s, a sections heading individually (h1-h6), or an hgroup element. Header elements can also be used to wrap a section’s table of contents, a search form, or any relevant logos – such as what we mentioned above. Keep in mind though that the header is not sectioning, as in it isn’t a replacement for an all-in-one div either. Rather, it is just a great semantic element to use for specific situations. To note: It can be used in any section’s beginning area, as it doesn’t have to be in the top or beginning of your HTML document. But, that is where it is most typically implemented. The “footer” tag The footer element represents a footer for its nearest nested parent section, and typically contains information about its parents section. The footer tag is very similar to the header tag, but for the opposite section of a page. Often times you will see a footer of a page that contains links again that were in the navigation, and perhaps a logo, or other such things – well all of these can now be housed in a tag. Though a footer is typically used at the end of a website, this tag can represent the end of any section of content (and it doesn’t even have to be at the end of said section to represent it). For instance let’s take a look at this example: Back to index… Lorem Ipsum Some text here. Back to index… The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let’s dive right in. Dave Raggett , Arnaud Le Hors , contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: For more details, contact John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn’t ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let’s get into coding our own template. Let’s start with an average document. HTML5 Template Now let’s add the stylesheet link, just for good practice, even though we may not use it. HTML5 Template Now I think it’d be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let’s do: HTML5 Template Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let’s add a navigation element as well. HTML5 Template HTML5 Template Pretty standard template Home About HTML5 And there we go, we have added some navigation with a nice unordered list there in the header section. But, wait a minute. What if you have a nice big footer and want those same navigator elements in the footer as well. Well, let’s add it there also. Except, this time we aren’t going to use the tag and instead are going to use a div with the class “footer_navigation”. And while we’re at it, let’s go ahead and fill out our footer section with some content. HTML5 Template HTML5 Template Pretty standard template Home About HTML5 Home About HTML5 By Dain Miller from Madison, WI Email Me Now let’s add in some bits for IE, and other such technicalities. HTML5 Template HTML5 Template Pretty standard template Home About HTML5 Home About HTML5 By Dain Miller from Madison, WI Email Me And there we have it: a basic but complete HTML5 template! Dain Miller is a freelance web designer and developer based out of Madison Wisconsin. He is mainly focused on building products in the online education space, and he has a passion for responsive design. You can follow him on twitter at @_dain . What are your favorite new CSS3 techniques? Or little-used/little-known CSS techniques? Let us know in the comments! 600+ Pixel-Perfect Vector Icons – only $17! Source

 

Nivio brings the Windows desktop to your iPad and Galaxy Nexus, we go hands-on

Read more
 

Remember the hoo-hah OnLive cooked over some supposedly fast-and-loose Windows licensing ? Well Nivio’s been quietly rolling out its own, proudly licensed, version of a cloud-based Windows desktop. Its minimum requirement is the ability to handle HTML5, meaning that a Microsoft-powered OS can be used across iPads, Android phones, MacBooks and everything else in between. Nivio offers up a cloud storage platform alongside a Windows 7- style (it’s based on the Windows 2008 R2 Server; same building blocks) OS that allows the user to sync up to 10GBs across devices. What else does it have? Microsoft Office — on your tablet or smartphone of choice and all licensed through Redmond’s very own Service Provider License Agreement (SPLA). The service launched in February, and is currently clearing a backlog of users on its books, attempting to gauge how people are using the service before exploding any servers. It’s also started making its first steps in Europe, so we decided to take a look while its makers were in London. Gallery: Nivio Windows Desktop hands-on Continue reading Nivio brings the Windows desktop to your iPad and Galaxy Nexus, we go hands-on Nivio brings the Windows desktop to your iPad and Galaxy Nexus, we go hands-on originally appeared on Engadget on Mon, 26 Mar 2012 15:26:00 EDT. Please see our terms for use of feeds . Permalink | Nivio | Email this | Comments

 

VMware's WSX promises to bring virtualized desktops to the web browser with HTML5

Read more
 

It’s not quite ready for widespread use just yet, but it looks like we could soon have yet another way to virtualize one computer desktop on another device. Tentatively dubbed WSX, VMware’s latest option relies on HTML5 to do away with plug-ins or dedicated applications altogether (a “lightweight Web server” acts as an intermediary), which means that you’ll need nothing more than a web browser to run Windows or other operating systems on any capable device. As of now that includes laptops and desktops running Firefox, Chrome, and Safari, as well as iPads, but not Android devices (though that is apparently in the works). What’s more, while it’s still described as experimental, it apparently offers “near-native quality and framerates” when viewing 720p YouTube videos, and VMware is already toying around with optimizing it for the new iPad’s Retina display. Those interested in a sneak peak can try it out with VMware’s Workstation Tech Preview for Linux, although there’s no word yet on a wider release. VMware’s WSX promises to bring virtualized desktops to the web browser with HTML5 originally appeared on Engadget on Tue, 20 Mar 2012 09:50:00 EDT. Please see our terms for use of feeds . Permalink Wired Cloudline | ChipLog | Email this | Comments

 

Free Indie Games does what it says it will, offers online and downloadable titles

Read more
 

It’s easy to get bored of safe, monetized, mass-gaming fare — even if it’s set in space . Good news, then, that the indie game intellect behind the likes of VVVVVV and At a Distance , Terry Cavanagh, has curated a whole raft of free indie games, housing his choices at a site with the same name. We’ve dipped into the eclectic selection, which includes both downloadable and online titles, with current favorites including Socially Awkward Conversations and Wolfenstein level generator Meinstein 3D . However, given that all the games are gratis , there’s plenty more to sample (and then drop) guilt-free. Check the source below for the full selection. Free Indie Games does what it says it will, offers online and downloadable titles originally appeared on Engadget on Tue, 20 Mar 2012 08:28:00 EDT. Please see our terms for use of feeds . Permalink Waxy | Free Indie Games | Email this | Comments

 

Mozilla caves, will support H.264 to avoid 'irrelevance'

Read more
 

It looks like Mozilla is ready to throw in the towel in its battle against the patent-laden H.264 video codec. Over the last week or so, the software foundation has struggled publicly with whether or not to support the MPEG-LA-owned format. Now several of Firefox’s biggest players have all come out in support of the move and all that’s left is to actually bake the appropriate code into the browser. Both chairman Mitchell Baker and CTO Brendan Eich embraced the decision this weekend, however begrudgingly, in blog posts. Both admit that success in the mobile space requires them to abandon the quest to make WebM the standard for streaming video in HTML5. Even with Google’s support , at least on the desktop, VP8 was never able to seriously threaten the entrenched and battery-friendly (not to mention, Apple and Microsoft backed) H.264. For more details check out the source links. Mozilla caves, will support H.264 to avoid ‘irrelevance’ originally appeared on Engadget on Mon, 19 Mar 2012 17:02:00 EDT. Please see our terms for use of feeds . Permalink Inquirer | Mozilla Hacks , Mitchell’s Blog | Email this | Comments