Html5CssJavascript

Architecture logicielle
Un bon tuyau, le quinté web gagnant:
client: html5=html+css+javaScript
serveur: php sql
html contenu
css présentation
js actions
html5+css responsive web design, mobile first
Les attributs de présentation passent d'html (border, font, align, width etc..) à css
Header adaptation mobile:
meta name="viewport" user-scalable=0; content="width=device-width; user-scalable=no;"
meta name="viewport" content="initial-scale=1.0, user-scalable=no"
html5 <tag attributs>

HTML5 Css3 Javascript sont des technologies libres.
En général, les technologies ouvertes sont plus durables que les technologies propriétaires.

Eléments Html5

La balise <div> contient et imbrique d'autres éléments html voire du texte.
La balise <span> encadre du texte.
Affichage implicite CSS:
"display : block"    //liste
"display : inline"    //même ligne
"display : none"     //caché

Attributs - Evènement en html ou javascript

class="className" id="name" nomme les éléments pour nommage en css (tag, .class, #id) ou javascript
name="input1" est utilisé par get ou post puis php!

Des attributs sont associés aux différents éléments HTML5:

div li fenêtre, formulaires, clavier+tactile, souris, médias,
évènements: ex: onload, onclick, ondblclick, ontap, etc..
html5 contrôle des types sur zones de saisie:
numeric, tel, url, email, ...???
<div> zones d'affichages
????view source sur mobile view-source:http:url..

API html5 javascript

Forms, canvas, video & audio, géolocation, drag&drop, localStorage,
webWorkers,  SSE (serverSentEvent), websocket, webrtc, historique, cacheManifest (obsolète),
canvas ou svg remplacent flash,
svg (scalable vector graphic), xml graphique,
svg en mode vectoriel, ne requiert pas de plugin comme flash,
localstorage concurrence cookie
websocket remplace httpRequest
Media joue les fichiers audio, vidéo (mpeg, mp4 etc..)

JavaScript

javascript faiblement typé, interprété
numérique codé en réel ( sur car)
Script js mis ou déclaré dans head>, fichier séparé,
en fin de fichier, il est chargé après la page,
attention aux tests =, ==, ===
une variable non précédée de var est globlale!
var x; //x local
fermeture de fonction  => conservation des variables locales
évènements html-javascript: onchange, onclick, onmouseover, onmouseout, onkeydown, onload
la localisation par script local marche avec firefox mais  pas avec chrome (sécurité)!Gmap

Une classe d'utilisation de google maps.
L'extension géodésique calcule les distances sphériques (géodésique).

Css

Sélecteurs: tagHtml {..}, .classe  {..},  $id {..}
les propriétés définissent police, couleur, taille de caractères,taille des élments,Ajax

appels http ajax (asynchronous javascript and xml
ajax évite le rechargement de page
modification de page sans rechargement,
modification dynamique du contenu d'une page,
paramètres appel ajax:
(opération, lien, type données, donnéesRetour, success(), error())
5 types de données: text, html , xml, json, jsonp
json encodage de chaîne de caractères (javascript object notation)
sérialisation - désérialisation
json notation "objet" + simple que xml basée sur {"person":{"nom":"vincent", "prenom":"pierre", ..}}
jsonp contourne SOP (same origin policy) ex accès twitter depuis js
mais un lien vers le nouveau site fait l'affaire (exemple facebook)

Développement web

Php

langage de script côté serveur
require_once: un seul chargement de script
Associés à submit get et post html envoient des données au serveur
get encode les données dans l'url (limitation de taille)
post met les données après l'en tête dans un mime
require-once charge une seule fois un script
les globals doivent être redéclarés
des outils comme zend accélèrent l'exécution des scripts

Outils

Editeur komodo, codeBlock, notepad++: gestion de groupes de fichier par session (projets simplifiés)
Atom éditeur de code
Outil de développement intégré au navigateur  (chrome, mozilla, explorer) activation par F12 ou ctrl/maj/k: console, debugger, DOM inspector, etc..
Aide en ligne: w3school, stackoverflow
JsFiddle: validation et test en ligne de html, css, javascript,
jslint: test javascript en ligne,
jsMin: minify compacte code
idée obfusquer, regrouper et mélanger css+html+javascript dans un même fichier
javascriptObfuscator: jasob, kangax.github (html), obfuscator.io (js)
Compressor.com, obfuscation.com: obfuscation
Pour obfusquer les noms de fonctions, il vaut mieux intégrer les scripts (.js) annexes.
L'obfuscation rend le code illisible (YUI compressor, Google closure compiler, uglifyJS)
Moteur (interprète) javascript dans navigateurs (rhino, V8 pour chrome, chakra pour MsEdge et IE >= v11)
Rhino: interprète javascript écrit en java
Portage natif: apache Cordova ou Adobe phoneGap, conversion en exécutable iOs ou Android

Framework - Librairies:

bootstrap 2 framework css responsive design
React est un framework développé par Facebook qui gère des applications web monopages.
Autres framework: jquery, VueJs,  Jquery
Kinetics: librairie 2D, jquery, bootstrap, angularJs
Format json: geoJson, GTFS: General Transit Feed Specification, format d'échange transporteur applis
Electron: exécution js sur PC, différence avec exécution sur navigateur

Déploiement:

PWA progressive web apps:
PWA builder pwabuilder.com/generator

Fichier de configuration: manifest.json
Validation html: https://validator.w3.org/
Validation manifest.json: https://manifest-validator.appspot.com/
Lighthouse analyse page
Gestion cache possible par service worker
Choix d'implémentation, répartition des charges et des communications: exécution-stockage,  client -serveur,
WebApp sur chromeStore ou Android
Lighthouse: test PWA
.apk: appli android, .ios?? appli iphone
Icônes: www.iconsdb.com, ggMaps: https://sites.google.com/site/gmapsdevelopment/

Services web

Services
Réseaux sociaux
Référencement
Commerce électronique
Paiement en ligne

Clients
Terminaux: ordinateurs, tablettes, smartphones
Navigateurs
Interface client: Javascript, Html, CSS

Serveurs
Système,
Php
Base de données
Hébergement, Cloud, virtualisation

Communications
Performance
Ip et Routage
Ethernet, wifi et mobiles
websocket
décrit les échanges clients serveur
découpe le flux en trames encodées
communication full duplex tcp/http
en tête http upgrade: websocket
concurrent d'ajax et de webhooks

outils
fiddler http debugging proxy
autobahn websocket test suite
ratchet php websocket server

GreenIT

Les soucis du programmeur:
passé: mémoire, performances
actuel: performances, énergie
De meilleures performances sont en général synonymes de moindre consommation.
Pour diminuer la consommation:

Node.js

Serveur en javascript, construit sur Gg V8 js engine qui compile JS
BD JSON par exemple MongoDB
ES rapides mais bloquantes
Inadapté pour des calculs intenses

REST (Representational State Transfer)
Cette architecture utilise des url pour l'accès aux ressources. La structure de l'url respecte une hiérarchie logique.

Programme cours js

backToTop