Programación Web Interactiva

Luis Zarza

Temario

Temario

1. Conceptos básicos Historia HTTP, HTML, URL Servidor, página, archivo, hipertexto,

hipermedia

Temario (cont.)

2. HTML Páginas básicas Páginas ligadas Páginas con diferentes medios Tablas Frames Actualización automática de páginas

Temario (cont.)

3. Hoja de estilos en cascada CSS Definición interna de estilos Definición externa de estilos Precedencia Actualización general de estilos

Temario (cont.)

4. JavaScript

5. PHP

7. AJAX

8. JSON

Conceptos básicos

Conceptos básicos

Historia

HTML

HTTP

URL

Servidor

Página

Hipertexto

Hipermedia

Historia de HTML, finales de los 60’s

Muchos sistemas de IBM eran incompatibles entre sí Lenguajes de control Representaciones (formatos de archivo)

IBM encarga a Charles Goldfarb crear un sistema para documentos legales Almacenamiento Búsqueda Gestión Edición

Historia de HTML (cont.)

Charles Goldfarb, Ed Mosher y Ray Lorie Los programas debían soportar representación

genérica de documentos El formato común, específico de documentos

legales Los documentos deben seguir algunas normas,

para que las computadoras trabajen en forma fiable

Historia de HTML (cont. )

1969: Surgió el Lenguaje de Marcado Generalizado GML

1974: Analizador de validación, para leer la definición de un tipo de documento

1986: Lenguaje Estandarizado y Generalizado de Marcado SGML

Estándar ISO 8879

Historia de HTML (cont.)

1989: Tim Berners-Lee propone compartir información en CERN utilizando hipertextoAnders Berglund, usuario de SGML, propuso adoptar una sintaxis semejanteDesarrollaron el Lenguaje de Marcado de Hipertexto HTML a partir de la norma SGMLEl sistema propuesto fue denominado World Wide WebHeredó algunas virtudes de SGML: Es muy general Fácil de editar

Historia de HTML (cont.)

Es diferente de SGML en que: Utiliza una serie fija de tipos de elemento No es extensible, no puede adecuarse a ciertos

tipos de documento No ha acabado de definirse desde su invención Cuando HTML dispuso de una DTD formal, ya

habían millones de páginas con HTML erróneo

Historia de HTML (cont.)

El tipo fijo de documento incomoda a muchas personas

Surgieron extensiones incompatibles del lenguaje

Historia de HTML (cont.)

Tim Berners-Lee: Consorcio de la Web Mundial Hojas de estilo en cascada CSS Posibilidad de añadir abstracciones arbitrarias a HTML Nueva subserie de SGML: Lenguaje de Marcado

extendido XML Principales ventajas de SGML Sencillez de la Web

XHTML: HTML definido en términos de XML

Conceptos básicos

HTTP Protocolo simple de transferencia de

documentos e információn del Web Se realiza la conexión El cliente solicita un documento

Nombre Directorio

El servidor localiza el documento y lo envía al cliente

Se cierra la comunicación

Conceptos básicos

HTTP

CLIENTE

Solicita página

Recibe página

Interpreta página

Despliega página

SERVIDOR

Recibe solicitud

Busca documento

Detecta formato

Envía página

Conceptos básicos

HTML Lenguaje de descripción de documento

hipertexto Permite la definición de ligas que conducen a

otros documentos Locales Remotos

Permite la inclusión de elementos de formato y multimedia

Conceptos básicos

Localizador Universal de Recursos URL Los documentos en el Web son recursos

Páginas Imágenes Sonidos

Pueden estar en diferentes: Directorios Computadoras Redes locales Dominios Países

El URL establece una referencia completa

Conceptos básicos

URL

http://www.utm.mx/z/home.html

protocolo

servidor

dominio

directorio

archivo

extensión

Conceptos básicos

Formas de URL, basados en HTTP http://www.utm.mx/z/index.html http://www/z/home.html http://www.utm.mx/z http//www.utm.mx/~zarza/home.html /z/home.html pato.html aves/pato.html aves

Conceptos básicos

Otras formas de URL ftp://ftp.utm.mx mailto:zarza@mixteco.utm.mx news:comp.sys.mac gopher://gopher.utm.mx

Conceptos básicos

Servidor de Web Programa que corre en una computadora

conectada en la red que soporta el protocolo HTTP para entregar páginas a los clientes

Prácticamente cualquier computadora que se pueda conectar a la red puede contener un servidor

Conceptos básicos

Página Archivo escrito en HTML para presentar

información Puede contener ligas a otras páginas, o en

general, a cualquier URL Puede ser ubicado en un servido, y tener un

URL asociado para ser referenciado desde cualquier parte de la Internet

Conceptos básicos

Hipertexto Sistema contenedor de documentos de texto

que incluyen referencias que conducen a otros textos relacionados con el texto indicado en la referencia

Hipermedia=hipertexto+multimedia Sistema hipertexto con soporte a diversos

medios, como imágenes, video, animaciones y sonidos

HTML

HTML: páginas básicas

Marcas Delimitadoras

<nombre_marca>contenido</nombre_marca> Puntuales

<nombre_marca> Puntuales tipo XHTML

<nombre_marca/> Con argumentos

<nombre_marca dato="valor"><nombre_marca dato="valor">contenido

</nombre_marca">

HTML: páginas básicas

Páginas bien formadas No se traslapan

<b><em>texto</b>con formato</em>

Las marcas están completas <nombre_marca>contenido</nombre_marca>

Hay una marca global <html>todo el contenido</html>

Todo contenido pertenece a alguna marca que lo define <p>Texto</p>

HTML: páginas básicas

Versión, marca global, encabezado y cuerpo<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

<html><head>contenido del encabezado</head><body>contenido del cuerpo</body>

</html>

Encabezado<title>nombre_ventana</title>

HTML: páginas básicas

Párrafos y jerarquía de títulos<h1>Título principal</h1>

<p>Texto introductorio</p>

<h2>Primer tema</h2><p>Texto sobre el primer tema</p>

<h2>Segundo tema</h2>

<p>Texto sobre el segundo tema</p>

Titulo principalTexto introductorio

Primer temaTexto sobre el primer

tema

Segundo temaTexto sobre el segundo

tema

HTML: páginas básicas

Separadores y formato básico Separador

<hr> Salto de línea

<br> Negritas

<b></b> Cursivo

<em></em> Centrado

<center></center>

Líneasiguiente linea

NegritasCursivo

Centrado

HTML: páginas básicas

¡Es preferible usar CSS!Colores y fondo<bodybackground="url de imagen"bgcolor="color"text="color"link="color"vlink="color"alink="color">

HTML: páginas básicas

Código de color Por nombre

black white Blue

Por valor (hexadecimal) #rrggbb Cada valor va desde 00 hasta ff

HTML: páginas básicas

Listas Numeradas

<ol><li>primer elemento</li><li>segundo elemento</li></ol>

No numeradas<ul><li>primer elemento</li><li>segundo elemento</li></ul>

1. primer elemento

2. segundo elemento

primer elemento

segundo elemento

HTML: páginas ligadas

Mismo documento<a name="pato"></a>

<a href="#pato">mensaje liga</a>

Mismo servidor<a href="otro.html">mensaje liga</a>

<a href="directorio/otro.html">mensaje liga</a>

Diferente servidor<a href="http://www.utm.mx/aves/pato.html">

<a href="http://www.utm.mx/aves/pato.html#cuac">

HTML: páginas con diferentes medios

Imágenes: gif, jpg y png (y svg)<img src="url de imagen"

alt="texto alterno">

Sonidos: wav, ra y mp3<a href="sonido.wav">

Video: avi, mov y qt<a href="video1.avi">

HTML: botones

<a href="url"><img src="foto.jpg"></a>

HTML: mapas (¿obsoleto?)

<img src="url de imagen"usemap="#mapa" border="0">

<map name="mapa"><area

shape="rect"coords="10,10,20,20"href="url_destino"alt="texto alterno">

</map>

HTML: páginas con diferentes medios

Sonidos en la misma página (¿obsoleto?) Explorer:

<bgsoundsrc="cancion.wav"loop="true">

Firefox:<embed

src="cancion.wav"width=146height=55autostart="true"loop="true"hidden="true">

HTML: tablas

Tablas: permiten la definición de estructuras rectangulares<table border="1"><tr>

<td>uno</td><td>dos</td></tr><tr>

<td>tres</td><td>cuatro</td></tr>

</table>

uno dos

tres cuatro

HTML: tablas, colspan

<table border="1">

<tr>

<td colspan="2">uno</td>

</tr>

<tr>

<td>tres</td><td>cuatro</td>

</tr>

</table>uno

tres cuatro

HTML: tablas, rowspan

<table border="1"><tr>

<td rowspan="2">uno</td><td>dos</td></tr><tr>

<td>cuatro</td></tr>

</table>

uno dos

cuatro

HTML: tablas, encabezados

<table border="1">

<tr>

<th>uno</th><th>dos</th>

</tr>

<tr>

<td>tres</td><td>cuatro</td>

</tr>

</table>

uno dos

tres cuatro

HTML: tablas, bordes y espacios

¡Usar CSS!

<table>

<table border="4">

cellpadding="10"

cellspacing="10"

uno dos

tres cuatro

uno dos

tres cuatro

HTML: tablas, textos y alineación

¡Usar CSS!

<td>Hola,<br>que tal</td>

<tr align="center">

<td align="right">

<td valign="top">

<td valign="middle">

<td valign="bottom">

HTML: tablas anidadas

<table border="1">

<tr>

<td>uno</td><td>dos</td>

</tr>

<tr>

<td>tres</td>

<td>

<table border="1">

<tr><td>uno</td><td>dos</td></tr>

<tr><td>tres</td><td>cuatro</td></tr>

</table>

</td>

</tr>

</table>

uno dos

tres uno dos

tres cuatro

HTML: tablas con ancho fijo

<tableborder="1"width="50%">

<table

border="1"

width="200">

<td width="80%">

HTML: tablas con encabezados

<table border="1">

<caption align="top">Titulo</caption>

<tr>

<td>uno</td><td>dos</td>

</tr>

<tr>

<td>tres</td><td>cuatro</td>

</tr>

</table>

HTML: tablas con bordes

frame= void: Sin lados (default) above: Lado superior below: Lado inferior. hsides: Lados superior e inferior vsides: Lados derecho e izquierdo lhs: A mano izquierda únicamente rhs: A mano derecha únicamente box: Los cuatro lados externos border: Los cuatro lados externos

HTML: tablas con reglas

rules= none: Sin reglas (default) rows: Las reglas aparecerán entre los renglones cols: Las reglas aparecerán entre las columnas all: Las reglas aparecerán entre las columnas y

los renglones

HTML: frames

Múltiples páginas en una ventana

Control de despliegue

Contenido dinámico

Información estructurada

HTML: frames

Página descriptora de contenido<html><head><title>Titulo</title></head><frameset rows="80,20"><frame src="cabeza.html"><frame src="cuerpo.html"><noframes>

<p>Tu navegador no despliega frames</p></noframes>

</frameset></html>

HTML: frames

<head><title>Titulo</title></head><frameset rows="100,*" border="0"><frame scrolling="auto"src="cabeza.html"name="mensajes"noresize><frame scrolling="yes" src="cuerpo.html">

</frameset>

HTML: frames anidados

<frameset cols="100,*">

<frame src="menu.html">

<frameset rows="80,20">

<frame src="cabeza.html">

<frame src="cuerpo.html">

</frameset>

</frameset>

HTML: frames destino

Se puedes especificar un frame como destino<a href="bienvenida.html"target="mensaje">

Mensaje de Bienvenida

</a>

HTML: frames destino

Existen varios destinos reservados: _blank

Enviar a una ventana nueva

_selfEnviar al mismo frame donde se encuentra la liga

_parentEnviar a la ventana padre, es decir, a donde se encuentra el

frameset que define al frame donde se encuentra la liga

_topEnviar a la ventana principal

HTML: frames en línea

<p>A continuación, un iframe:</p>

<iframesrc="iframe.html"width="200"height="400"scrolling="auto"frameborder="1">

HTML: actualización automática

Permite la actualización de una página o redireccionar después de un tiempo<head>

<metahttp-equiv="Refresh"content="15;

URL=http://www.utm.mx">

</head>