Les langages du web
Mise en perspective :
-
CSS : gestion du ‘look and feel’
Rendez-vous sur un site. Depuis la console de votre navigateur, supprimez les appels de fichiers CSS. Observez l’aspect visuel du site une fois cette opération effectuée.
Vous pourrez si vous le souhaitez refaire cet exercice à tête reposée, en suivant à votre rythme cette vidéo. - Javascript : gestion des interactions (par opposition à un site ‘statique’, permet d’en adapter le contenu à ce que l’internaute entreprend).
Rendez-vous sur cegos.fr. Depuis la console de votre navigateur, accédez au module ‘console’, puis copiez-collez le code suivant. Observez les changements à l’oeuvre.
Vous pourrez si vous le souhaitez refaire cet exercice à tête reposée, en suivant à votre rythme cette vidéo.
alert('en cliquant sur ce bouton vous allez modifier la page');
$('main').remove();
alert('souhaitez-vous mettre une image zen?');
$('<div></div>').insertAfter('div.pop-up-background__container.none');
$('div.pop-up-background__container.none').next('div').addClass('demo');
$('.demo').prepend(('<img id="theDemoImg" src="https://images.pexels.com/photos/747964/pexels-photo-747964.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />'));NB :
- Comme toutes les langues vivantes les languages informatiques évoluent continuellement au fur et à mesure que de nouvelles fonctionnalités sont possibles. Ces évolutions ne sont pas toutes prises en compte au même moment par les navigateurs. Voir ici un exemple pour une syntaxe javascript, et un autre pour un tag html. C’est pourquoi lors du développement d’un site, vous pouvez avoir un rendu différent selon les navigateurs. Il est donc important de connaître les principaux navigateurs utilisés par votre audience.
- Enfin, chaque language peut comprendre plusieurs subdivisions. Javascript par exemple est un language qui comprend plusieurs ‘librairies’, au même titre que le français comporte plusieurs registres de language : soutenu, parlé, argot, etc… jQuery – dans lequel le script (bout de code) ci-dessus est composé – est une librairie de javascript.
Règles et contraintes techniques
Mise en perspective :
Auditez un site avec les outils de W3C :
- pour le marquage html : https://validator.w3.org/ et
- pour le CSS : http://www.css-validator.org/validator.html.fr
La construction d’une page web
Mise en perspective :
Depuis la console de votre navigateur, allez dans le module ‘éléments’ et regardez quels sont les composantes du site cegos.fr. Que ce passe-t-il lorsque l’on supprime l’élément <head> ? L’élément <body> ? Que peut-on en déduire ?
Vous pourrez si vous le souhaitez refaire cet exercice à tête reposée, en suivant à votre rythme cette vidéo .
Notez l’importance très grande des balises html dans la stratégie de référencement naturel (SEO).
La stratégie mobile
Pour aller plus loin :
Les Progressive Web Apps permettent de :
- Ne développer qu’une seule version (vs une pour android et une pour Ios)
- S’affranchir des stores
- Bénéficier du référencement web
Je vous recommande la lecture de cet article : https://www.educative.io/blog/build-modern-apps-progressive-web-apps
Les systèmes de gestion de contenu
Mise en perspective :
- Détection du CMS utilisé par un site.
Avec quel CMS le site https://www.media-institute.com/ est-il construit à votre avis ? Pour le savoir, visitez le site, et une fois le site ouvert, allez dans la console de votre navigateur. Observez le module ‘source’. Si vous voyez ‘wp-content’, c’est que le cms est wordpress. Faites l’exercice avec d’autres sites.
Pour vous simplifier la tâche à l’avenir, vous pouvez utiliser ce site : https://whatcms.org/Content-Management-Systems. Le principe de fonctionnement est le même (on détecte dans les différents éléments du code un ‘indice’ qui nous permet de connaître le CMS utilisé), mais vous laissez faire la machine au lieu d’effectuer vous-même cet examen :).
Retour à la page ‘Informations pratiques’ pour cette formation
_____
