Apport de la psychologie dans les sciences informatiques -Devfest Yde 2013
Html5-Devfest Yaoundé 2013
1. 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
3. 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
4. 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)
5. 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.
6. 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
8. 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).
9. 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
11. 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
12. 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
13. 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>
14. 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".
15. 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.
16. 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
17. 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
19. HTML5
Nous sommes tenté de dire que HTML5
est la suite de HTML4 !!!
La 5eme version
de HTML?
20. 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
21. Structure d’une page HTML5
<!DOCTYPE html >
<html>
<head>
<title>Texte du titre</title>
</head>
<body>
le corps de notre page
</body>
</html>
22. 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
23. 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
24. 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
25. 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>
26. 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
27. 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>
28. 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.