Html5-Devfest Yaoundé 2013
Upcoming SlideShare
Loading in...5
×
 

Html5-Devfest Yaoundé 2013

on

  • 326 views

Html5-Devfest Yaoundé 2013 par Serges Sonfack

Html5-Devfest Yaoundé 2013 par Serges Sonfack

Statistics

Views

Total Views
326
Views on SlideShare
326
Embed Views
0

Actions

Likes
0
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html5-Devfest Yaoundé 2013 Html5-Devfest Yaoundé 2013 Presentation Transcript

  • serge.codd@gmail.com sss_sonfack@yahoo.com Tel: +237 74 84 12 42 SONFACK Serge Administrateur Système Intégrateur Web Responsable de l’Association Laboratoire Open Source Membre de Collectif Emmabuntüs Moderateur Afrique de Emmabuntüs
  • HISTORIQUE APPLICATION WEB DEVELOPPEMENT WEB HTML / HTML5 DEFINITIONS
  • Historique Internet L'Advanced Research Projects Agency (ARPA), une agence du Département de la Défense des USA qui est chargé de la recherche du développement des nouvelle technologies à but militaire. 1958 -1966 ARPA développa le concept de transfert de paquet qui deviendra la base du transfert des données sur Internet. Fin 1969 Les quatre premiers ordinateurs étaient reliés au réseau ARPA. Trois ans plus tard, ils étaient déjà 40 ordinateurs. Il s'agissait cependant à cette époque du propre réseau ARPA. C'est lui qui est devenu plus tard l'Internet
  • Définition Le web(ou toile) est la « toile virtuelle » formée par différent document liés entre eux par des liens. www: world wide web Internet : Interconnexion Network ie réseau mondial de réseaux interconnecté (par les protocoles TCP/IP)
  • Historique du web Le concept du Web a été mis au point au CERN(Centre Européen de recherche nucléaire) en 1991 par une équipe de chercheurs à laquelle appartenaient TIM BERNERS-LEE, le créateur du concept d’hyperlien.
  • Application web <html> <body> Lien, Text, graphique… </body> </html> Une application : est un programme vu sur l’angle de la tâche qu’il est censé faire. Ainsi un application Web est un programme constitué de pages Web. Une page web est un simple fichier texte écrit dans un langage de description(appelé HTML), permettant de décrire la mise ne page du document et d’inclure des élément graphique ou des liens vers d’autres documents à l’aide de balise
  • Application web Une application web est un ensemble de pages web. Page web Page web Page web Page web Page web
  • Application web L’ensemble des pages web d’un application a un structure ; qui peut être hiérarchique ou pas selon que l’on développe suivant un modèle( MVC).
  • Infrastructure web L’application web ou encore le site web, aussi appelé site internet pour être utilisé doit être hébergé sur un serveur (connecté constamment sur internet) PHP / PYTHON
  • Infrastructure web Accès aux pages web par Internet : Architecture réseau
  • Infrastructure web Pour avoir accès aux pages web, le client ou l’internaute doit utiliser un client web: un navigateur. Il existe plusieurs navigateur de nos jours. Et chaque navigateur a sa particularité: Internet explorer , Mozilla firefox, opera, icewisel, safary , chrome …… Un navigateur (browser) : est un logiciel utiliser pour interpréter les pages web. Logiciel d’accès aux pages web
  • Page web Le standard établit pour la diffusion des document sur le web est le HTML(HyperText Markup Language) il permet de définir la représentation de document ainsi que les lien HyperText vers d’autres documents a l aide des balises de formatage. La W3C est l’organisme charger de standardiser les normes relatives a internet. En 2001 -> html 4 Aujourd’hui -> html 5
  • HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional .dtd"> <html> <head> <title>Texte du titre</title> </head> <body> le corps de notre page </body> </html>
  • HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional .dtd"> Derrière la parenthèse pointue d'ouverture suit un point d'exclamation, suivi de la mention DOCTYPE HTML PUBLIC. Cela signifie, que vous vous référez au DTD HTML disponible publiquement. La mention suivante qui est placée entre guillemets est à comprendre ainsi: W3C est l'éditeur du DTD, donc le consortium W3. Une mention telle que DTD HTML 4.01 Transitional signifie que vous utilisez le type de document "HTML" et cela dans la version du langage 4.01 et sa variante "Transitional".
  • HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional .dtd"> Le terme EN est une abréviation pour la langue qui veut dire ici l'anglais (english). La mention se réfère à la langue parlée dans laquelle les noms d'éléments et d'attributs du langage de repères ont été définis et non pas au contenu de votre fichier. Utilisez donc toujours EN, étant donné que les noms d'éléments et d'attributs HTML sont basés sur la langue anglaise.
  • Evolution du HTML  1995 : HTML 2.0  Formalisation de la syntaxe et règle déjà implémentées  1997: HTML3.2 ( non supporté pas tous)  1998 : projets de standardisation pur ajouter du poids au formalisme de la W3C  1999 HTML 4.0 : Standardisation de la syntaxe et de la structure du HTML( le HTML 4.0 devint un standard pour le web  2000 XHTML 1.0 la W3C établit des spécification pour déplacer le HTML vers le XML
  • Evolution du HTML  2000  2004 : L’évolution du web  Les connexions à haut débit  Les application Multimédia  Les technologies ( Ajax, Flash, …) apparaissent  Les travaux sur le XHTML 2.0
  • 2004  HTML5
  • HTML5  Nous sommes tenté de dire que HTML5 est la suite de HTML4 !!! La 5eme version de HTML?
  • HTML5  Les spécifications du HTML5 sont définies par le WHATWG( Web Hypertext Aplication Technology Working Group) en collaboration avec la W3C  2010 Google commence à s’intéresser à l’évolution du HTML5
  • Structure d’une page HTML5 <!DOCTYPE html > <html> <head> <title>Texte du titre</title> </head> <body> le corps de notre page </body> </html>
  • Apports du HTML5 La balise <output> est utilisé pour afficher une sortie de calcul. Par exemple, si vous souhaitez afficher les coordonnées d’une position de la souris, ou la somme d’une série de chiffres, ces données doivent être insérés dans l’élément <output>. Placeholder Avant, nous devions utiliser un peu de JavaScript pour créer des Placeholder pour les zones de texte
  • Apports du HTML5 Les expressions régulières une expression régulière pour vérifier rapidement une zone de texte particulière; attribut pattern, qui nous permet d’insérer une expression régulière directement dans notre balisage La balise <input> pour les eMails Si on applique le type « email » pour formater les entrées, on peut charger le navigateur pour autoriser uniquement les chaînes qui sont conformes à une structure d’adresse e-mail valide
  • Apports du HTML5 La balise <figure> Le HTML5 rectifie ceci avec l’introduction de l’élément <figure>. Lorsqu’il est combiné avec l’élément <figcaption>, nous pouvons maintenant associer sémantiquement les légendes avec les images. L’attributs required d’un formulaires Les formulaires ont un nouvel attribut : required, qui précise le type d’entrée souhaité. En fonction de vos préférences de codage, vous pouvez déclarer cet attribut
  • 10 Astuces HTML5 1. Nouveau Doctype Il est désormais inutile de mémoriser une ligne de code a rallonge. Le HTML5 possède un doctype simplifié. En savoir plus sur le doctype en HTML5. <!DOCTYPE html> 2. L’attribue Type est désormais obsolète pour les balises <link> et <script>. <link rel="stylesheet" href="mon-site.fr/style.css" /> <script src="mon-site.fr/script.js"></script>
  • 10 Astuces HTML5 3. Guillemets ou pas ? Telle est la question. Rappelez-vous, le HTML5 n’est pas le xHTML. Vous n’avez pas à encadrer la valeur de vos attributs entre guillemets si vous ne le souhaitez pas. Vous n’êtes pas obliger de fermer vos éléments. Cela dit, il n’y a rien de mal à le faire, si vous vous sentez plus à l’aise de le faire. (cela est vrai pour moi) <p class=myClass id=someId> Début de mon paragraphe
  • 10 Astuces HTML5 4. La nouvelle sémantique de l’en-tête et du pied de page les calques Div, par nature, n’ont pas de structure sémantique même si un id lui est appliquée. Maintenant, avec le HTML5, nous avons accès aux nouvelle balises. <header> ... </header> <footer> ... </footer> <aside> ... </aside> <nav> ... </nav> <article> <section> ... </section> </artcle>
  • 10 Astuces HTML5 5.Quand bien utiliser une balise <div> Les balises <div> doivent être utilisés uniquement lorsqu’il n’y a pas de meilleurs éléments a utiliser.