Documente Academic
Documente Profesional
Documente Cultură
10/03/2015
3-Le CSS 3
Vue densemble
Les principales proprits de CSS 3
Les prfixes de navigateur
Les transitions
Les bordures
Les arrire-plans multiples
4-jQuery Ecrire moins et faire Plus
Premiers pas avec jQuery
Les Slecteurs
Le vnements
Les Effets
Ajax / json
La bibliothque jQuery UI
10/03/2015
10/03/2015
Architecture MVC
Architecture de Symfony2
Les bundles
Routing dans Symfony2
Contrleur
Templating avec Twig
Les formulaires dans Symfony2
Scurit et gestion des utilisateurs
Linternationalisation et la localisation
Dploiement des applications
10/03/2015
10/03/2015
10/03/2015
Fonctionnement du web
Le Protocole HTTP
Le protocole de transfert hypertexte http (HyperText Transfer Protocol), de la
couche application du modle 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 : requte d'une ressource,
envoi de donnes 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
Fonctionnement du web
Communication entre navigateur et serveur
Requte du navigateur(Client)
Soit l'URL demande par un utilisateur :
http://www.serveur.ma/. Voyons quoi ressemble
la requte 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
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
10/03/2015
Fonctionnement du web
Communication entre navigateur et serveur
Rponse du serveur
La rponse 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
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
10/03/2015
10/03/2015
10/03/2015
10/03/2015
10/03/2015
Les attributs de gestion dvnements: Ces attributs permettent de grer les vnements
dont un lment peut tre le sige et qui sont crs par lutilisateur. Leur contenu est un script
cot client
10/03/2015
10/03/2015
Nous retrouvons bien dans cet exemple la structure arborescente dun document
HTML valide.
Llment racine, au sens XML du terme, est <html>, et il inclut les lments <head>
et <body>. Llment <head> contient llment <title>, qui est obligatoire, et
llment <body>, qui ne doit pas tre vide (ce qui est vident). Du point de vue
hirarchique, <html> est bien le parent ou lanctre de tous les autres.
10/03/2015
Les commentaires
Comme tout code informatique dailleurs, pour en permettre une meilleure
comprhension, en particulier quand on souhaite le relire un certain temps aprs lavoir
crit. Exemple : <!--votre commentaire-->
Formation en Dveloppement WEB
10/03/2015
10/03/2015
10/03/2015
10/03/2015
10/03/2015
Syntaxe :
<OL TYPE="i" START="8">
<LI>item n1</LI>
<LI>item n2</LI>
<LI>item n3</LI>
</OL>
10/03/2015
10/03/2015
10/03/2015
La balise de base
La balise <A> qui a pour attributs HREF : l'adresse de destination et TARGET : le cadre de
destination (facultatif). Les lments situs l'intrieur (texte, images) renverront vers une
page sous l'action d'un clic. De plus, lorsque la souris survole un lien, son apparence change
d'une flche a une main.
Syntaxe : <A HREF="adresse_destination">Texte_ou_image__cliquer</A>
Les liens internes
Lorsqu'on dsire crer une page volumineuse, il est prfrable d'insrer un menu avec des
liens hyper-texte internes la page (comme pour cette page). Pour cela on utilise la mme
balise mais cette fois l'adresse de destination est un mots cl prcd du signe musical
dise #. Et il faudra, au sein de la page insrer une balise marqueur dont l'identifiant sera ce
mot cl pour qu'un clic de souris sur le lien se dirige vers ce marqueur.
10/03/2015
plusieurs colonnes, d'aligner des paragraphes avec des images... En HTML, la balise
<TABLE> permet de faire de la vritable mise en page. Mais avec l'apparition des blocs
DIV et des feuilles de styles, on peut dsormais s'en passer.
<TABLE>
<TR>
<TD>une seule cellule</TD>
</TR>
</TABLE>
10/03/2015
Un site qui retient l'attention c'est un site sur lequel il est trs ais de naviguer et de
prendre des repres. Il faut donc que l'internaute soit capable de se dplacer rapidement
de page en page et de revenir plus tard trs facilement au mme endroit. Pour cela, il est
ncessaire d'offrir des menus efficace qui puissent permettre vos visiteurs de se balader
sur vos pages. La technique la plus utilise pour cela, et la plus simple : c'est les cadres.
Qu'est-ce qu'un cadre ?
Un cadre est une zone de la fentre associe un fichier HTML. On utilise au minimum
deux cadres dans une fentre, l'un associ au menu et l'autre aux documents.
<FRAMESET COLS="30%,70%">
<FRAME NAME="sommaire" SRC="sommaire.php3">
<FRAME NAME="article" SRC="article1.php3">
</FRAMESET>
Formation en Dveloppement WEB
10/03/2015
Ralisation dun CV sous forme dune page WEB, avec un Index des lments constituant le
CV.
Elments constituant le CV:
Menu (index)
Informations personnelles avec photo
Formation
Expriences professionnelles
10/03/2015
10/03/2015
sparation du contenu et de la prsentation sur laquelle nous avons plusieurs fois insist
en dcrivant les diffrents lments HTML. Dune part, cette sparation permet dallger
les pages en centralisant les dfinitions des styles en un point unique, une seule dfinition
pouvant sappliquer un grand nombre dlments. Dautre part, elle facilite galement la
maintenance et lvolution des sites par voie de consquence.
10/03/2015
la page. L'utilisation de cette balise permet trs facilement d'utiliser une feuille de style
pour plusieurs documents HTML.
10/03/2015
10/03/2015
10/03/2015
effet dappliquer un style aussi facilement tous les lments, en une seule ligne de code.
De plus, la combinaison de plusieurs slecteurs dans la mme dclaration ouvre la voie
une quasi-infinit de combinaisons, propres rpondre tous les besoins, mme les plus
complexes.
10/03/2015
10/03/2015
10/03/2015
dfinition dune ou plusieurs proprits. Par exemple, pour que la couleur du fond de tous
les lments soit le jaune, nous crirons :
*{background-color : yellow;}
10/03/2015
dappliquer un style dfini dans une classe un lment dont lattribut class se voit
attribuer le nom de cette classe. Pour crer une classe, le slecteur est constitu du nom
choisi pour la classe prcd dun point (.)
.NomClass {color : red;}
<p class="NomClass">Texte contenu du paragraphe</p>
10/03/2015
donne. Nous pouvons crire un style qui ne sera applicable qu llment dont lid a une
valeur prcise en donnant cette valeur au slecteur (comme pour une classe) et en le faisant
prcder du caractre dise (#).
#bleu {color: white; background-color: blue;}
<p id=" bleu">Texte contenu du paragraphe</p>
10/03/2015
attribut donn, quelle que soit la valeur de cet attribut. Pour appliquer ce slecteur, le nom
de llment doit tre suivi du nom de lattribut plac entre crochets ([) et (]). En dfinissant
le style suivant :
h2[title][id]{background-color: yellow;}
<h2 id=" bleu title= titre en bleu">Texte contenu du titre</h2>
<h2 id=" T2>Texte contenu du titre</h2>
10/03/2015
prcis. Pour affiner ce systme, nous pouvons galement appliquer un style un lment
condition que tel attribut ait une valeur prcise en utilisant la syntaxe suivante :
element [attribut="valeur"] {Dfinition du style;}
h2[title= titre en bleu"]{background-color: yellow;}
10/03/2015
souhaiter ne lappliquer quen fonction de sa position relative par rapport un autre dans la
hirarchie des lments de la page. Ce type de slecteur est dit contextuel.
element_parent element_enfant {Dfinition des styles;}
10/03/2015
condition quil soit un enfant direct dun autre lment. Pour oprer ce type de slection, il
faut utiliser la syntaxe :
element_parent > element_enfant {Dfinitions des styles;}
10/03/2015
abstraite dun document non identifiable dans cette hirarchie, par exemple le premier
caractre ou la premire ligne dun paragraphe.
Dautres pseudo-classes permettent dattribuer un style un document en fonction des
actions prvisibles mais non dtermines de lutilisateur final, par exemple le fait de placer
son curseur sur un lien ou un composant de formulaire.
10/03/2015
10/03/2015
Les couleurs
10/03/2015
10/03/2015
10/03/2015
systme additif. Chaque composante prend une valeur qui va de 0 FF, et lensemble
doit tre prcd du caractre dise (#), par exemple #F4C5A8. Il est possible de ne
prciser que trois nombres hexadcimaux de 0 F, par exemple #FC5, les navigateurs
convertissant ces valeurs par rplications (la couleur note #FC5 est interprte comme
#FFCC55).
10/03/2015
10/03/2015
10/03/2015