HTML5 & CSS3 pour Dummies Cheat Sheet - dummies

Par David Karlins, Judith Muhr

HTML et CSS sont les éléments de base des sites Web. L'avènement de HTML5 et CSS3 représente une étape évolutive dynamique et puissante dans le développement de la conception web. Maximiser le potentiel de HTML5 et CSS3 permet d'appliquer le style et le formatage, de présenter l'audio et la vidéo, et de créer de l'animation et de l'interactivité d'une manière qui n'a jamais été possible sans enchaîner plugins, fichiers image et JavaScript.

Top Ressources en ligne gratuites pour HTML5 et CSS3

Vous avez entendu le vieil adage: "La liberté d'expression n'est pas gratuite. "Cela s'applique également à la conception de sites Web, à moins que vous n'utilisiez les ressources gratuites les plus utiles. Voici une liste des meilleures ressources gratuites que vous pouvez trouver en ligne pour HTML5 et CSS3:

• L'hébergement gratuit est disponible chez 000webhost. com. Leurs sites gratuits sont sans publicité, prennent en charge les scripts côté serveur et disposent d'un enregistrement de disponibilité raisonnablement fiable.

• Vous avez besoin de livres (comme HTML5 & CSS3 For Dummies - pour prendre un exemple au hasard) pour donner un aperçu de la façon de créer des sites Web. Mais les ressources détaillées qui complètent ces connaissances sont disponibles en ligne et le plus utile est W3schools. com.

• Vous pouvez créer une application Web puissante et entièrement compatible avec les mobiles grâce aux outils de jQuery Mobile.

• Sur jQuery Mobile, découvrez les thèmes (styles) personnalisés et gratuits de ThemeRoller.

• Dépannez et validez votre code avec les outils du W3C. Vérifiez CSS à // jigsaw. w3. org / css-validator / et HTML sur // validator. w3. org /.

• Générez des combinaisons de couleurs gratuites sur Adobe Kuler.

• Vous avez besoin d'un champ de recherche fiable pour votre site, mais vous n'avez aucun budget dans votre boîte de recherche? Utilisez FreeFind, qui crée des zones de recherche pour votre site, sans utiliser ou vendre des données sur qui recherche quoi sur votre site.

• Que diriez-vous d'un blog gratuit? Obtenez-en un à Blogger.

• Enfin, aidez les internautes à vous trouver avec une carte Google intégrée dans votre site.

Outils de préparation de vidéo HTML5 pour le Web

La vidéo native sans plug-in (comme Windows Media Player ou QuickTime Player) est l'une des nouvelles fonctionnalités les plus intéressantes du HTML5. Mais où obtenez-vous la vidéo compatible HTML5? Comment le présentez-vous? Voici quelques outils pour vous aider à résoudre ces problèmes:

• Transformez vos fichiers vidéo en Firefox Theora Ogg.

• Microsoft propose un didacticiel sur la création de contrôles JavaScript pour la vidéo native.

• Qui peut suivre la liste changeante des navigateurs supportant les formats vidéo natifs HTML5?Réponse: les gens de Wikipédia suivent.

• L'une des ressources (gratuites) en ligne les plus précieuses pour la conception de sites Web, et encore moins pour la vidéo sur le Web, est le Miro Video Converter. Vous branchez n'importe quelle vidéo, et il produit des formats vidéo HTML5-friendly.

• Besoin de tester votre vidéo dans différents navigateurs? Le saucelab. Les outils de com ne sont pas gratuits, mais ils offrent des essais gratuits qui fournissent un aperçu de votre vidéo dans n'importe quel appareil à partir d'un ordinateur de bureau Windows avec IE 6 à la dernière version du système d'exploitation de l'iPad.

• Vous avez besoin de faire un peu de retouche sur votre vidéo avant de l'afficher? Loopster propose des outils de montage vidéo en ligne gratuits

• YouTube et Vimeo hébergeront vos vidéos gratuitement, mais pour environ 60 dollars par an, Vimeo offre un service qui héberge votre vidéo et vous donne un contrôle total sur qui peut le voir, et présente la vidéo sans des annonces ou du matériel promotionnel pour vimeo.

Optimiser les images avec de grandes zones de couleur unie en utilisant le format GIF

Lorsque vous optimisez des graphiques avec du texte superposé sur une image photoréaliste, vous devez créer des coupes séparées pour les zones de l'image photoréalistes et créer des tranches pour les zones de l'image qui contiennent du texte. Exporter les zones contenant du texte en utilisant le format GIF, et exporter les zones photo-réalistes de l'image en utilisant le format JPEG. Voici quelques conseils pour vous aider:

• Pour les images JPEG de haute qualité, utilisez un paramètre de qualité de 70 lors de l'exportation. Pour les images JPEG plus petites, vous pouvez vous en sortir avec un paramètre de qualité de 50.

• Si vous créez une galerie de photos pour un produit ou pour un photographe, exportez les images au format JPEG avec un paramètre de qualité de 80.

• Lors de la compression d'images au format JPEG, portez une attention particulière aux bords des objets dans l'image. Lorsque vous commencez à voir des pixels ou que les bords manquent de définition, vous avez compressé l'image trop loin.

• Lorsque vous exportez des images au format de fichier GIF, utilisez le moins de couleurs possible pour obtenir une image nette et une image à chargement rapide.

• Lorsque vous rééchantillonnez des images pour des sites Web, la résolution maximale requise est de 72 pixels par pouce.

Les sites Web sans vidéo sont de plus en plus rares. La vidéo est partout sur Internet: elle est utilisée pour le divertissement, dans les publicités, et pour promouvoir les stars du rock et d'autres artistes. Quand la vidéo est bien faite, c'est une chose de beauté. Voici quelques éléments à prendre en compte lors de l'ajout d'une vidéo à une page Web:

• La vidéo occupe beaucoup de bande passante. Si la bande passante d'un site Web est dépassée, la charge peut être plutôt coûteuse. Au lieu d'héberger la vidéo sur un site Web, téléchargez-la sur YouTube, puis intégrez la vidéo sur une page Web ou un blog.

• Ne pas enfreindre les lois sur les droits d'auteur. Ne copiez pas de vidéos provenant d'autres sites Web ou des vidéos YouTube d'autres personnes et utilisez-les sur votre site Web.

• Vérifiez la licence: Si vous utilisez une vidéo d'un fournisseur ou d'un fabricant sur un site Web commercial, assurez-vous que vous êtes couvert par le fournisseur ou la licence du fabricant.

• Utilisez un caméscope de haute qualité pour enregistrer une vidéo: Non, un iPhone n'est pas un caméscope de haute qualité. Si vous codez des vidéos de mauvaise qualité sur le Web, vous obtenez une vidéo de mauvaise qualité.Rappelez-vous le vieil axiome: Garbage in, garbage out.

• Assurez-vous que les visionneuses du site Web disposent des plug-ins nécessaires pour visionner la vidéo.

• Si vous créez des pages HTML5 avec une vidéo, assurez-vous que l'audience prévue pour ce site utilise des navigateurs compatibles HTML5.

• N'utilisez pas de transitions lorsque vous modifiez plusieurs clips vidéo pour créer une vidéo pour le Web. Les transitions vidéo sont excellentes sur les vidéos HD, mais elles ne sont pas bonnes lorsque vous encodez une vidéo pour le Web.