background preloader

HTML5

Facebook Twitter

Les nouvelles balises HTML5  HTML5 arrive avec de nou­velles balises qui vont vous per­mettre d’aller encore plus loin dans la créa­tion de vos conte­nus.

Les nouvelles balises HTML5 

Afin d’intégrer des nou­velles balises per­ti­nente, Andy Clarke (« l’ambassadeur des CSS ») a mené une étude auprès des déve­lop­peurs de renom et leur a demandé d’indiquer les noms qu’ils don­naient aux balises. Le résul­tat de cette étude a donné : les nou­velles balises HTML5 ! Décou­vrez les nou­velles balises struc­tu­relles telles que <article>, <sec­tion>, etc., les balises mul­ti­mé­dia comme <video>, <audio> et les balises <swg> ou encore <canvas>. Pour vous aider à y voir plus clair dans toutes ces nou­velles balises le for­ma­teur Bir­nou Sébarte vous conseille quelques sites pertinents : Tags : Birnou Sébarte, CSS3, formation sur responsive web design HTML5 CSS3, HTML5, responsive web design Article by Marion Marion has written 373 articles for this blog.

Tooling & The Webapp Development Stack. More productivity and less stress with a robust front-end toolchain Paul Irish. 2012.

Tooling & The Webapp Development Stack

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 (More) Inspiring HTML5 Experiments. Unless you have been living under a rock you will have heard about HTML5.

15 (More) Inspiring HTML5 Experiments

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! 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.

HTML5 Notifications - Les notifications HTML5 sur Webkit

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(); Sinuous - An HTML5 canvas game. Avoid the red dots!

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.

Quick hits with the Flexible Box Model

As of yet, though, CSS has lacked a suitable mechanism for this task. Enter the CSS3 Flexible Box Module, or Flexbox for short. 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. What is HTML5? (Infographic)