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 hipertexto
Anders Berglund, usuario de SGML, propuso
adoptar una sintaxis semejante
Desarrollaron el Lenguaje de Marcado de
Hipertexto HTML a partir de la norma SGML
El sistema propuesto fue denominado World Wide
Web
Heredó 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 SERVIDOR
Solicita página Recibe solicitud
Busca documento
Detecta formato
Recibe página Envía página
Interpreta página
Despliega 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 directorio

servidor archivo

dominio 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 Titulo principal
títulos Texto introductorio
<h1>Título
principal</h1> Primer tema
<p>Texto Texto sobre el primer
introductorio</p> tema
<h2>Primer tema</h2>
Segundo tema
<p>Texto sobre el
primer tema</p> Texto sobre el segundo
tema
<h2>Segundo
tema</h2>
<p>Texto sobre el
segundo tema</p>
HTML: páginas básicas
Separadores y formato
básico
 Separador
<hr> Línea
 Salto de línea siguiente linea
<br>
 Negritas
<b></b> Negritas
 Cursivo
<em></em> Cursivo
 Centrado
 <center></center>
Centrado
HTML: páginas básicas
¡Es preferible usar CSS!
Colores y fondo
<body
background="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> 1. primer elemento
<li>primer
elemento</li> 2. segundo elemento
<li>segundo
elemento</li>
</ol>
 No numeradas
<ul>
<li>primer
primer elemento
elemento</li>
<li>segundo segundo elemento
elemento</li>
</ul>
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:
<bgsound
src="cancion.wav"
loop="true">
 Firefox:
<embed
src="cancion.wav"
width=146
height=55
autostart="true"
loop="true"
hidden="true">
 HTML: tablas
Tablas: permiten la definición de estructuras
rectangulares
<table border="1"> uno dos
<tr>
tres cuatro
<td>uno</td><td>dos</td>
</tr>
<tr>
<td>tres</td><td>cuatro</td>
</tr>
</table>
HTML: tablas, colspan
<table border="1">
<tr>
<td colspan="2">uno</td>
</tr>
<tr>
<td>tres</td><td>cuatro</td>
</tr> uno
</table>
tres cuatro
HTML: tablas, rowspan
<table border="1">
<tr>
<td
rowspan="2">uno</td><td>dos</td>
</tr>
<tr> uno dos
<td>cuatro</td> cuatro
</tr>
</table>
HTML: tablas, encabezados
<table border="1">
<tr>
<th>uno</th><th>dos</th>
</tr>
<tr>
<td>tres</td><td>cuatro</td>
</tr> uno dos
</table> tres cuatro
 HTML: tablas, bordes y espacios
¡Usar CSS!
<table> uno dos
tres cuatro
<table border="4">
uno dos
tres cuatro
cellpadding="10"
cellspacing="10"
 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"> uno dos
<tr>
<td>uno</td><td>dos</td>
tres uno dos
</tr>
<tr> tres cuatro
<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>
HTML: tablas con ancho fijo
<table
border="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
 _self
Enviar al mismo frame donde se encuentra la liga
 _parent
Enviar a la ventana padre, es decir, a donde se encuentra el
frameset que define al frame donde se encuentra la liga
 _top
Enviar a la ventana principal
 HTML: frames en línea
<p>A continuación, un
iframe:</p>
<iframe
src="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>
<meta
http-equiv="Refresh"
content="15;
URL=http://www.utm.mx">
</head>