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:[email protected] 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>