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
C L IE N T E
S E R V ID O R
S olicita p ágin a
R ecib e solicitu d
B u sca d ocu m en to
D etecta form ato
R ecib e p ágin a
In terp reta p ágin a
D esp liega p ágin a
E n vía p ágin a
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




Pueden estar en diferentes:






Páginas
Imágenes
Sonidos
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:[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


Las marcas están completas


<nombre_marca>contenido</nombre_marca>
Hay una marca global


<b><em>texto</b>con formato</em>
<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 principal
Texto introductorio
Primer tema
Texto sobre el primer
tema
Segundo tema
Texto sobre el segundo
tema
HTML: páginas básicas
Separadores y formato
básico

Separador
<hr>

Salto de línea
Línea
siguiente linea
<br>

Negritas
<b></b>

Cursivo
<em></em>

Centrado

<center></center>
Negritas
Cursivo
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>
<li>primer
elemento</li>
<li>segundo
elemento</li>
</ol>

1. primer elemento
2. segundo elemento
No numeradas
<ul>
<li>primer
elemento</li>
<li>segundo
elemento</li>
</ul>
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:
<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
uno
<table border="1">
<tr>
tres
<td>uno</td><td>dos</td>
</tr>
<tr>
<td>tres</td><td>cuatro</td>
</tr>
</table>
dos
cuatro
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>
uno
dos
<tr>
<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>
<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
<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>
Descargar

Creación de Páginas de Web