Réaliser des interfaces utilisateur statiques web ou web mobile Flashcards
Je veux que le titre principal de ma page soit en bleu par défaut, mais qu’il soit vert en format desktop. Comment puis je faire sans utiliser la moindre librairie externe ?
En utilisant une mediaquery en CSS avec l’instruction @media :
h1{
color: blue;
}
@media (min-width: 1250px) {
h1{
color:green;
}
}
Quels langages un navigateur web courant (firefox, chrome, …) est capable d’interpréter ?
La plupart des navigateur web peuvent nativement interpréter du code HTML / CSS
Pouvez vous expliquer ce qu’est le mobile first ? pourquoi on privilégie cette approche ?
Le concept de “mobile first” consiste à prioriser la création et l’optimisation des sites web pour les appareils mobiles avant de concevoir les versions pour les écrans de bureau ou les tablettes. Les raisons d’utiliser cette approche sont multiples, en voici une des principales : en commençant par concevoir pour les mobiles, les développeurs sont plus encouragés à adopter des pratiques de conception adaptative (responsive design) qui permettent au site de s’ajuster de manière fluide à différents types d’appareils et de résolutions d’écran.
Quelle est la différence entre l’attribut “id” et l’attribut “class” dans une balise HTML ? pourquoi utiliser des “id” alors qu’on pourrait utiliser des “class” partout ?
Les deux attributs “class” et “id” sont utilisés pour identifier des éléments HTML. La différence étant que l’id doit servir à identifier un élément unique dans le code HTML. Afin de garder une bonne lisibilité dans le code (donc avoir un code de meilleur qualité / mieux maintenable), il est utile d’utiliser un id pour signifier à un développeur extérieur qu’il a explicitement affaire à un élement HTML unique dans la page (la barre de navigation, le carrousel principal, …)
Pourquoi utiliser des balises sémantiques alors que je pourrais simplement utiliser des “div” partout ?
Les balises sémantiques sont conçues dans le but de donner du sens au contenu d’une page web, tant pour les développeurs que pour les navigateurs, les moteurs de recherche ou encore les logiciels d’audio-description pour les personnes malvoyantes / aveugles.
Vous avez terminé votre page Web, connaissez vous des outils permettant de vérifier si la structure de votre code HTML est correcte ?
Il est possible d’analyser le code HTML à l’aide de plugins/extensions installé sur son navigateur. Il existe aussi des outils en ligne tel que le validateur w3c (https://validator.w3.org/)
Le lead tech de l’équipe vous demande d’intégrer la maquette, qu’est-ce que cela signifie ?
“Faire de l’intégration Web” consiste à produire une page Web à partir des documents de conception (wireframe, maquette, …). Dans le détail, vous analysez la maquette, vous identifiez les éléments récurents (navbar, bloc d’authentification, …), et vous développez la page Web en prenant en compte par exemple la responsivité le cas échéant (utilissation alors d’une approche mobile first), etc…
Dans le contexte du développement d’un site Web, qu’est-ce qu’un breakpoint ? À la louche, le breakpoint pour le format desktop pourrait être à combien ?
Un breakpoint fait référence à un point spécifique de la largeur de l’écran où le design du site Web change pour s’adapter à différentes tailles d’écran et résolutions. Les breakpoints sont définis lors de la phase de conception et sont traduits ensuite dans le code CSS à travers des media queries. Pour un format desktop (ordinateur de bureau), un breakpoint pourrait être par exemple de 1280 pixel.
Y-a-t’il un lien entre l’accessibilité et le SEO ?
Oui ! L’accessibilité mise en place dans la structure d’un site Web fait partie des critères de notation des robot d’indexation (tels que les robots des moteurs de recherche google, duckduckgo, …). Les robots peuvent par exemple détecter dans le code HTML du site si les attributs ‘alt’ des balises ‘img’ sont bien remplis
Qu’est-ce que l’acronyme d’HTML ?
HyperText Markup Language
Qu’est-ce que l’acronyme de CSS ?
Cascading Style Sheets
Sur un navigateur web, qu’est-ce que le local storage ?
Le localstorage est un espace mémoire persistant ( = qui n’est pas remis à zéro si on ferme et ré-ouvre le navigateur web) mis à disposition par le navigateur Web. Le localstorage est utile par exemple pour stocker les préférences locales d’un utilisateur sur le site (version fr ? dark mode ? …)
Est-ce que les informations stockées dans le local storage du navigateur sont automatiquement envoyées vers le serveur qui héberge le site ?
Non, et il s’agit ici d’une des principales differences avec les cookies
