Download - Programación Web Interactiva
![Page 1: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/1.jpg)
Programación Web Interactiva
Luis Zarza
![Page 2: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/2.jpg)
Temario
![Page 3: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/3.jpg)
Temario
1. Conceptos básicos Historia HTTP, HTML, URL Servidor, página, archivo, hipertexto,
hipermedia
![Page 4: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/4.jpg)
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
![Page 5: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/5.jpg)
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
![Page 6: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/6.jpg)
Temario (cont.)
4. JavaScript
5. PHP
7. AJAX
8. JSON
![Page 7: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/7.jpg)
Conceptos básicos
![Page 8: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/8.jpg)
Conceptos básicos
Historia
HTML
HTTP
URL
Servidor
Página
Hipertexto
Hipermedia
![Page 9: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/9.jpg)
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
![Page 10: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/10.jpg)
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
![Page 11: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/11.jpg)
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
![Page 12: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/12.jpg)
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
![Page 13: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/13.jpg)
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
![Page 14: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/14.jpg)
Historia de HTML (cont.)
El tipo fijo de documento incomoda a muchas personas
Surgieron extensiones incompatibles del lenguaje
![Page 15: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/15.jpg)
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
![Page 16: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/16.jpg)
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
![Page 17: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/17.jpg)
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
![Page 18: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/18.jpg)
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
![Page 19: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/19.jpg)
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
![Page 20: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/20.jpg)
Conceptos básicos
URL
http://www.utm.mx/z/home.html
protocolo
servidor
dominio
directorio
archivo
extensión
![Page 21: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/21.jpg)
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
![Page 22: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/22.jpg)
Conceptos básicos
Otras formas de URL ftp://ftp.utm.mx mailto:[email protected] news:comp.sys.mac gopher://gopher.utm.mx
![Page 23: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/23.jpg)
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
![Page 24: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/24.jpg)
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
![Page 25: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/25.jpg)
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
![Page 26: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/26.jpg)
HTML
![Page 27: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/27.jpg)
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">
![Page 28: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/28.jpg)
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>
![Page 29: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/29.jpg)
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>
![Page 30: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/30.jpg)
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
![Page 31: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/31.jpg)
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
![Page 32: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/32.jpg)
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">
![Page 33: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/33.jpg)
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
![Page 34: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/34.jpg)
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
![Page 35: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/35.jpg)
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">
![Page 36: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/36.jpg)
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">
![Page 37: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/37.jpg)
HTML: botones
<a href="url"><img src="foto.jpg"></a>
![Page 38: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/38.jpg)
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>
![Page 39: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/39.jpg)
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">
![Page 40: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/40.jpg)
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
![Page 41: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/41.jpg)
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
![Page 42: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/42.jpg)
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
![Page 43: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/43.jpg)
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
![Page 44: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/44.jpg)
HTML: tablas, bordes y espacios
¡Usar CSS!
<table>
<table border="4">
cellpadding="10"
cellspacing="10"
uno dos
tres cuatro
uno dos
tres cuatro
![Page 45: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/45.jpg)
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">
![Page 46: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/46.jpg)
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
![Page 47: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/47.jpg)
HTML: tablas con ancho fijo
<tableborder="1"width="50%">
<table
border="1"
width="200">
<td width="80%">
![Page 48: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/48.jpg)
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>
![Page 49: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/49.jpg)
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
![Page 50: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/50.jpg)
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
![Page 51: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/51.jpg)
HTML: frames
Múltiples páginas en una ventana
Control de despliegue
Contenido dinámico
Información estructurada
![Page 52: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/52.jpg)
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>
![Page 53: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/53.jpg)
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>
![Page 54: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/54.jpg)
HTML: frames anidados
<frameset cols="100,*">
<frame src="menu.html">
<frameset rows="80,20">
<frame src="cabeza.html">
<frame src="cuerpo.html">
</frameset>
</frameset>
![Page 55: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/55.jpg)
HTML: frames destino
Se puedes especificar un frame como destino<a href="bienvenida.html"target="mensaje">
Mensaje de Bienvenida
</a>
![Page 56: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/56.jpg)
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
![Page 57: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/57.jpg)
HTML: frames en línea
<p>A continuación, un iframe:</p>
<iframesrc="iframe.html"width="200"height="400"scrolling="auto"frameborder="1">
![Page 58: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/58.jpg)
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>
![Page 59: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/59.jpg)
![Page 60: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/60.jpg)
![Page 61: Programación Web Interactiva](https://reader035.vdocumento.com/reader035/viewer/2022062519/56815228550346895dc06ff7/html5/thumbnails/61.jpg)