Plantel Docente

Profesoras:
Claudia Banchoff Tzancoff y Ana Paola Amadeo
JTPs:
Einar Lanfranco y Esteban Zozaya
Ayudantes:
Leandro Barrientos - Leandro Scuderi - Carina Girón - Gonzalo
Ramirez Abella - Patricio Mac Adden - Nahuel Cuesta Luengo -
Ariadna Alfano - Carlos Brizuela - Miguel Carbone - Luciano Coggiola
- Tomás Córdoba - Laura Finamore - Federico Tello Gentile - Diego
Martorelli - Matías Pagano - Gaspar Rajoy - Jorge Rosso - Valeria
Soria - Diego Vilches
proyecto@info.unlp.edu.ar
http://catedras.linti.unlp.edu.ar
 Horarios
Teoría:
Jueves 11Hs – Aula 4

Práctica:
Sábados 10Hs - Sala de PC (115)
Jueves 8Hs - Sala de PC (115)
Miércoles 17:30 - Sala de PC (115)
Lunes 17:30 - Sala de PC (120)
Martes 8Hs. - Sala de PC (120)
 Contenido de la materia
Internet

Mail FTP WWW IRC P2P ...

Estándares Documentos
X/HTML + Hojas de estilo
XML

Accesibilidad
Estáticas Dinámicas
Usabilidad

Web Semántica Cliente Servidor

JavaScript Flash JScript ... PHP Java Python ...

Básico Librerías Básico Frameworks

Prototype JQuery ... Symfony Cake ...

 Clase 1
Temario
Conceptos generales de redes
Estándares y protocolos

La WEB
Definición de URL/URI
Protocolo HTTP
Lenguaje HTML
Hojas de estilo: el estándar CSS
 Arquitectura básica
de un Sitio Web

Cliente Web http

Servidor Web
o Navegador

despliega distribuye

Documento Web

Modeling Web Application Design with UML

http://www.itmweb.com/essay546.htm
 Comunicación
Servidor Web
http://www.unsitio.com

Solicitud
Respuesta Internet

Proveedor de Internet
 Comunicación
ZOOM

Introducción al desarrollo Web con PHP

http://www.scribd.com/doc/14168211/2009-01-Arquitectura-Cliente-
Servidor-Web
 Comunicación
ZOOM
Router
DNS 163.10.0.45
?
HTTP Request
123.90.5.67
DNS

? Gateway 145.10.9.67
Firewall
DNS
Proxy 145.90.7.23
DNS

200.54.0.54
 Conceptos de Redes
Algunos Conceptos de Base ...
Protocolo
Conjunto de reglas que dos o más equipos deben
seguir para intercambiar mensajes. Describe tanto el
formato de los mensajes como la forma en que un
equipo responderá al mismo.
Modelo Cliente – Servidor
Está basado en una serie de solicitudes y
respuestas que asegura que si dos aplicaciones
intentan comunicarse, una comienza la ejecución y
espera indefinidamente que la otra le responda y
luego continua con el proceso.
Conceptos de Redes

Modelo OSI – Stack TCP/IP

Aplicación
Stack TCP/IP
Presentación
Servicios
Sesión
(smtp – ftp - http)
Transporte
Red
Transporte
Enlace
Red
Física
Acceso al
Medio
Internet y la web
RFCs – Request for Comments
http://www.faqs.org

Estadísticas de uso de Internet

http://www.internetworldstats.com/

La Web: creada por Tim Berners-Lee

http://www.w3.org/History/1989/proposal.html

El Consorcio de la Web
http://www.w3c.org
El Consorcio de la Web - W3C
Desarrollo de estándares
La misión del W3C es:
Guiar la Web hacia su máximo potencial a
través del desarrollo de protocolos y
pautas que aseguren el crecimiento futuro
de la Web.

http://www.w3c.es/Consorcio/

Creado y presidido por Tim Berners-Lee

La World Wide Web
La Web es una red de recursos de
información.

La Web se basa en tres pilares:

El concepto de URL/URI
El protocolo HTTP
El lenguaje HTML
 URL/URI
RFC 2396
Una URI -“Uniform Resource Identifier”- es un
mecanismo por el cual se identifica todo
recurso accesible en la web.
Una URL -“Uniform Resource Locator”- permite
ubicar un recurso a través de su ubicación.
Típicamente una URL se compone de:
el esquema utilizado para acceder al recurso
el nombre de dominio de la máquina que almacena
el recurso
el nombre del recurso mismo dado como un
camino dentro de la máquina (URI)
http:// www.catedras.linti.unlp.edu.ar/proyecto2010/alumnos.html
protocolo nombre de dominio directorio archivo
URL/URI
RFC 2396

Ejemplos

http://extension.info.unlp.edu.ar/tallerSL07/index.html

http://www.servidor.com.ar/especificacion#parte3

http://www.taller.com.ar/info.php?id=12&qq=11

../cursada2009/mejores/junio.htm
Protocolo HTTP
RFC 2068/2616

Solicitud

Procesamiento

Respuesta

Cliente web Servidor web

Una transacción HTTP consta de 4 pasos:

inicio conexión - solicitud - respuesta - cierre conexión

Protocolo sin estado

Clientes web: Firefox, IE, Netscape, Opera, ....
Servidores web: Apache, IIS, SunOne web server, ....
 Protocolo HTTP
RFC 2616
Tipos de mensajes
Solicitudes
GET: retorna la información que está identificada por la
URI-solicitada.
HEAD: similar al GET, pero solamente se retorna la
información del header del servidor.
POST: se utiliza para la entrega de correo electrónico, news
o envío de formularios que son completados en forma
interactiva por un usuario. Esta es la única solicitud que envía
un cuerpo en el mensaje.

Respuestas
El servidor retorna un código que indica el estado de la
solicitud (por ejemplo:200 y el documento, ó 404 indicando
recurso no encontrado)
 Protocolo HTTP
Diferencias Entre GET y POST

Mensaje HTTP con GET:

GET /index.php?nombre=pepe&seccion=1
HTTP/1.0
Host: www.servidor.com
User-Agent: Mozilla/4.5 [en]
Accept: image/gif, image/jpeg, text/html
Accept-language: en Mensaje HTTP con POST:
Accept-Charset: iso-8859-1
POST /index.php HTTP/1.0
Host: www.servidor.com
User-Agent: Mozilla/4.5 [en]
Accept: image/gif, image/jpeg, text/html
Accept-language: en
Accept-Charset: iso-8859-1

nombre=pepe&seccion=1
 Lenguaje HTML
http://www.w3c.org/html

HTML - “HyperText Markup Language”- especifica el

formato de las páginas web, separando el contenido
de las páginas de su formato de presentación.
Fue creado en los laboratorios CERN por Tim
Berners-Lee.
Define un conjunto de símbolos (etiquetas o tags)
que especifican la estructura lógica de un documento
y de todos sus componentes.
Es independiente de la plataforma.
Su código es interpretado por los clientes web.
 Lenguaje HTML
Estructura General

<!DOCTYPE> Declaración del tipo de documento HTML o XHTML, Strict,

Transitional o Frameset, para validar la sintaxis.

<html> Inicio del documento

<head>
Encabezado
</head>

<body>
Cuerpo
</body>

</html> Fin del documento

Mi primera página HTML
 Lenguaje HTML
Sintaxis General
Elementos y Etiquetas
Una etiqueta puede tener asociada una etiqueta de
cierre:

<etiqueta>... </etiqueta>

Hay elementos vacíos

<etiqueta />

Pueden tener uno o más atributos

<etiqueta atributo1=”valor” atributo2=”valor”>
 Lenguaje HTML
Sintaxis General

¿Mayúsculas y minúsculas?
Respetar el orden de apertura y cierre
<etiqueta1>
<etiqueta2>... </etiqueta2>
</etiqueta1>

XHTML: versión en minúsculas y bien formada de

HTML. El grupo dejo de trabajar en diciembre de 2009.

HTML5
 Lenguaje HTML
El encabezado de un documento

Delimitado por <head> y </head>

Algunas componentes...
<title>: Corresponde al título de la página
<base>: Se usa para registrar la URL que indica la
localización de los archivos, gráficos, sonidos, etc. a los que
se hace referencia en la página. Si no se incluye esta
directiva el navegador entiende que dichos elementos se
encuentran en el mismo lugar donde se encuentra la página.
<link>: Indica una relación entre el documento y algún otro
objeto de la WEB
 Lenguaje HTML
El encabezado de un documento
<campos meta>: Este elemento es usado para identificar
meta-información sobre el documento, como por ejemplo el
autor o palabras claves que podrán ser luego utilizadas por
buscadores para mejorar la calidad de los resultados en las
búsquedas.

Ejemplo:
<meta name="description" content="Pagina de Proyecto de
software" />

<meta name=”keywords" content=”meteorología, clima">

O mejor...
<meta name=”keywords" lang=”es”
content=”deportes, tenis, futbol">
<meta name=”keywords" lang=”en”
content=”sports, tennis, soccer">
 Lenguaje HTML
El encabezado de un documento
campos meta cont...
Robots de búsquedas...
<meta name=”robots"
content=”noindex, nofollow, noimageindex">
o:
<meta name="GOOGLEBOT"
content=”noindex, nofollow">

http-equiv permite predeterminar el diálogo entre cliente y

servidor
<meta http-equiv="Content-Type"
content="text/html;charset=ISO-8859-1" />

<meta http-equiv="refresh" ¡No debería usarse!

content="5;url=http://www.w3schools.com" />
Lenguaje HTML
El Cuerpo de un documento

Algunas consideraciones antes de continuar...

El documento tiene una estructura y una forma

de visualización

Estructura: usando las etiquetas HTML

más apropiadas.
Visualización: usando hojas de estilo

http://www.csszengarden.com/tr/espanol/
Lenguaje HTML
El Cuerpo de un documento
 Lenguaje HTML
El Cuerpo de un documento

Delimitado por <body> y </body>

Encabezados: 6 encabezados definidos con un

estilo predefinido:
<h1>..</h1>, <h2>..</h2>, ....,
<h6>..</h6>

Párrafos: Se delimitan con <p>..</p>. Inserta una

línea en blanco antes del texto.

Comentarios: Se delimitan con los símbolos:

<!-- el comentario -->

Ver ejemplo ejemploEstructuraGral.html
 Lenguaje HTML
El Cuerpo de un documento
Caracteres especiales: se representan como entidades,
símbolos especiales que no son soportados por el set de caracteres de
un documento:

&amp; (&) - &copy; (©) - &lt; (<) - &gt; (>) -&quot; (“) ...
&aacute; (á) - &eacute; (é) - ....
Ver la tabla completa en http://www.w3.org/MarkUp/Guide/Advanced.html

Colores:
 Lenguaje HTML
El Cuerpo de un documento

Listas: Existen varios tipos de listas en HTML que se

pueden anidar unas en otras.

Imágenes
<img src=”NombreArchivo" alt="descripción"/>

Enlaces o hipervínculos
<a> </a>: Especifican un enlace. Tiene dos atributos
básicos: href o name.
Ver ejemplo ejemploListas.html

Ver ejemplo ejemploImagenes.html

Ver ejemplo Ejemplo con enlaces.html

 Lenguaje HTML
El Cuerpo de un documento
Tablas
<table> </table>: Sirve para mostrar una tabla sin
incluir cálculos ni fórmulas.

<table>
<thead>
<tr> ...información de encabezado...
</thead>
<tfoot>
<tr> ...información al pie...
</tfoot>
<tbody>
<tr> ...primera fila de datos...
<tr> ...segunda fila de datos...
</tbody>
 Lenguaje HTML
El Cuerpo de un documento
Formularios

<form> </form>: Permite definir y agrupar una serie

de campos que forman el formulario.

Algunos atributos...

action: Especifica la URI donde será enviado el

formulario.
method: Especifica la forma en que se transferirán los
datos:
<form method="post" action="info.php">
get .....
post </form>
 Protocolo HTTP
Diferencias Entre GET y POST

Si en el formulario se definen campos id y n, por ejemplo

Mensaje HTTP con GET: Mensaje HTTP con POST:

GET /info.php?id=12&n=11 HTTP/1.0 POST /info.php HTTP/1.0

Host: www.servidor.com
User-Agent: Mozilla/4.5 [en]
Accept: image/gif, image/jpeg,
text/html
Accept-language: en
Accept-Charset: iso-8859-1
Host: www.servidor.com
User-Agent: Mozilla/4.5 [en]
Accept: image/gif, image/jpeg,
text/html
Accept-language: en
Accept-Charset: iso-8859-1

id=12&n=11
 Protocolo HTTP
Diferencias Entre GET y POST

Mensaje HTTP con GET:

GET /info.php?id=12&n=11 HTTP/1.0

Debería usarse cuando el formulario no

tiene efectos secundarios, por ejemplo
en una búsqueda.
Mensaje HTTP con POST:

POST /info.php HTTP/1.0

Debería usarse en formularios que

modifican una base de datos o la
suscripción a un servicio.
Lenguaje HTML
El Cuerpo de un documento

Elementos <input>
Presenta un atributo que indica el tipo de elemento de
entrada:
Campos de texto:
•
type=“text”:
•
type=“password”:
•
type=“hidden”:
Casilla de selección:
•
type =“checkbox”
•
type =“radio”
Botones:
•
type =”reset”
•
type =”submit”
•
type =”button”
Lenguaje HTML
El Cuerpo de un documento
Lenguaje HTML
El Cuerpo de un documento
......
<h1> Formulario de Inscripci&oacute;n </h1>
<form method=“post”
action=“proceso.php”>

<p>Ingrese su nombre:
<input type=“text” id=“nomUser” ><br>
Ingrese su clave personal:
<input type=“password” id=“claveUser” >
<input type=“hidden” id=“TipoUser”
value=“normal”><br>

Desea informaci&oacute;n por correo electr&oacute;nico?

<input type=“checkbox” id=“opSuscripcion” checked=”checked”>
Sí, me gustaría recibir informaci&oacute;n.<br>

Elija nivel del curso:

<input type=“radio” id=“nivel” value=“P” > Principiante
<input type=“radio” id =“nivel” value =“A” > Avanzado.<br>
......
 Lenguaje HTML
El Cuerpo de un documento

Formularios (continuación)

.......

<input type=“submit” id=“enviarFormu” value=“Enviar los datos”

>
<input type=“reset” id=“limpiarCampos” value=“Valores
originales”>
<input type=“button” id=“mostrarAyuda” value=“Ayuda” >
</form>.....
 Lenguaje HTML
El Cuerpo de un documento
Campos de Formularios

Elemento <textarea>
Algunas opciones...
rows: Número de líneas de texto del área.
cols: Número de columnas de texto del área.

Elementos <select> y <option>

Algunas opciones de select ...
multiple: Permite seleccionar más de un ítem del menú.
size: Especifica el número de ítems visibles en la lista de
opciones.
Algunas opciones de option ...
value: Valor de la opción a ser enviado al servidor.
selected: Especifica qué opción es seleccionada por defecto. Si
no se especifica se selecciona la primer opción.
Lenguaje HTML
El Cuerpo de un documento

Ejemplo
 Referencias

http://www.w3.org/TR/html401/struct/tables.html#h-11.2.3

http://www.htmlquick.com/es/reference.html

http://mirificampress.com/permalink/html_transitional_what

http://www.w3.org/html/

http://www.w3.org/html/wg/html5/

http://www.w3c.es/Prensa/2008/nota080122_html5