Please enable JavaScript.

Coggle requires JavaScript to display documents.

intégration web - Coggle Diagram

- - - - responsive design grâce à css3
        
        En programmation informatique, l'optimisation de code est la pratique consistant à améliorer l'efficacité du code informatique d'un programme ou d'une bibliothèque logicielle. Ces améliorations permettent généralement au programme résultant de s'exécuter plus rapidement, de prendre moins de place en mémoire, de limiter sa consommation de ressources (par exemple les fichiers), ou de consommer moins d'énergie électrique.
        
        les Viewport(zone d'affichage):
        les écran à écran (ex: mobile) interprètent les pages dans une fenêtre virtuelle appelée viewport
        les pages sont plus large quel 'écran
        
        width:spécifiée la largeur de la fenêtre en pixel
        forme:< meta name="viewport" content="width=device-width">
        
        les modele de boite : toute element html peut etre representer par un epilement des différent boite rectangulaires
        
        les vue en grille réactive
        plusieurs page web divisent la page en colonne:=>basse sur le grille
        les vue en grille réactive comporte souvent 12 colonne et une largeur totale 100%
        pour crée une vue en grille réactive il faut utilise la propriété box-sizing défine sur border-box
        exp
        *{ box-sizing:border-box;}
        calculer le poucentage de la colonnes :100%/120=8.33%
        création d'une classe pour chaque 12 colonne
        class="col-"
        
        elle définie la façon dont la hauteur et la largeur totale d'un élément calculer
        width+padding+border=width des l'élément
        height+padding+border=height des l'élément
        les box_sizing : utilise pour ajuster ce comportement:
        content-box: c'est la valeur par défaut décrit ci avant
        border-box: prendre en compte la bordure et les remplissage dans la valeur définie pour largeur et l'hauteur
        
        initial-scale:spécifiée l'échelle de la fenetre<meta name="viewport" content="initiale-scale="1.0">
        max-scale|min-scale: spéciéfiier l'échele maximale| minimale de la fenetre<meta name="viewport" content="max-scale="5.0"> **user-scable:**spécifiée si l'internaute modifier l'echle de la fenetre (zoomer) <meta name="viewport" content="user-scable=non>
        
        height:spécifiée la hauteur de la fenetre en pixel:
        forme:<meta name="viewport" content="height=device-height">
        
        point d'arrêt des périphérique typiques
        
        Grand écran:>=1200px
        écran moyenne:>=992px and <1200px **écran réduit:**>=768 px and <996px
        écran minimum:<768px
        
        la forme générale au niveau css:
        media not|only media-type and(mediafeature and|or|not mediafeature)
        {/* css-code;/}
        
        la forme générale au niveau html:
        utilisé la balise <Link> dans le code html avec l'ajout de media.<Link rel="stylesheet" media="-type and|or|not(media-feature-rul)"href="nomfille.css">
        media-feature: (max--width,min-width)(orientation:portrait landscape)
        media-type:(all,print,screen,speech)
        
        les media queries(ou requête media) une expression dont la valeur est toujours vrai ou fausse
        c'et une propriété composé plusieurs élément
        
        l'appariation de media queries du css3 à aidé énormément a appliquer le responsive web design
        elle permettent une gestion dynamiques des feuilles de style
  - - - linter:: analyse le code et détecte
        les erreur des code
        les variable non utilise *
        les variable n'existant pas
        les mouvaise organisation du code
        les non respect des bonnes pratiques d'ecriture
        exemple des linter:jslinter es linter
        
        développent un application responsive => remédier aux disparité matérielle
        nécessite d'optimiser les code utilise :
        linter: vérifier les code affin détecter les erreur
        minifier: réduisant les code utilisé au minimum possible
        bundler: réduisant les nombre de fichier
        résoudre les problème des disparités logicielle
        transpiler
        polyfills
        
        manifier
        les code javascript est chargé par le navigateur
        le navigateur demande au serveur le codejavascript a fin de l'executer
        
        bundler:reduire les code ou rendre plus léger consiste aussi à reduire au maximum le nombre des fichier qui contient code
        créer un bundle ,un fichier unique qui contient la totalité du code el lui protecter