Sites de construction Tout-en-un pour les nuls Fiche de triche - les nuls

Par David Karlins, Doug Sahlin

Qu'ils soient complexes ou simples, les sites web exigent que vous prenez des décisions - comme la couleur, le thème et le ton - et vous jonglez avec de nombreuses pièces du projet - comme du code, des feuilles de style et des graphiques. Savoir à quelles ressources se tourner pour l'aide à la mise en œuvre de HTML5, et quelques points clés sur l'incorporation de graphiques et de vidéos, peuvent vous aider.

Ressources en ligne pour la création de sites Web

Au milieu de tout le fouillis sur le web se trouvent de précieuses ressources en ligne gratuites pour construire les éléments essentiels d'un site Web invitant et accessible. Pour que vous n'ayez pas à passer au crible le fouillis, voici quelques-uns des meilleurs.

W3écoles. com fournit la bibliothèque en ligne la plus complète de ressources de code, mais cette bibliothèque peut être écrasante. Les liens suivants vous amènent à des points d'atterrissage utiles pour commencer:

Instructions sur la création d'une page HTML de base
Code HTML5 et didacticiels de base sur les nouveaux outils HTML5 pour les supports, les formulaires et la structure de page
Tutoriels sur le bâtiment lié, externe Feuilles de style CSS
Paramètres CSS de base, syntaxe et instructions pour l'ajout de CSS aux pages Web
Informations sur les effets et les transformations CSS3 (allant de drop-shadows au type pivoté)

Les ressources suivantes peuvent vous aider avec les bulletins électroniques, les blogs et plus encore:

Pour organiser des listes de contacts et envoyer des bulletins électroniques, l'outil le plus puissant est sans doute Constant Contact, mais vous pouvez utiliser un gestionnaire de courrier électronique presque aussi puissant et gratuit (pour les 500 premiers contacts) chez MailChimp.
La meilleure option pour un champ de recherche personnalisé pour votre site est FreeFind, qui génère des outils de recherche pour votre site, sans utiliser ou vendre des données sur qui recherche quoi sur votre site.
Besoin d'un blog? Google Blogger est gratuit, facile à configurer et vous permet de modérer les commentaires publiés.
Une option simple (et toujours gratuite) pour créer un lien vers une carte afin d'aider les clients, les clients et les visiteurs à vous trouver dans le monde réel.

Rappels pour la préparation de graphiques Web et de vidéos

Les sites Web sans graphiques sont presque inexistants ces jours-ci. Lorsque vous créez des graphiques, optimisez des images ou préparez des vidéos pour un site Web, les résultats doivent être précis, détaillés et rapides. Les trois types de graphiques les plus courants que vous utilisez sur un site Web sont des images photo-réalistes, des images telles que des logos comportant de grandes zones de couleur unie et des images combinant des images et du texte. Voici quelques rappels amicaux pour créer et optimiser des graphiques pour des sites Web:

Optimiser les images photo-réalistes en utilisant le format JPEG.
Optimisez les images avec de grandes zones de couleur unie en utilisant le format GIF.
Lorsque vous optimisez des graphiques dont le texte est superposé à une image photoréaliste, créez des découpes distinctes pour les zones de l'image qui sont photoréalistes et créez des découpes supplémentaires pour les zones de l'image contenant 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.
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: pour le divertissement, dans les publicités, pour promouvoir les stars du rock et d'autres artistes. Quand la vidéo est bien faite, c'est une chose de beauté. Cependant, vous devez tenir compte de certaines choses lorsque vous ajoutez 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 codez une vidéo pour le Web.