OP40

OP40 – Eines de Programació Multimèdia

Llenguatges de Programació Web

OP40

1. La WWW. Evolució2. La Web 2.0 Pàgines Dinàmiques

2.1 Script al servidor1. PHP2. Bases de Dades3. AJAX

2.2 Script al clientPreguntes

OP40

1 La WWW. EvolucióWeb 1.0: • Pàgines estàtiques. Llenguatges de

marques (HTML, XTML, HTML5) i CSS• Contingut passiu• Rols definits: Editors, Usuaris

Web 2.0: • Pàgines dinàmiques• Interacció• Col·laboració: Wordpress, ..• Comunitat virtual (Blogs, Fòrums, ..)

Segons Tim Berners-Lee, Internet hauria de ser un mitjà col·laboratiu, on tots poguéssim trobar-nos per escriure i llegir al mateix temps

OP40

2 La Web 2.0: Pàgines dinàmiques

Incorporen codi (script), que permet interactuar amb

l’Usuari i amb el servidor

De la banda del Servidor:

Scripts en : PHP, ASP.NET, JSP, etc.

Suport per a Bases de Dades (mySQL, sqlServer,

mongoDB, ...)

De la banda del Client:

Scripts en: Javascript

Llibreries: JQuery, Prototype, Dojo Toolkit, etc.

OP40

2.1 Script al servidor (server-side script)

Els scripts al servidor s’escriuen normalment amb

un d’aquests llenguatges:

• PHP : Personal Home page: (PHP Hypertext

Preprocessor) Desenvolupat el 1995, basat en

el llenguatge C

• JSP : Java Server Pages, 1999, basat en el

llenguatge Java

• ASP.NET, desenvolupat el 2002 per Microsoft

OP40

2.1.1 PHP

PHP és el llenguatge d’script al servidor més

utilitzat (Gràfica)

Exemple aplicacions desenvolupades amb PHP:

Wordpress

Facebook

Twitter

OP40

PHP1. En introduir la URL, el meu navegador solicita una

connexió amb el servidor web corresponent2. El servidor rescata la pàgina del disc dur i

interpreta el codi PHP3. El codi PHP, en ser interpretat, pot realitzar

consultes a Base de Dades (ho veurem + endavant)

4. El resultat és una pàgina amb HTML, CSS i opcionalment Jscript que es torna al navegador que ho visualitza

OP40

2.1.2 Bases de Dades

1. Els llenguates d'script amb execucio al servidor com PHP poden utilitzar connexió a Bases de Dades (BDD)

2. La BDD més conenguda és MySQL3. Les BDD serveixen per a:

Tenir organitzades les dades d'una forma consistent

Poder afegir, modificar o eliminar dades ràpidament i mantenint la consistencia de les dades

OP40

• És una tecnologia implementada en Javascript que permet accedir a les BDD sense tenir que actualitzar la pàgina al navegador.

• Funciona amb: Javascript + PHP + formats d'intercanvi de dades: XML, JSON

• Exemple: Google Instant

2.1.3 AJAX

OP40

2.2 Script al client (client-side script)

• Se refereix a la interfície gràfica (la

part de la pàgina web amb la que

l’usuari interactua)

• Javascript ( o llibreries de JS), Flash

• Empra el DOM: (Model d'Objecte del

Document)

OP40

Exemple de DOM

OP40

PreguntesÉs HTML5 un llenguatge de programacio?

No, perquè no incorpora dinamisme. Només té:• Estructura• Presentació• Sintaxi

És CSS3 un llenguatge de programacio?

No, però incorpora característiques de llenguatges de programació, com ara les media queries (Responsive Design)

OP40

PreguntesHem d’aprendre a escriure scripts amb PHP o JSP?

No. Normalment això és feina d'un programador web.Però convé tenir-ne unes nocions.

És necessari que aprenguem a escriure scripts en JavaScript?

Tenir nocions de Javascript ens permet:

• Facilitar la feina amb un programador

• Tenir una visió global del desenvolupament web

• Reutilitzar components programats amb JS / JQuery

• Declivi de Adobe Flash