Réflexions sur le webdesign, les nouvelles technologies, la vie ...

HTML5 et CSS3 : Faites évoluer le web design

Voici un livre qui m’a beaucoup intéressé, un livre pour les webdesigners. La conception d’un site passe par les langages fondateurs que sont le HTML et les CSS (HyperText Markup Language + Cascading Style Sheets). Arrivés à leurs versions majeures, HTML5 et CSS3 marquent sans aucun doute, une évolution fondamentale dans la façon de concevoir les sites web.

La connaissance de ces langages est indispensable pour les utilisateurs de CMS, comme WordPress, aussi bien du côté design que développement. Car pour moi, un bon développeur doit avoir un minimum de connaissances Front, tout comme le web-designer doit avoir des notions de PHP.

Ce livre s’adresse aux concepteurs de sites Web et aux designers Web ayant déjà la connaissance de l’HTML 4 et des CSS 2.1, qui veulent faire évoluer leurs créations et créer des sites Web intégrant ces nouveaux standards.

Dans la partir consacrée à l’HTML5, vous étudierez la nouvelle syntaxe, les nouveaux éléments de structure sémantique (en-tête, section, navigation…) et les formulaires interactifs.

Dans celle consacrée aux CSS3, vous apprendrez à utiliser les nouveaux sélecteurs, la mise en forme du texte et les conteneurs (ombre portée, coins arrondis, dégradés, bordures en motif…).

Ecris dans un style accessible, même pour les débutants, ce livre est destiné à dégrossir le sujet et vous permettra de tester ces nouveaux standards qui seront bientôt démocratisés. Vous pourrez ainsi tester avec des exercices concrets ces évolutions.
 

A propos de l’auteur :

Responsable pédagogique dans un centre de formation et formateur sur les technologies Web et les Arts graphiques pendant plus de quinze ans, Christophe Aubry est aujourd’hui dirigeant de la société netPlume spécialisée dans la rédaction pédagogique et la création de sites internet. Auteur de nombreux livres aux Editions ENI notamment sur Dreamweaver, WordPress, Drupal, HTML et CSS, il reste au fait des nouveautés concernant la conception des sites Web, en effectuant une veille technologique régulière et en intervenant dans de nombreux forums.

Table des matières :

  • Introduction
  • Chapitre 1 : L’évolution de l’HTML et des CSS
  • Chapitre 2 : La nouvelle syntaxe HTML5
  • Chapitre 3 : Les éléments de structure HTML5
  • Chapitre 4 : Des modèles de sites HTML5
  • Chapitre 5 : Évoluer vers les CSS3
  • Chapitre 6 : Les nouveaux sélecteurs CSS3
  • Chapitre 7 : La mise en forme CSS3 des boîtes
  • Chapitre 8 : L’HTML5 et les CSS3 pour le texte
  • Chapitre 9 : L’HTML5 et les CSS3 pour les formulaires
  • Chapitre 10 : Les transformations CSS3
  • Chapitre 11 : Les transitions CSS3
  • Chapitre 12 : Les animations CSS3
  • Chapitre 13 : Le multimédia : audio et vidéo
  • Chapitre 14 : Le canevas de dessin
  • Chapitre 15 : Le design Web adaptatif
  • Chapitre 16 : Un design HTML5/CSS3 : The Cat Template
  • Chapitre 17 : Un design HTML5/CSS3 : FlipThru
  • Chapitre 18 : Un design HTML5/CSS3 : dConstruct

 
Lien vers les Editions ENI : http://www.editions-eni.fr
Pour l’achat de la version papier, la version numérique est offerte.
 
Voici aussi deux dépliants aide-mémoire de 12 pages, recensant les principales propriétés. L’aspect pratique, plastifié et moins encombrant qu’un gros livre, permet de les garder toujours à portée de main.
HTML5 CSS3

CSS : Vidéos élastiques

Dans l’optique du développement multiplateformes, on nous demande de penser en amont à toutes les options possibles pour qu’un projet web soit conçu pour passer aussi bien sur les navigateurs web mais aussi sous smartphones et tablettes. J’ai fait des recherches pour un projet ou beaucoup de vidéos étaient présentes. Non seulement les CSS doivent s’adapter aux formats, mais les médias aussi. Avec HTML5 on peut utiliser la balise native « video » avec max-width:100% + height:auto, mais ceci ne marche pas avec l’iframe intégré ou la balise object.
Heureusement, j’ai trouver un petit tuto sur webdesignerwall, qui traite de ce sujet. En HTML5 le code est basique :

Html

video {
max-width: 100%;
height: auto;
}

Comme je l’ai dit au début, ce code ne fonctionne pas si l’intégration utilise balise iframe ou la balise objet, qui est couramment utilisé par la plupart des sites de partage vidéo comme YouTube et Vimeo.

Pour des balises iframe & objet élastiques

Rien de compliqué, il faut juste envelopper le code d’intégration avec une DIV et spécifiez 50% à 60% en bottom. Il faut ensuite définir les éléments enfants (iframe, object et embed) en largeur et hauteur à 100%, le tout en position absolue. Ceci afin de forcer les éléments intégrés à s’élargir automatiquement. Ce qui donne :

Html

< div class="video-container" >
< iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0"
width="800" height="450" frameborder="0" >
< /div >

CSS

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }

Comment faire pour créer Largeur fixe & élastique ?

Pour contraindre la largeur d’une vidéo, une DIV supplémentaire est nécessaire. Enveloppez la vidéo avec cette autre DIV et spécifiez une valeur de largeur fixe avec max-width: 100%.

CSS

.video-wrapper {
width: 600px;
max-width: 100%;
}

Html

< div class="video-wrapper" >
< div class="video-container" >
< iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0"
width="800" height="450" frameborder="0">
< /div >
< !-- / video -->
< /div >
< !-- / video-wrapper -->

Compatible ?

Ceci fonctionne sur les principaux navigateurs (Chrome, Safari, Firefox, Internet Explorer, Opera, l’iPhone et l’IPAD).

Pour aller plus loin :
http://www.alistapart.com/
http://www.tjkdesign.com/

IE6 est mort (ou presque) vive IE9 ?

Microsoft a annoncé la fin programmé du fameux navigateur IE6, qui a fait passé des mauvais moments à pas mal de webdesigners, donner des cheveux blancs à certains, et des ulcères à d’autres. Sur le site IE6 countdown, on peut voir le pourcentage par pays, d’utilisateurs du navigateur historique. La France qui est encore à 3,9% d’utilisateurs, passe pour avant-gardiste comparé aux pays comme la Corée du Sud (24.8%) et la Chine (34,5%). Le problème des pays comme la Corée du Sud, c’est que la plupart des sites internet nécessitent une authentification sécurisée (shopping, réseau social, forums, …) reposant sur activeX. Les navigateurs alternatifs ne sont que peu ou pas connu. Le seul espoir d’avoir enfin un standard correct chez eux c’est IE9.

IE6 countdown

Internet Explorer 9 a lui été lancé la semaine dernière, et téléchargé en 24 heures 2.35 millions de fois (Firefox 8 millions en 24h). Microsoft souhaite donc éliminer IE6 au profit de nouvelles versions comme IE9 bien entendu. Le pire ets que l’on revive les mêmes problèmes de compatibilité entre les possesseurs d’IE7, IE8 et IE9 ….
Un navigateur stable et compatible qui évolue à la manière d’un Firefox ou d’un Chrome serait plus souhaitable pour tous, attendons de voir les résultats d’IE9, compatible Html5 ….


Pour le fun, un site se propose de signer une pétition pour sauver IE6 ^^ !!
Joke joke joke !!!

 Page 1 de 2  1  2 »