front end
1.0.0
Préparation : Pour ce contenu, l'étudiant doit disposer d'un ordinateur avec accès Internet, d'un navigateur web prenant en charge HTML 5 (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera, etc.), d'un éditeur de texte (VSCode, etc.) .) et une plateforme d'hébergement (gratuite ou payante).
Quand on parle de site web, on peut remarquer que ce terme est la combinaison de deux mots en anglais : « web », qui signifie réseau et fait référence au World Wide Web, et « site », qui signifie lieu. En ce sens, un site Web ou un site est un endroit accessible sur Internet, via une URL, et comportant un ensemble de pages programmées dans une certaine langue.
Pour mieux comprendre ce sujet, regardons un exemple : lorsque vous tapez l'adresse blog.betrybe.com dans votre navigateur internet pour accéder au blog de Trybe, le navigateur va chercher où se trouve ce site sur internet. Ensuite, une requête sera faite au serveur.
Tous les fichiers texte, image et style qui composent la page Web sont stockés sur ce serveur. Ensuite, le serveur renverra cet ensemble de documents au navigateur afin qu'il puisse afficher le contenu tel que vous le voyez sur votre écran.
Les sites Web peuvent présenter différentes formes et contenus. Certaines des options incluent : des magasins virtuels, tels que Mercado Livre et Amazon, où les produits peuvent être achetés et vendus ; sites Web et portefeuilles institutionnels, utilisés par les entreprises et les particuliers pour se présenter et être trouvés par les clients ; et des blogs, comme celui que vous lisez.
De plus, les sites Web peuvent également être classés comme statiques ou dynamiques. Les sites Web statiques sont généralement développés en utilisant HTML, CSS et JavaScript. Son contenu est plus simple et il n’y a aucune interaction avec une base de données.
Les sites Web dynamiques, en plus de tirer parti du HTML, du CSS et du JavaScript, utilisent également des langages de programmation plus robustes, comme PHP. Ces sites disposent de fonctionnalités connectées à une base de données. De cette façon, chaque page consultée peut apporter des données spécifiques.
Avec le Web Design, vous devez observer l'importance de l'interface pour le développement de sites Web, l'évolution des technologies utilisées dans la construction de pages Web riches (web 1.0, web 2.0, web 3.0 et web 4.0), l'évolution des interfaces (esthétiques, fonctionnelles et structurelles). ).
Par conséquent, vous devez comprendre l’importance de créer des interfaces riches pour créer un site Web, en visant la meilleure expérience de navigation et d’utilisabilité pour l’utilisateur final, connaissant certaines technologies utilisées dans le passé pour créer des sites en ligne. À partir de cette vision, observez les anciennes tendances du marché, ainsi que les nouvelles tendances dans le développement des interfaces.
Palette de couleurs :
Dégradés :
Fondamentalement, le développement Web consiste à coder des pages pour Internet. Cependant, cette tâche va au-delà de l'utilisation de HTML et CSS, les outils de base pour créer une page statique, qui présente des informations qui ne peuvent être modifiées qu'en éditant le code source.
À l’inverse, les pages d’un site Web peuvent être dynamiques. Cela signifie que le contenu affiché peut être modifié sans interférer avec le code source. Pour ce faire, les parties dynamiques du site Web sont stockées dans une base de données, accessible chaque fois qu'il est nécessaire de récupérer ce contenu.
Cette fonctionnalité permet le développement d'applications complexes, qui utilisent des règles métier, des API — Application Programming Interface — et bien plus encore. Il existe donc une division entre les activités axées sur le développement Web, le codage côté client (front-end) et le codage côté serveur (back-end).
Exemple d'API avec, la structure la plus utilisée actuellement pour les Applications Web et Mobiles, l'API REST également appelée API RESTful .
Les applications Web représentent un nombre croissant de sites sur le Web ; c'est-à-dire qu'elles imitent les applications de bureau plutôt que les documents traditionnels et les liens statiques de texte et d'images qui constituent la majorité du Web. A titre d’exemple, nous avons des traitements de texte en ligne, des outils de retouche photo, des sites de cartographie, etc. Propulsés en grande partie par JavaScript, ils ont poussé HTML4 au bord de ses capacités. HTML5 spécifie de nouvelles API (Application Programming Interface) pour DOM (Document Object Model), qui est une convention multiplateforme et indépendante du langage pour représenter et interagir avec des objets et des documents HTML, XHTML et XML.
Ces nouvelles API vous aident à glisser-déposer des objets envoyés par le serveur, tels que des dessins, des vidéos, etc.
Ces nouvelles interfaces que les pages HTML exposent à JavaScript via des objets dans le DOM facilitent l'écriture d'applications utilisant des modèles hautement spécifiés, plutôt que de simples gadgets mal documentés.
Plus important encore est la nécessité d'un standard ouvert et libre (à utiliser et à mettre en œuvre) qui puisse rivaliser avec les standards propriétaires comme Adobe Flash ou Microsoft Silverlight. Indépendamment de ce que vous pensez de ces technologies ou de ces entreprises, nous pensons que le Web est une plateforme vitale pour la société, le commerce et les communications entre les mains d'un fabricant.
Des millions de pages Web sont déjà utilisées et il est impératif de continuer à les reproduire. Ainsi, HTML5 est principalement un dérivé de HTML4 qui continue de définir la manière dont les navigateurs doivent gérer les anciens balisages tels que ,
Le terme interface peut avoir plusieurs significations selon le domaine dans lequel il est étudié. Dans le domaine des technologies de l'information, l'interface désigne la possibilité de communication entre deux systèmes qui ne pourraient pas communiquer naturellement sans une aide extérieure .
HCI est l’étude de l’interaction entre les personnes et les ordinateurs. Il s'agit d'un sujet interdisciplinaire qui relie l'informatique, les arts, le design, l'ergonomie, la psychologie, la sociologie, la sémiotique, la linguistique et des domaines connexes. L'interaction entre les humains et les machines s'effectue via l'interface utilisateur, composée de logiciels et de matériel.
L'interaction homme-machine est une discipline concernée par la conception, l'évaluation et la mise en œuvre de systèmes informatiques interactifs à usage humain et par l'étude des principaux phénomènes qui les entourent.
Envoyer un e-mail
Le terme média numérique est à l'opposé du média analogique, qui était configuré par une base matérielle : le son était enregistré dans de petits sillons, sur une surface en vinyle et, lorsqu'une aiguille passait dans ces sillons, le son était reproduit. Dans les médias numériques, le support physique disparaît pratiquement et les données sont converties en séquences numériques ou de chiffres - d'où l'utilisation du terme numérique. Ainsi, les sons, les images, les textes sont en réalité des séquences de nombres, ce qui permet le partage, le stockage et la conversion des données. Au sens le plus large, les médias numériques peuvent être définis comme l'ensemble des véhicules et dispositifs de communication basés sur la technologie numérique, permettant la diffusion ou la communication numérique d'œuvres intellectuelles écrites, sonores ou visuelles. Moyens d'origine électronique utilisés dans les stratégies de communication des marques auprès de leurs consommateurs, généralement appelés médias numériques.
Flash a toujours été l'alternative la plus viable pour ceux qui avaient besoin d'ajouter des vidéos et de la musique aux pages Web. Il était et est toujours présent dans presque tous les navigateurs et nous disposions d’un format qui pouvait être utilisé sans problème majeur.
Ajoutez simplement un appel au plugin et cela fonctionne.
En raison d'incohérences du navigateur, il a été nécessaire d'ajouter à la fois le
Pour cette raison, HTML 5 est doté d'un nouveau support, natif du langage, pour éviter l'utilisation de plugins et de commandes inutiles. Actuellement, il suffit de passer un simple appel, comme s'il s'agissait d'une image et le fichier est déclenché.
Le problème présenté par la nouvelle commande est l'utilisation de l'attribut src qui ne fonctionne pas bien dans certains navigateurs. Et si l’on veut que tout le monde puisse ouvrir la page, avec n’importe quel navigateur, il faut utiliser un autre type d’attribut. Par conséquent, il est courant d'utiliser l'attribut .
L'élément
< video width =" 426 " height =" 240 " controls > < source src =" video.mp4 " type =" video/mp4 " > < source src =" video.webm " type =" video/webm " > < source src =" video.ogg " type =" video/ogg " > video >
< audio controls > < source src =" audio.mp3 " type =" audio/mpeg " > < source src =" audio.ogg " type =" audio/ogg " > < source src =" audio.wav " type =" audio/wav " > audio >
Il existe plusieurs codecs possibles et il vous faudra exporter au moins deux versions pour avoir une plus grande portée.
Remarque : Les codecs sont des programmes utilisés pour encoder et décoder des fichiers multimédias. Ils compressent le format original, favorisant le stockage, et le décompressent lors de la reproduction, le transformant à nouveau en image ou en audio.
Tous les exemples audio et vidéo mentionnés sont importés via un document dans le répertoire. Et la question est, comment importer une vidéo déjà hébergée sur un site comme YouTube ou Vimeo ? Et laquelle des deux solutions (Via document ou via serveur) est la plus avantageuse ?
Voyons comment importer des vidéos depuis YouTube et Vimeo, étape par étape !
Jusqu'à l'apparition du HTML5, les tableaux étaient utilisés comme ressource pour concevoir des mises en page. Les concepteurs ont utilisé des tableaux comme grille pour afficher des images et du texte, et ils ont été largement utilisés, devenant ainsi la forme prédominante de conception de sites Web, créant ainsi un aspect riche.
Cependant, aujourd’hui, l’utilisation de tableaux interfère en réalité avec la construction de sites Web meilleurs, plus accessibles, flexibles et fonctionnels, notamment pour les nouveaux médias, tels que les téléphones portables, les tablettes, etc.
Ces tableaux existent toujours dans HTML 5 en tant que ressource permettant d'afficher des données tabulaires, des informations provenant d'une base de données. Avec la nouvelle version de HTML, nous pouvons créer des sites Web entièrement sans tableaux, créant ainsi des mises en page dynamiques qui apparaissent sur de grands écrans comme sur un ordinateur et s'adaptent bien à un petit écran de smartphone. Plus tard, vous verrez comment créer des mises en page réactives avec HTML5 et CSS3.
La commande table n'a pas été supprimée du langage, mais son utilisation a été restreinte. Par contre, nous avons encore plusieurs sites Internet qui utilisent cette ressource, il est donc important que nous comprenions son fonctionnement afin de pouvoir, si nécessaire, entretenir ce type de page.
La commande pour insérer une table est . Pour démarrer une ligne , il faut introduire la balise
et pour une cellule , qui divise la ligne du tableau. divise la ligne du tableau en plaçant le contenu en gras. Toutes ces commandes se terminent respectivement par et .
< table >
< tr >
< td > td >
< td > td >
tr >
table > La commande Pour choisir les lignes internes qui seront affichées dans le tableau, nous utilisons l'attribut Voir quelques exemples : La partie formulaires HTML est très importante pour remplir les données que les utilisateurs saisissent dans la page HTML. La collecte de ces données se fait par le back-end avec un langage de programmation back-end (PHP, JavaScript, Python, Java, etc.) qui stocke et interroge ces données dans une base de données (MySQL, PostgreSQL, MongoDB, OracleDB, etc. . Regardons les balises de formulaire : Formulaire de connexion (passe-partout) : possède une série d'attributs qui facilitent le formatage des tableaux. Les principaux sont :
align="" aligne le tableau sur trois positions : center , left , right et justify bgcolor="" détermine la couleur du tableau border="" détermine la taille de la bordure, si elle est nulle, la bordure n'est pas affichée cellspacing="" détermine l'espacement entre les cellules colspan="" détermine le regroupement entre deux ou plusieurs colonnes du tableau (latéralement) rowspan="" détermine le regroupement entre deux ou plusieurs lignes du tableau. (vers le bas et vers le haut) cellpadding="" détermine l'espacement entre le texte et la bordure de la cellule Attribut de règles
RULES , au sein de la balise. Les compléments de cet attribut sont : none pas de ligne entière. all pour afficher toutes les lignes entre chaque colonne et ligne du tableau (par défaut) rows pour les lignes horizontales entre chaque ligne du tableau. cols pour les lignes verticales entre chaque colonne du tableau. groups pour les lignes entre les groupes de colonnes et les sections horizontales, définies par des balises spéciales telles que < table border rules =" all " 6 >
">
">
">
">
Formulaire de TAG
Senha: