C'est quoi le Webaujourd'hui – Vocabulaire et contexte – Un peu d'histoire d'abord

View Github Repository Open presentation in a new window

Floste

See all presentation from Floste

C'est quoi le Webaujourd'hui – Vocabulaire et contexte – Un peu d'histoire d'abord

0 0

slides-le-web-aujourdhui

On Github Floste / slides-le-web-aujourdhui

C'est quoi le Webaujourd'hui

Vocabulaire et contexte

Created by Floste / @floste56

Pour voir comment lancer les notes

Un peu d'histoire d'abord

Le web a une vingtaine d'année...seulement

Time Line Evolution du Web

L'ère des pionniers et première guerre

1989 - 1998

  • 1989 : URL, HTTP, HTML (Cern - Tim Berners Lee)
  • 1993 : Le CERN renonce aux droits d'auteur sur le WWW
  • 1993 - 1997 : Mosaic (NCSA - Université de l'Illinois)
  • 1995 : Netscape 2 (Javascript)
  • 1997 : Flash
  • 1998 : Internet Explorer 5 (AJAX)
  • 1998 : AOL rachète Netscape
1969 : premiere interconnexion de réseau. 1989 : WWW par Tim Berners Lee

L'égémonie de Microsoft

1998 - 2003

  • 1998 : Fondation de Mozilla (Netscape)
  • 1998 : Google
  • 1999 : HTML 4 - CSS2 - AJAX
  • 2002 : Internet Explorer V.6
  • 2003 : près de 90% de parts de marché à IE
  • 2003 : Safari
Netscape produit payant et propriétaire (AOL). Ils décident de mettre en open source la version 5 en créant la fondation Mozilla. Ceux sont les prémices de Mozilla (navigateur, mail et composer). L'ère des sites optimisés pour tel ou tel navigateurs et résolution. Guerre dont les armes sont les avocats et les monopoles commerciaux

Un nouvel espoir ;)

2003 - 2008

  • 2001 - 2006 : Aucune mise à jour majeur d'IE6
  • 2003 : Mozilla
  • 2004 : Firefox - Innovation par les standarts
  • 2004 : Facebook
  • 2005 : Opera mini
  • 2007 : 1er Iphone ("un gadget pour geek fortunés")
  • 2007 : Abandon XHTML 2 au W3C au profit de HTML5

Révolutions et nouvelle guerre

2008 - 2013

  • 2008 - premier Draft HTML5
  • 2008 - WCAG 2.0
  • 2008 - Chrome V.1
  • Nov. 2011 - Abandon de Flash sur mobile
  • 2011 - WebGL
  • 2012 - Windows 8
  • 2013 - Firefox OS

C'est aussi sans complexe que les gros éditeurs ne font plus d'efforts pour les anciennes versions de navigateur(06/11/2013 : fin du suport IE9 pour Google, theie8countdown.com)

Aout 2010 : Hotmail incite ses utilisateurs a utiliser Chrome s'ils rencontrent des soucis Implication plus forte de Microsoft au W3C Implication plus forte de Adobe au W3C Octobre 2013 : Ovation à l'équipe de Dev de Microsoft France pour Babylon.js (webGL) Débauche de nouvelles specifications et course à l'implémentation dans les navigateurs. 2011 : Google annonce qu'il ne supportera que les deux dernières versions d'IE

Comment ca marche le web

“The World Wide Web is a system of interlinked hypertext documents accessed via the Internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia and navigate between them via hyperlinks.” Internet ≠ Web Le web est basé sur des documents hypertext interconnectés entre eux et accessible via Internet. Avec un navigateur, il est possible de consulter ces pages qui peuvent contenir du texte, des images, des vidéos, et plein d'autres média. On navigue ensuite entre ces documents via les liens.

Fonctionnement Classique

Schéma historique

Fonctionnement AJAX

Courant sur presque tous les sites actuels

Fonctionnement deconnecté

(Services offline)

Fonctionnement Application

Technologie Serveur - Backend

L'objectif de ces technologies est de retourner des données en fonction de ce qui est demandé au serveur (requête HTTP).

  • Serveur web : Apache 52%, Nginx 14%, IIS 11%, NodeJS
  • Langage backend : PHP, Python, .NET, Ruby, Javascript, (ASP)
  • Serveur BDD : Mysql, Postgress, MariaDB, Oracle, SQL Server
  • Framework : symfony, Zend, Express
chiffres Netcraft Avril 2014 http://news.netcraft.com/archives/2014/04/02/april-2014-web-server-survey.html NodeJS 2009. En 2013 : utilisé par Paypal et Wellmart.

Format de données

Les données sont transmises au navigateur suivant différents format.

  • Classique : HTML
  • API / services : JSon, XML, RSS
  • Media : images, vidéo, audio

Technologie navigateur - FrontEnd

C'est ici que l'expérience utilisateur se vie et les données affichées.

  • Informations : HTML
  • Mise en forme / animation : CSS
  • Comportement : Javascript

HTML5

  • Style css3 arrondies, ombres, webfonts, ...
  • Multimedia Audio et video
  • Semantics nouvelles balises, RDFa, microFormat
  • Performance et integration WebWorker et XMLHttpRequest 2
  • Efftets 3D SVG, Canvas, WebGL, and CSS3 3D features
  • Connectivité Web Sockets and Server-Sent Events (node.js)
  • Accès au terminal Geolocation API, audio/video input, contacts and events, tilt orientation
  • Stockage Offline HTML5 App Cache, Local Storage, Indexed DB, and the File API

Ca sert à quoi

  • Ventes en ligne
  • Vitrine
  • Marketing - Collecte
  • Information
  • Culture
  • Formation
  • Social
  • Jeux

Comment on y accède

  • Ordinateur
  • Tablette
  • Smartphone
  • TV
  • E-reader
  • Console portable
  • ...et...
  • Lunette
  • Montre
  • Vocal
  • ...y'a t'il un devin dans la salle

Qui fait le web

Organisations ouvertes

Fondations, entreprises, particuliers

  • Spec et normalisation : W3C (~385 membres),
  • Editeurs de navigateur : Mozilla, Google, Microsoft, Opera, Apple
  • Communautés Open Source : Yahoo, Jquery
  • Editeurs de CMS
  • Editeurs de sites et animateurs

Les métiers

  • Documentaliste, Editeur
  • Web Design
    • Ergonome
    • Graphisme
    • Accessibilité
  • Contenu / animation
    • Redacteurs
    • SEO / Referencement
    • Community manager
    • Marqueting
  • Gestion de projet
  • Réalisation
    • Architecte
    • Developpeur back
    • Developpeur front
  • Hébergement
    • Performance Web
    • Administration BDD
    • Administration Systemes
    • Administration réseaux
    • Expert sécurité

Et demain ?

Les technos web prennent de plus en plus d'importance dans tous les domaines de l'informatique.

  • Technos : Windows 8, Firefox OS
  • Informations contextuels : Big Data, Semantique
  • Jeux
  • Santé : quantified self
  • 28 Octobre 2014 : Specif HTML5 V1.0

THE END

Floste - Stéphane Florentin