Quick hits with the Flexible Box Model Introduction I'd bet that you've done your fair share of styling elements to be arranged horizontally or vertically on a page. As of yet, though, CSS has lacked a suitable mechanism for this task. The draft describes Flexbox as: [...] a CSS box model optimized for interface design. Super. Floats? Flexbox gives us a new value for the display property (the box value), and eight new properties: box-orient box-pack box-align box-flex box-flex-group box-ordinal-group box-direction box-lines Eight new properties? Common flexbox style properties Styles used on the box display: box This new value for the display style opts this element and its immediate children into the flexible box model. box-orient Values: horizontal | vertical | inherit How should the box's children be aligned? box-pack Values: start | end | center | justify Sets the alignment of the box along the box-orient axis. box-align Values: start | end | center | baseline | stretch Basically box-pack's brother property. box-flex Summary
Dive Into HTML5 HOW TO: Get Started with HTML5 Boilerplate This series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace's hosting solutions here. This is not your father's world wide web. Thanks to soaring smartphone sales, new tablet devices like the iPad, and the burgeoning trend of connected devices, individuals are accessing and experiencing the web in a very different way than they were even five years ago. The desktop browsing experience is also undergoing radical change, thanks to the evolution of JavaScript frameworks and the push for standards successors such as CSS3 and HTML5. Even for the seasoned developer, it can be difficult to know where to start if you want to embrace the new technologies of HTML5 and support new devices like the iPhone, Android-based smartphones or the iPad without neglecting users on older browsers. To be clear, HTML5 Boilerplate is not a framework. As a result, a ton of awesome projects have already used HTML5 Boilerplate alongside other techniques.
HTML5 Notifications - Les notifications HTML5 sur Webkit Une nouvelle spécification HTML5 très intéressante, toujours à l'état de brouillon, fait son apparition: Les notifications Web HTML5. Une nouveauté qui pourrait être vraiment pratique pour de nombreuses applications web. En effet, imaginez les sites web communautaires proposant des messageries internes ou des évènements live. Il pourrait être intéressant de notifier l'utilisateur qu'il y'a de nouveaux messages / évènements en attente. On a vu comment attirer l'attention en manipulant la favicon de son site en Javascript, maintenant, voyons comment il sera possible de le faire plus efficacement encore! Pour le moment, seul les navigateurs WebKit supportent l'API Notifications HTML5. Vous pouvez tester sous Chrome le rendu d'une notification HTML5 avec cet exemple d'implémentation. HTML5 Notifications: Côté code, comment ça fonctionne ? 01.if (window.webkitNotifications) { 03. if (window.webkitNotifications.checkPermission() == 0) { 06. } else { 07. window.webkitNotifications.requestPermission();
Anhang - Einführung in XHTML, CSS und Webdesign - Michael Jendryschik Hinweis: Diese »Einführung in XHTML, CSS und Webdesign« entspricht der zweiten Auflage des gleichnamigen Buches, das im Dezember 2008 im Verlag Addison-Wesley erschienen ist. Die Inhalte sind mittlerweile veraltet, fast alles hat sich weiterentwickelt. Seit einigen Jahren gibt es HTML5, von XHTML redet niemand mehr, und auch die Entwicklung und Unterstützung von CSS ist um Einiges weiter. Auch fast alle Grundlagentexte müsste man schon lange fortschreiben. Zurück zur Startseite und zum Inhaltsverzeichnis des Buchs Änderungen in Version 4.0.3 Aktualisierung des Kapitel über das CSS-Boxmodell Aufteilung auf mehrere Seiten, um die Übersichtlichkeit und Lesbarkeit zu erhöhen. Beschreibung des RGBA-Farbwerts im Kapitel Eigenschaften und Werte. Änderungen in Version 4.0.2 Widerspruch im Abschnitt Die Frage nach der richtigen Schriftfamilie Gemeldet von Christoph Krebs. Korrekturen einiger Tipp- und Rechtschreibfehler Aktualisierung veralteter oder ins Leere führender Links
Get Ready for HTML 5 With support in Chrome, Firefox 3.5, Opera, and Safari, HTML 5 is coming at you like a runaway train. Here are some suggestions to help you prepare to get on board rather than be left at the platform or tied to the tracks. See what others have done#section1 Article Continues Below The first thing you can do to prepare for HTML 5 is see how other people are using it. Now you do it#section2 You can look at the sites, read all the articles here and elsewhere, and even read the specification—but none of that will help you understand HTML 5 as much as using the new elements. By doing this, you’ll find out what works and what doesn’t. X marks the spot#section3 If you are like most designers, you probably don’t write all your markup by hand. HTML 4.0 (the markup language we all know and love) is based on a “rulebook” called SGML. When you write markup in HTML form, you are allowed to leave off some closing (and opening!) Of course, it’s not all good news. Fig. 1. Regular expressions#section4
15 (More) Inspiring HTML5 Experiments Unless you have been living under a rock you will have heard about HTML5. It’s just everywhere now, thanks to the promotion of the Apple CEO ex-CEO Steve Jobs and certain developers who believe that HTML5 can take over Flash. Well, in fact we don’t see this situation happened yet, but HTML5 is really magical in reference to its video capabilities, canvas illustration and animation which work really well and smooth. The fact is that it’s so promising that projects are popping up all over the places that have been made as a way of testing the boundaries of HTML5. Believe its power or not, we will be showcasing you 15 enlightening experiments which make the best use of HTML5, and guess what, you can experience gravity, music-based animation, and rendering of creatures that just works like creatures! Have a fun time with them and oops, they’re best served with the latest version of Mozilla Firefox and Google Chrome. Just in case you’re not satisfied with these HTML5 fun, we have more for you!
Yes, You Can Use HTML 5 Today! The blogosphere was jerked into excitement when Google gave a sneak preview of its new service, Google Wave. Only the select few have an account, but there’s an 80-minute video about it on YouTube for the rest of us. The service is an HTML 5 app, and so HTML 5 has gone from being too far away to care about to today’s hot topic. There have been many changes to the HTML 5 landscape since my colleague, Lachlan Hunt’s 2007 article on A List Apart, A Preview of HTML 5. Let’s see what’s happening in the world of HTML 5. What Is It? To some, it’s an outrageous attempt by browser manufacturers to foist what they want onto developers. The reason that opinion is so divided is that HTML 5 is more than just a markup syntax for documents, like HTML 4 is. Markup We’ll start by thinking about marking up a typical blog today. Currently, there are no ways in HTML 4 to mark up these elements in a semantic fashion – that is, HTML 4 offers no footer or header elements of its own. <! header and footer nav article
Tooling & The Webapp Development Stack more productivity and less stress with a robust front-end toolchain Paul Irish. 2012. You can navigate with → and ↓. Also space gives an exposé mode (that might be quite slow). The goal We want rich web apps, that act responsively and present compelling experiences. The problem Development takes time. No developer wants to be spinning their wheels, or operating on mundane tasks when they could instead be creating rich and compelling experiences. Smart developers work with smart tools, effective workflows, and wise strategies for development. It starts with HTML5... In 2001, Hixie is testing HTML parsing.. A programming tool or software development tool is a program or application that software developers use to create, debug, maintain, or otherwise support other programs and applications. Optional software that assists in development of webapps. Tooling contextualized The Webapp Lifecycle: Various Boilerplates... Styling Markup Scripting Looking back a few years... Basics Iteration Automators Linting
15 Useful Resources to Get Clued Up on HTML5 HTML5 this, HTML5 that! There’s been plenty of HTML5 talk around the blogging world recently. It’s no longer a tiny spec on the horizon, it’s due to arrive soon! HTML5 and The Future of the Web A good place to start for a dose of HTML5 goodness is this in-depth article from Smashing Magazine. Get Ready for HTML 5 For those wanting to read up on some more complicated HTML 5 features, A List Apart has an article covering everything you’d want to know about regular expressions, SVG graphics and the Canvas element. CSS code structure for HTML 5: some useful guidelines Woork provides some useful guidelines and examples in this post, showing how both HTML and CSS can be written to work together. HTML 5 Tutorial – A Simple Web Page Layout If tutorials are more your thing, get your hands dirty with this walkthrough on SpicyWebDesign, which covers the process of building a simple web page layout with a HTML5 structure. HTML5: The Basics (1 of 4) A Preview of HTML 5 Steve Smith on HTML5 and CSS3