Skip to content

Instantly share code, notes, and snippets.

@danielschmid
Last active May 22, 2022 19:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danielschmid/56bbb7099d666632a79331ff84c835a6 to your computer and use it in GitHub Desktop.
Save danielschmid/56bbb7099d666632a79331ff84c835a6 to your computer and use it in GitHub Desktop.

Concept Web

  • World Wide Web
    • Système hypertexte public sur Internet. Permet de consulter, avec un navigateur, des pages accessibles sur des sites.
    • Inventé en 1989-1990 par Tim Berners-Lee au CERN
  • client-server
    • client–serveur désigne un mode de transaction (souvent à travers un réseau) entre plusieurs programmes ou processus : l'un, qualifié de client, envoie des requêtes ; l'autre, qualifié de serveur, attend les requêtes des clients et y répond
  • URL (Unified ressource locator)
  • Domain name

Technologies Web

  • HTML (Hypertext Markup Language)
    • Constitue la structure de base de tout site web
    • Il s’agit d'un langage de balisage et non de programmation
    • Lorsqu'il est correctement construit, le HTML reflète la fonction et la structure cohérente des contenus (sémantique).
  • CSS (Cascading Style Sheets)
    • Langage pour les feuilles de style. La version actuelle (CSS3) permet d’atteindre une certaine interactivité par ex. grâce au support des variables et des media queries.
    • CSS peux être définie directement dans l’en-tête d’un document HTML, dans un élément HTML spécifique ou sous forme de fichier externe.
    • Il y existe d’autres Langages pour les feuilles de style construit sur CSS comme Stylus, SCSS, SASS, PostCSS.
  • JS (JavaScript)
    • Langage de script le plus populaire du web
    • JavaScript est un langage interprété qui est interprété ligne par ligne au moment de l’exécution (par exemple par le navigateur)
  • Linux (Operating System)
    • Systèmes d'exploitation open source
  • HTTP (Hypertext Transfer Protocol)
    • L’Hypertext Transfer Protocol, généralement abrégé HTTP, littéralement « protocole de transfert hypertexte », est un protocole de communication client-serveur (https = sécurisé)
  • Apache (Webserver)
    • serveur HTTP le plus populaire du World Wide Web (autres ex. NodeJS, nginx)
  • FTP (File Transfer Protocol)
    • FTP, est un protocole de communication destiné au partage de fichiers sur un réseau TCP/IP
  • MySQL
    • Est un système de gestion de bases de données
  • PHP
    • PHP (Hypertext Preprocessor) est un langage de programmation libre, principalement utilisé pour produire des pages Web dynamiques via un serveur HTTP
  • LAMP Stack
    • Acronyme pour une série de technologies web : Linux, Apache, MySQL, PHP
    • Il existe d’autres Technology Stacks comme MEAN (MongoDB, Express.js, Angular.js, Node.js) ou JAMStack (Javascript, APIs, Markup)
  • CMS (Content Management System)
    • Système de gestion de contenu pour la création des sites web : WordPress, Drupal
  • Markdown
    • Markdown est un langage de balisage léger
    • Il a été créé dans le but d'offrir une syntaxe facile à lire et à écrire
  • SEO (search engine optimization)
    • L'optimisation pour les moteurs de recherche, inclut l'ensemble des techniques qui visent à améliorer le positionnement d'un site dans les résultats d'un moteur de recherche.

Design process Web

  • Sitemap (Information Architecture)
  • Wireframes permettent de visualiser le layout et l’interaction sous forme d’esquisses simplifiés
  • Screen design (Mockups, Low- and High-Fidelity Prototypes) Design du site et de ses éléments
  • Interactive Prototypes permettant de visualiser les possibilités d’interaction de l’utilisateur
  • Developer handoff : documentation qui facilite le développement des divers éléments du site
  • Development : processus de programmation du site
  • Deployment : processus d’installation du site sur une serveur web

Tools

  • Illustrator
  • Adobe UX
  • Figma
  • Framer

Spécificités Screen-Design

  • Formats spécifiques au Device (iPhone, Laptop, Panneau de signalétique)
  • Layout dynamiques et interactive. Dois s’adapter à différents formats et contextes (Responsive Design)
  • Typographie dépend des facteurs spécifiques à l’utilisateur et à l’appareil, elle est donc hautement dynamique.
  • Rendu des couleurs peut être contrôlée lors de l’impression (Sécurité des couleurs), mais seulement de manière limitée sur un écran.
  • Matérialité (haptique) est une qualité des produits imprimés qui ne peut pas être reproduite sur un écran.

Couts associés à la création d’un site

  • Hosting : hébergement du serveur web, du site et des éventuelles bases de données, CMS, CDN etc.
  • Domain name (nom de domaine)
  • Couts de licences par exemple pour Webfonts, CMS
  • Development, création des contenus et médias etc.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment