Formulaires HTML5 : placeholder, required, pattern et validation HTML5 introduit de nombreuses nouveautés pour les formulaires pour améliorer l'aide à la saisie et les contrôles disponibles pour l'utilisateur. Plusieurs attributs simples à mettre en place améliorent la prise en charge des formulaires, tout en se passant de JavaScript. placeholder est un attribut qui permet de renseigner un texte indicatif par défaut dans un champ de formulaire. Mise en place Ce comportement a très longtemps été mis en place grâce à JavaScript et des techniques dans ce genre : Avec l'arrivée de HTML5, la syntaxe se simplifie pour donner : La présence d'un placeholder ne vous dispense pas de renseigner un label pertinent. Démonstration Éléments compatibles L'attribut placeholder peut être placé sur les éléments : <input> : de type text, search, password, url, tel, email <textarea> Compatibilité de l'attribut placeholder Styler le placeholder Ce contenu éphémère peut être distingué du contenu entré par l'utilisateur grâce à une pseudo-classe (ou pseudo-élément) CSS.
Emmanuel B. :: Un menu horizontal déroulant (CSS) Nous allons voir comment faire un menu horizontal déroulant, avec plusieurs sous-niveaux, uniquement en HTML/CSS Vous pouvez voir un exemple ici. Voyons d'abord le code html : Pour l'instant, nous obtenons un rendu tout à fait normal d'une liste html à plusieurs niveaux. Et maintenant, du CSS ! Tout d'abord, il faut enlever les marges automatiques des listes, et supprimer les puces devant chaque élément : Vous avez peut-être noté la présence de font-size: 0; ? Vous trouverez d'autres solutions au problème de white-space sur Alsacréactions. Voyons maintenant les propriétés à donner aux éléments de liste : Comme annoncé, les éléments de liste sont déclarés comme inline-block, et on donne une taille au texte. Définissons maintenant les liens : Pour pouvoir appliquer une largeur et une hauteur, il faut donner au lien la propriété display: block;. Il faut enfin masquer les sous-menu par défaut : Nous allons utiliser la pseudo-classe :hover pour faire apparaître les sous-menus au survol d'un lien.
Les nouveautés du HTML 5 Le HTML5, le successeur du HTML4.01 est arrivé depuis quelques temps déjà. Il offre pas mal de nouveauté intéressante, voici un rapide aperçu du potentiel du HTML 5: Plus d'interactivité L'une des principales nouveautés de HTML 5 : l'interactivité ! Un code plus propre HTML5 permet aux développeurs un nettoyage automatique du code, ce qui permet ainsi de simplifier la structure d'une page et ainsi alléger le poids final de la page web. Un code plus facile à comprendre Alors que ces prédécesseurs sont relativement complexes à assimiler et à manipuler pour des amateurs, le langage HTML 5 se veut avant tout d'une simplicité absolue ! Une géolocalisation possible Et oui, c'est également l'une des grandes nouveautés du langage HTML 5. Stockage des données du côté client Des formulaires plus sympas HTML5 permet aux webmasters d'intégrer des formulaires plus sympas pour les utilisateurs, avec une très nette amélioration des éléments du formulaire (text input,...). Une accessibilité facilitée
Réaliser une application offline en HTML5 Cet article va vous apprendre à gérer trois technologies : HTML5 gérant le mode offline, le cache du navigateur et le stockage local. Notre exemple est une gestion de « to-do list » qui utilise trois technologies : HTML5 et JavaScript/jQuery pour le côté client et PHP pour le côté serveur. Le code est simple. Code HTML : Code CSS : Code JavaScript : script.js Sélectionnez Code PHP : III.1. Le mode hors-ligne intervient quand votre ordinateur n'a plus de réseau ou que votre téléphone se situe dans une zone sans réseau. Pour que ce fichier soit bien déclaré au niveau du serveur, il nous faut déclarer son MIME-TYPE via un fichier .htaccess : AddType text/cache-manifest manifest Après que le fichier a bien été déclaré au niveau du HTML et du serveur, nous allons voir comment il est structuré : manifest.manifest CACHE MANIFEST # Comment CACHE: delete.png index.html script.js style.css # Fichier JS : jQuery FALLBACK: NETWORK: /ajax.php
HTML5 Presentation In March 1936, an unusual confluence of forces occurred in Santa Clara County. A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches. Instead, by the billions, they all burst open at once. Then came the wind. It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley.
Structure d'une page HTML 5 Quels sont les éléments indispensable à une page HTML dans la spécification de la version 5? La structure de base est celle-ci: Ce qui change avec HTML 5? Le format est nettement simplifié par rapport aux standards précédents avec notamment un doctype minimaliste. Le DOCTYPE Le type de document a été introduit pour marquer la différence entre les anciens navigateurs qui suivaient le format usuel dans les années 90 et les navigateurs plus récents qui suivent la spécification HTML 3 puis 4 et 5. Sur la plupart des navigateurs, un DOCTYPE absent induit une compatibilité avec les anciens formats. Le langage et l'attribut lang L'attribut lang ne s'adresse pas aux navigateurs, mais plutôt aux outils de traitement automatique qui doivent comprendre les contenus selon leur langue. On peut donc le considérer comme optionnel. <p lang="en">English quotes</p> Head La balise contient plusieurs types d'élements: L'encodage avec la balise meta ou charset. L'encodage HTML 5 peut simplifier l'encodage: Les liens
12 nouvelles ressources jQuery et CSS Quoi de mieux pour booster votre esprit créatif web que de bons plug-ins utiles pour vos futures créations ? Webdesigner Trends vous propose 12 ressources récemment sélectionnées sur le web. C’est parti ! Pour cette sélection, j’ai décidé de ne pas m’arrêter à une utilisation précise. ElementTransitions.js Faisant suite à un article de Codrops sur les transitions de pages, elementTransitions.js est un répertoire de transitions originales basées sur jQuery et CSS3. Tabulous.js Un plugin d’onglet jQuery moderne, tout simplement. Intro.js Idéal pour une application web, le plugin Intro.js vous permet de faire une rapide visite guidée de votre interface pas à pas. Souvenez-vous de l’âge d’or de la tendance des menus sticky au scroll. Effeckt.css Une collection d’effets de transitions et d’animations en CSS. Mmenu Un plug-in tendance pour créer un menu sur mobile avec une seul ligne de JS. Swiper Swiper est un gros slider destiné aux mobiles et tablettes. Toolbar.js CSS Checkbox Superbox Tooltipster
HTML5 Microformats, microdata, nouvelle sémantique, nouveaux éléments HTML… Tant de nouveautés qui perturbent les intégrateurs web soucieux de se mettre à jour dans leurs compétences ou curieux de savoir ce dont ils peuvent déjà faire usage dans leurs intégrations. Bien que les microformats existent depuis 5 ou 6 ans, ce n’est qu’avec l’arrivée de HTML5 que la profession et les outils sont suffisamment mûres pour commencer à les exploiter réellement. Nous allons essayer de nous concentrer sur les microformats et, surtout, les microdata apportées par HTML5. Continue reading Bonjour à tous chers lecteurs, Ces 3 derniers mois ont été particulièrement intensifs, puisque j’ai co-écrit un livre nommé “HTML5 : De la page web à l’application web” avec mon confrère blogueur de l’HTML5 Jean-Pierre Vincent, créateur et animateur de braincracking.org. Continue reading Voici une présentation sur l’HTML5 que j’ai réalisé pour l’entreprise Sfeir dans laquelle je travaille. Continue reading Continue reading
Responsive Design in 3 Steps Responsive web design is no doubt a big thing now. If you still not familiar with responsive design, check out the list of responsive sites that I recently posted. To newbies, responsive design might sound a bit complicated, but it is actually simpler than you think. To help you quickly get started with responsive design, I've put together a quick tutorial. Step 1. Most mobile browsers scale HTML pages to a wide viewport width so it fits on the screen. Internet Explorer 8 or older doesn't support media query. Step 2. In this example, I have a basic page layout with a header, content container, sidebar, and a footer. Step 3. CSS3 media query is the trick for responsive design. The following set of rules will be in effect if the viewport width is 980px or less. Then for viewport 700px or less, specify the #content and #sidebar to auto width and remove the float so they will display as full width. You can write as many media query as you like. Conclusion
Liste des évènements HTML5 Un problème, une suggestion ou une remarque : Poser votre question ou venez en discuter sur notre forum. Évènement de fenêtre – Balise <body> Événements déclenchés pour l’objet window – fenêtre. Ils s’appliquent généralement à la balise <body> Évènement de curseur / souris Événements déclenchés par ula souris, son curseur, ses boutons ou sa molette – ou action similaire. Évènement de formulaire Événements déclenchés par des actions dans un formulaire. Évènement multimédia Événements déclenchés par les médias tels que les vidéos, les images ou les fichiers audio. Évènement du clavier Événements déclenchés par une touche du clavier ou une action similaire de l’utilisateur. 80 bonnes pratiques SEO Si vous êtes un peu perdu avec votre référencement (SEO) et que vous cherchez en premier lieu par où commencer avec des choses "propres", la société Opquast a mis en ligne une liste contenant 80 bonnes pratiques SEO à respecter (si vous le pouvez). Cette liste est sous licence Creative Commons et est disponible aussi bien en ligne qu'en format Excel, OpenOffice, et pdf. Si vous voulez aller encore plus loin dans l'optimisation de votre site, Opquast a mis aussi en ligne une extension pour Firefox capable de scanner une page web et de vous indiquer des "problèmes" selon différentes checklists (SEO, Perf web, accessibilité...etc.) A tester d'urgence ! Rejoignez les 48966 korbenautes et réveillez le bidouilleur qui est en vous Suivez KorbenUn jour ça vous sauvera la vie..
HTML5 se dévoile Le brouillon officiel (working draft) de HTML5 a été publié officiellement le 23 avril 2009 et depuis de nombreuses avancées ont été accomplies, les navigateurs supportant toujours plus de fonctionnalités et de nouveautés. La nouvelle génération du langage de balisage HTML remplacera à long terme HTML 4, XHTML 1.x et XHTML 2 qui a été abandonné. Profitons de cette occasion pour faire un tour d'horizon de cette nouvelle version de HTML. Consultez également toutes nos autres ressources HTML5 Qu'est-ce que c'est HTML5 ? Comme son nom l'indique, HTML 5 est le successeur de HTML 4. Le W3C c'est quoi déjà ? Le World Wide Web Consortium, abrégé W3C, est un organisme de standardisation à but non-lucratif, fondé en octobre 1994 comme un consortium chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP. Quelles sont les nouveautés ? <aside> Welcome! Les balises principales Doctype Le doctype est simplifié : Section Article Aside Nav