Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

10/03/2015 Formation en Développement WEB Présenté par:M. ABBES RHARRABa.rharra

10/03/2015 Formation en Développement WEB Présenté par:M. ABBES RHARRABa.rharrab@gmail.com Formation en Développement WEB [Le Web Statique] HTML, CSS, et JavaScript 10/03/2015 Formation en Développement WEB Plan – Le WEB statique 10/03/2015 Formation en Développement WEB 1-Les bases du WEB › L’histoire du Web › Les bases de HTML › Les bases de CSS › Les bases de JavaScript 2-Le HTML 5 › Vue d’ensemble › HTML 5 vs XHTML1.1 › Navigation et Support › Éléments et Attributs › Les formulaires › Audio et Vidéos › Les canevas 3-Le CSS 3 › Vue d’ensemble › Les principales propriétés de CSS 3 › Les préfixes de navigateur › Les transitions › Les bordures › Les arrière-plans multiples 4-jQuery « Ecrire moins et faire Plus » › Premiers pas avec jQuery › Les Sélecteurs › Le Événements › Les Effets › Ajax / json › La bibliothèque jQuery UI 10/03/2015 Formation en Développement WEB Plan – Le WEB dynamique 10/03/2015 Formation en Développement WEB Partie 1 PHP : Les bases de PHP › PHP : Raisons du succès › Langages concurrents de PHP › PHP : Historique › Structure d’un script PHP › Les types de données et variables › Tests conditionnels, Les boucles et les Fonctions › Tableaux scalaires et Tableaux multi-dimentionnel › Etape d’exploitation des formulaires › Récupération des paramètres › Architecture MySQL › PHP et MySQL › PHP MyAdmin › Les fichiers : lecture, écriture, déplacement et suppression › TP : Langage PHP partie 1 Partie 2 PHP : Les aspects avancés › Traitement des sessions › Les expressions régulières › Sécurités des applications web › TP : Langage PHP partie 2 Partie 3 PHP : Les Concepts Orienté Objet › Classe et Objet › La visibilité › L’héritage › Classe abstraite › Interface › La sérialisation des objets › TP : Langage PHP partie 3 10/03/2015 Formation en Développement WEB Plan – Le WEB dynamique avancé 10/03/2015 Formation en Développement WEB Framework Symfony2 › Architecture MVC › Architecture de Symfony2 › Les bundles › Routing dans Symfony2 › Contrôleur › Templating avec Twig › Les formulaires dans Symfony2 › Sécurité et gestion des utilisateurs › L’internationalisation et la localisation › Déploiement des applications 10/03/2015 Formation en Développement WEB L’évolution du Web et de HTML L’ère du Web 1.0(90s) s'est construite autour d'une forme pyramidale. Les webmasters rédigent et envoient des informations vers les internautes sans que ces derniers puissent réellement interagir avec le site web. L’ère du Web 2.0(2000s) les usagers entrent dans un mode actif : au fur et à mesure de leur navigation, les utilisateurs ajoutent du contenu, et contribuent a la richesse des sites web. Le web de l’avenir ou Le web 3.0 est un concept en pleine évolution qui a fait son apparition dans les années 2008. 10/03/2015 Formation en Développement WEB L’évolution du Web et de HTML Le langage HTML1.0 a été développé initialement par Tim Berners-Lee(1989), Il a rapidement connu un vif succès grâce au navigateur Mosaic. La spécification HTML 2.0 (RFC 1866 de novembre 1995) a vu le jour sous le contrôle de l’IETF (Internet Engineering Task Force) Le groupe de travail HTML du W3C (World Wide Web Consortium) diffuse en janvier 1997 la spécification HTML 3.2, qui apporte plusieurs améliorations et modifications HTML 4, un progrès immense. Ses principales innovations concernent l’internationalisation, l’accessibilité, les tableaux, les documents composés, les feuilles de style, et les scripts. HTML5 est la dernière révision majeure d'HTML disponible depuis 2011, Le W3C vise une finalisation de la spécification en 2014 10/03/2015 Formation en Développement WEB Fonctionnement du web Le Protocole HTTP Le protocole de transfert hypertexte http (HyperText Transfer Protocol), de la couche application du modèle OSI (Open Systems Interconnection), est le langage commun entre logiciels clients (navigateurs) et serveurs Web. Il est utilisé pour la plupart des transactions du Web : requête d'une ressource, envoi de données d'un formulaire, navigation... Communication entre navigateur et serveur La communication entre le navigateur et le serveur se fait en deux temps : 10/03/2015 Formation en Développement WEB Fonctionnement du web Communication entre navigateur et serveur Requête du navigateur(Client) Soit l'URL demandée par un utilisateur : http://www.serveur.ma/. Voyons à quoi ressemble la requête du navigateur au serveur GET / HTTP/1.1 Accept: image/gif, image/jpeg, */* Accept-Language: en-US Accept-encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 5.01; Windows NT) Host: www.serveur.me Connection: Keep-Alive 10/03/2015 Formation en Développement WEB Fonctionnement du web Communication entre Client et Serveur GET / HTTP/1.1 Accept: image/gif, image/jpeg, */* Accept-Language: en-US Accept-encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 5.01; Windows NT) Host: www.serveur.me Connection: Keep-Alive Ligne par ligne, cette requête veut dire : 1. Il s'agit d'une requête GET, associée à la version 1.1 du protocole HTTP . Cette requête permet de récupérer une ressource. Il en existe d'autres : HEAD (informations sur la ressources uniquement), POST (on fournit des informations au serveur),... Le slash qui suit GET indique l'URL absolue de la ressource. 2. Le client peut récupérer en particulier des images gif et jpeg, mais en fait n'importe quel autre type MIME (des en-têtes décrivant le contenu du message en utilisant un codage */* exemple: text/plain, multipart/mixed). 3. Le langue de préférence. 4. Le client sait interpréter une réponse qui serait compressée avec GZIP . 5. Le navigateur est MSIE 5.01 ! 6. Rappelle l'adresse littérale du serveur. 7. La connexion restera ouverte après cette requête, jusqu'à ce que le client demande de la clôturer. 10/03/2015 Formation en Développement WEB Fonctionnement du web Communication entre navigateur et serveur Réponse du serveur La réponse du serveur sera par exemple la suivante : HTTP/1.1 200 OK Date: Sun, 14 Apr 2004 09:30:12 GMT Server: Apache-/1.3.6 (Unix) Last-Modified: Sun, 14 Oct 2003 09:29:32 GMT ETag: "57d44-122-3cb64bfc" Accept-Ranges: bytes Content-Length: 278 Connection: Close Content-Type: text/html 10/03/2015 Formation en Développement WEB Fonctionnement du web Communication entre navigateur et serveur HTTP/1.1 200 OK Date: Sun, 14 Apr 2004 09:30:12 GMT Server: Apache-/1.3.6 (Unix) Last-Modified: Sun, 14 Oct 2003 09:29:32 GMT ETag: "57d44-122-3cb64bfc" Accept-Ranges: bytes Content-Length: 278 Connection: Close Content-Type: text/html Ligne par ligne, cette requête veut dire : 1. Le serveur répond lui aussi en HTTP 1.1, avec un message OK, associé au code 200. 404 Not Found; il y en a d'autres : 302 Moved Temporarily, 401 Unauthorized, 500 Server error,... 2. La date actuelle du serveur par rapport à l'heure de Greenwich (GMT). 3. Le logiciel serveur est Apache 1.3.6 sous Unix. 4. La date de dernière modification de document. 5. Un tag d'entité, c'est un numéro unique qui identifie la ressource sur le serveur, et est aussi utilisé pour exploiter des données en cache. 6. Le serveur peut renvoyer des contenus binaires. 7. La taille en octets du document HTML qui suit... 8. La connexion sera fermée après l'envoi des données. 9. un document de type MIME text/html, donc un fichier HTML qui est envoyé. 10. Enfin, le code HTML. 10/03/2015 Formation en Développement WEB Les bases de HTML Les bases de HTML HyperText Markup Language 10/03/2015 Formation en Développement WEB Les bases de HTML - Introduction Le langage HTML (HyperText Markup Language) est un langage de balisage (dit aussi langage de marquage), développé initialement par Tim Berners-Lee il permet de structurer le contenu des pages web dans différents éléments (en-têtes, paragraphes, listes, liens hypertextes, etc..). Il peut être créé et traité par de nombreux outils, depuis des éditeurs de texte simples jusqu’à des outils dédiés sophistiqués WYSIWYG (What You See Is What You Get). En HTML, chaque élément doit être renfermé dans un élément. 10/03/2015 Formation en Développement WEB Les bases de HTML - Les éléments et attributs En HTML, chaque élément à un nom déterminé et la liste des éléments utilisables est limitative et clairement définie dans la DTD (Document Type Definition) liée à la version utilisée du langage. À quelques exceptions près, un élément HTML a la structure suivante : <nom_element> Contenu </nom_element> 10/03/2015 Formation en Développement WEB Les bases de HTML - Les éléments et attributs Les caractéristiques de chaque élément peuvent être précisées par des informations complémentaires que l’on désigne en tant qu’attributs de l’élément. Les attributs d’un élément sont toujours définis dans la balise d’ouverture et doivent être séparés les uns des autres par au moins une espace, Chaque attribut doit avoir une valeur. La présence de certains attributs est obligatoire dans quelques éléments particuliers. La syntaxe conforme d’un élément ayant des attributs est donc la suivante : <nom_element attribut1="valeur1" attribut2="valeur2" > Contenu </nom_element> 10/03/2015 Formation en Développement WEB Les bases de HTML - Les attributs de base Dans leur quasi-totalité, les éléments disponibles en HTML ont en commun un ensemble d’attributs ayant chacun le même rôle. Ces attributs se répartissent en trois catégories. › Les attributs courants (noyau): id, class, title, style Ils s’appliquent à quasiment tous les éléments › Les attributs d’internationalisation: lang, dir Il permet de décrire la langue et le sens de lecture du contenu › Les attributs de gestion d’événements: Ces attributs permettent de gérer les événements dont un élément peut être le siège et qui sont créés uploads/Ingenierie_Lourd/ html4-et-css2-1.pdf