Please enable JavaScript.

Coggle requires JavaScript to display documents.

Integration web, Le decoupage web, Les zones chauds - Coggle Diagram

- - - - Chef de produit.
      - Développeur mobile
      - Chargé de communication digitale
      - Webdesigner.
      - Chargé de SEM.
      - Commercial web
      - Développeur
      - Chargé de SEO.
      - Chef de projet web
  - - - concevoir les differents gabarit de page
      - le decoupe iu donner vie au graphisme sur page web
      - definir les ressources afin d'assemler les images par HTML
      - définir l'architecture de site en structure propre et cohérente
      - développement et compatibilités des page de site internet
      - respecter les normes pour que le site internet soit accessibles pour tous
    - - La phase d'intégration va consister à réaliser une maquette définitive du site ou de l'application web. A partir de la définition des besoins et de l'identité visuelle du client à l'aide de langages html et css
- - - - La cohérence interne concerne la cohérence au sein d'un produit ou d'une famille de produits, soit au sein d'une application , soit dans une suite d'applications et elle peut souvent être
        observée dans les couleurs et les mises en pages utilisées.
      - la création d'un design system peut aider les équipes
        a maintenir la cohérence entre les produits et services.
    - - La cohérence externe fait référence aux conventions établis
        dans une industrie ou sur le web.
  - - - Avantages
        
        Permet de répondre aux attentes des utilisateurs.
        
        Garantie de fiable courbes d'apprentissages.
      - Règles d'ergonomie
        (pour analyser en profondeur l'ergonomie d'un site)
        
        Liens
        
        Navigation
        
        Illustration du contenu du site par des exemples.
        
        Recherche
        
        Rédaction du contenu
        
        Images et animations
        
        Présentation des informations
        
        Conception graphique
        
        Objectif du site
- - - - C'est une manière de concevoir un site web pour que son contenu s'adapte automatiquement à la résolution écran du terminal qui est utilisé pour le visionner.
        
        Site web fluide
        
        est créé dans des mesures variables souvent exprimées en
        pourcentage.
        
        Site web fixe
        
        est créé dans les mesures fixes souvent exprimées en pixels.
        
        Site web adaptatif
        
        est créé dans les mesures fixes mais diffère selon la taille de
        l'écran
  - - - se base sur une méthode de conception qui aborde dans un premier temps l'affichage pour les terminaux mobiles, puis progresse par étapes en disposant les éléments pour des écrans plus grands.
        
        Les contraintes
        
        La largeur de l'écran en pixels physiques
        
        La largeur définie par le système d'exploitation
        
        La surface virtuelle de la fenêtre du navigateur(viewport)
        
        La résolution et la bande passante
    - - il consiste à partie d'une conception pour Desktop, puis de la "dégraderé".
  - - - width + padding + border = width de l'élément actuel
      - height + padding + border = height de l'élément actuel
- - - - Les erreurs de syntaxe
      - les variables n'existent pas
      - le non respect de bonne pratique d'écriture
      - les variables non utilisées
      - la mauvaise organisation de code e
    - - JSLint
      - ESLint
  - - - est un outil qui va permettre à un développeur de minimiser le nombre de fichiers de dépendances
      - réduire le nombre de fichiers de votre projet pour le déploiement
      - très rapide, et peut fonctionner sans aucune configuration
      - Webpack a pour objectif de vous faciliter la vie, notamment en vous aidant à organiser votre application JS en modules. Le projet est déjà très populaire,
- - - - est l'ensemble des symboles et des règles qui définissent l'identité graphique d'un site web.
    - - faciliter la navigation et la lecture grâce à l'utilisation de repères visuels constants.
    - - Identité visuelle
        
        Logotype
        
        Représentation du logo qui sera utilisé sur les surfaces print et web.
        
        Palette de couleurs
        
        Pour avoir une identité visuelle forte, il faut choisir une palette de couleurs associées à la marque de l'Entreprise, assurant ainsi la création d'un univers qui se distingue rapidement visuellement.
        
        Typographie
        
        Elle joue un rôle crucial dans le succès d'une charte graphique.
        Certaines marques sont identifiables uniquement grâce à leur topographie.
        
        Eléments de graphisme
        
        Icônes: tous les éléments graphiques associés à la marque, de type icônes ou emoji, doivent être harmonisés et suivre la même ligne directrice.
        
        Boutons: ce sont des éléments de conception essentiels qui
        contribuent à raconter une histoire sur la marque de l'Entreprise et à guider les visiteurs vers ses produits ou services.
        
        Images
        
        Présentation des différentes images utilisées sur un site web.
        
        Règles sur éléments graphiques
        
        Règles ergonomiques.
      - Pagination/Template
        
        Pagination
        
        Règles liées à l'organisation et la disposition (visuelle et textuelle) des pages web.
        
        Template
        
        Les modèles prêts à être utilisés avec les éléments graphiques cités précédemment.
    - - Comprendre le public cible
      - Être cohérent sur tous les supports
      - S'inspirer des meilleurs
      - Opter pour la simplicité
      - Itérer régulièrement
  - - - Intégrer des images vectorielles sur le web
        (SVG est une langage qui permet de décrire des images vectorielles.)
        
        la balise <svg>
        
        Intégration de l'élément SVG dans un objet <object>
        la balise <object> de html définit un conteneur pour les ressources externes.
        
        la source<img>faire référence a un fichier SVG au sein de l'élément <img>:
        indication obligatoire de l'attribut height et width.
        
        Intégration d'un SVG avec un iframe <iframe>:
        Un contexte de navigation imbriqué.
    - - Intégrer des images adaptatives
        (une image adapte aux appareils selon les différentes tailles d'écran.)
        
        Utilisation de l'attribut srcset de la balise <img>
        
        utilisation de la balise <picture>
        permet d'indiquer plusieurs sources a utiliser en fonction de la situation.
- - - - découper l'interface graphique afin de minimiser le poids graphique d'un page
      - faut donc privilégier la découpe en éléments répétitifs et utiliser le code HTML et CSS pour la continuité.
      - Le travail de découpe, optimisation et conception d'une page HTML peu ainsi durer plusieurs heures.
- - - - Listes
      - Conclusion
      - Sous-titres
      - Introduction
      - Mots en gras
      - Attributs des images
      - Liens internes
      - Titre
      - Méta description
      - Méta titre
      - URL