HTML5
Google Code University: Free Courses, Tutorials and Lectures for Web Development – AJAX, HTML5, HTML, CSS, Javascript and more
I grew up with webmonkey as the single best destination for web developers and any tutorial you could want, but just saw that Google has a Google Code University featuring Tutorials, Contributed course content and Video lectures on:
- Web Programming
- HTML
- CSS
- Javascript
- AJAX
- HTML5
- Web Security (yes, web developers should be well versed in Web Security)
Just looking through the site it is so much more than basic web development. Material covers topics ranging from the Android platform, to basic algorithms. Please check out the material that isn’t just web development. There’s a reason Google is providing content for Distributed Systems, Tools and working with APIs.
We’re never beyond refreshing our own skills, as I’m sure Google has some great advice on their site.
I wish I could send this link to some other web developer’s I’ve had to rescue projects from.
Web development with the iPhone and iPad in Mind
In the very near future, I will be posting a series of posts on what you should/shouldn’t be doing to develop a website where the iPhone and iPad are a target demographic. jQuery will figure prominently in the series, as I’ve seen almost all websites now require work with jQuery (or anther AJAX platform).
Let me know if you have any specific questions / concerns, and I’ll be glad to answer them.
Some interesting things to think about:
- How are mouse clicks triggered? (It’s not as straightforward as you’d think)
- How are hover states triggered? (Hint: the iPad has a hover state, but it’s not what you think — remember you only have a single touch, no arrow following your finger)
- What types of gestures can we use?
- What special considerations must we make for CSS?
- What are the ideal screen dimensions? (this is easy, but remember we have multiple devices, and multiple orientations)
- What types of video can we play? (iPad, iPhone 3GS, iPhone 3G, iPhone 2G and the original iPhone all have different specifications, it’s not that easy)
CSS3 and HTML5 For the masses: HTML5Shiv and CSS3 PIE make it possible
Everywhere I look on the web (the web developer web that is) is CSS3 this, jQuery that, shadows, HTML5.
Such a tease, what about our minimum browser requirements spec? Damn IE6 is yet again 10% of the target demographic.
Not only is IE6 the problem, but so is the most recent IE8, as well as IE7. They just don’t support CSS3 and HTML5.
Now we have some solutions…
HTML5 – Showcase and Experiments (Apple and Google)
Apple released their HTML5 Showcase a month or so ago. It was cool, but the showcase required Safari to view it (not sure if this is a technical limitation, or just marketing making the decision).
I just saw the Google equivalent, Chrome Experiments: Not your mother’s JavaScript … and it’s damn cool. Most of these (if not all, I haven’t gone through them all yet) are NOT limited to Chrome. If you can’t run it in your browser (and why NOT) – you can see videos of each of them.
Some of the featured experiments:
- Sketchpad – We’ve seen this before, showing off the ability to create vector graphics in HTML5 (we’ve linked to this before)
- Canopy – Impressive fractal zoomer implemented with HTML5
- Browser Ball – Some interesting animation of an element between windows.
- Wavy Scrollbars – physics simulation using browser scrollbars.
- Pong – Pong implemented through browser windows (annoying sound warning)
- Google Gravity – Physics applied to the Google homepage (demos very nicely physics as well as CSS rotations)
- Harmony – Sketching app
- Destructive Video – This is cool, blow apart a playing video (I’ve linked to this before) — notice how the video keeps playing
- Ball Pool – Another physics demo … rotations, animations, large numbers of objects.
Flash and HTML5 Video: YouTube’s perspective on the video tag
In conversations with designers and developers we have been discussing the pro and cons of using HTML5 video instead of Flash. Sites that support iPad / iPhone need HTML5 as an option, and recently has been driving project’s to require non Flash video.
YouTube’s API Blog published an article yesterday, Flash and the HTML5 <video> tag, which goes over the major points of the argument from one of the most influential players in the Flash vs. HTML5 market. It’s important to keep in mind while reading, that YouTube is owned by Google, and is positioned opposite Apple on many issues (this is far from impartial, but the points are applicable anyway).
Safari 5 Released for Mac and PC
Apple issued a press release following the WWDC announcing Safari 5:
SAN FRANCISCO—June 7, 2010—Apple® today released Safari® 5, the latest version of the world’s fastest and most innovative web browser, featuring the new Safari Reader for reading articles on the web without distraction, a 30 percent performance increase over Safari 4,* and the ability to choose Google, Yahoo! or Bing as the search service powering Safari’s search field.
Chrome 5 is final and released!
I forgot to post this a few days ago, but I wanted everyone to know — Chrome 5 is here!
Upgrades include:
- Full Screen Mode
- Javascript engine (V8) speed boost
- Bookmark Syncing
- Automated site translation
- More HTML5 support (Geolocation, App Cache, Web sockets, etc)
- Drag and Drop file upload support
Steve Jobs to do keynote at WWDC 2010: iPhone 4G to follow, HTML5 authorware?
I saw that Steve jobs will be doing the keynote of the Worldwide Developers Conference 2010.
This can only mean a few things;
- The new iPhone 4G will be announced (very likely)
- Apple will move away from AT&T (hopefully, I’m getting doubtful though)
I also believe there will be other announcements regarding development environments for HTML5. Given Steve Jobs’ strong HTML 5 support over the previous months, and the recent love/hate relationship (mostly hate) with Adobe — something tells me we will be seeing Apple competing with software for HTML 5.
Rich Snippets: How to properly list Reviews, People, Businesses, Events and Recipes for Google
Rich snippets let you share your reviews, people, businesses, events and recipes more accurately with Google. Why do what helps Google? Because Google will, in turn, help you.
If you properly implement rich snippets in either microdata, microformats or RDFa — you will see more traffic thanks to enhanced listings in Google. Google provides useful snippets in search results that are more likely to draw the eye and attention of end users.
HTML5: Video, 3D, Javascript and a Big Buck Bunny
An article written by Sean Christmann over at Craftymind reviews some cool effects you can create with HTML5, Video and 3D featuring the Blender created Big Buck Bunny.
Featured Posts
- HTML Fadein Fadeout: Basic Javascript/AJAX Tutorial using jQuery's fadeTo
- Basic AJAX Tutorial: Smooth Scrolling Text Marquee with a jQuery plugin
- Basic AJAX Tutorial: jQuery toggle and slide
- Hosting: How to pick a WordPress Host
- Basic jQuery Tutorial: Modify CSS classes and attributes, Hover and Toggle example
Follow Me
Email Subscription
Recent Posts
Top Commentators
- No commentators.
Archives
Tags
Blogroll
- 456 Berea St
- ActionScript 3 Design Patterns
- adactio – home of Jeremy Keith
- ajaxian
- Boxes and Arrows
- Chris Brogan
- CSS Globe
- InsideRIA
- Jarrod Michael Studios
- Mad Vertices
- NETTUTS
- Portsmouth Community Calendar
- Roomware Blog
- Signal vs. Noise
- Six Revisions
- Snook
- Style Grind
- Tiago’s Weblog
- Viget Extend
- Vitamin
- Whats the latest
- Why Banks Fail
- Woork
- zupko.info