Introducción al desarrollo WEB

Tecnologías Web

Un poco de Historia

‰ World Wide Web (WWW)
‰ Inventada por Tim Berners Lee en 1989!!!
‰ Mientras trabajaba European Organization
for Nuclear Research (CERN)
‰ http://www.w3.org/Consortium/history.html
‰ http://www.w3.org/History/1989/proposal.html

NeXTcube utilizado por
Tim Berners-Lee como
primer servidor HTTPD
Introducción al desarrollo Web1

Terminología básica

‰ La WWW es una combinación de 4 ideas básicas
‰ Hipertexto
‰Habilidad de navegar desde un documento a otro a través de
conexiones Æ “hiperenlaces”
‰ Identificadores de Recursos
‰Permite encontrar un recurso particular (un documento,
imagen) en la red a través de dicho identificador
‰Uniform Resource Identifier (URI), Uniform Resource Locator
(URL)
‰ Modelo clienteservidor
‰Un cliente software demanda servicios o recursos a un
servidor software
‰ Un lenguaje de marcado
‰Además de texto incluyen conjuntos de caracteres especiales
que indican al navegador como presentar dicho texto Æ HTML
Introducción al desarrollo Web

2

Terminología básica

‰ La WWW no es Internet, es un servicio que está montado
sobre Internet
‰ Internet (la red) está formado por el conjunto deordenadores que
están interconectados entre sí.

HTML
HTTP

INTERNET
Introducción al desarrollo Web

3

Como funciona la WEB

http://www.google.es

1

CLIENTE

1. Petición Domain Name Server (DNS)
www.google.es Ù216.239.59.147
2. Petición HTTP
GET / HTTP/1.1
Host: www.google.es
User-Agent: Mozilla/5.0
…

2

INTERNET

1. El navegador recibe el HTML
2. Realiza nuevas peticiones al servidor
paraobtener los archivos adicionales
como imágenes, CSS, JavaScript…

Introducción al desarrollo Web

DNS

Servidor WEB

4

Una WEB por dentro

‰ Una página WEB no es un único objeto, está compuesto
por múltiples ficheros (imágenes, video, películas flash,
JavaScript …)
‰ Existe un fichero principal cuyo contenido es HTML y que
describe el contenido de la página, tanto texto como otros
elementosIntroducción al desarrollo Web

5

Material necesario para crear una página WEB

‰ Material básico
‰ Un editor de texto cualquiera (ej. el bloc de notas)
‰ Un navegador cualquiera

‰ Material avanzado
‰ Un editor de texto profesional Æ Notepad++ ó XML Spy
‰ Un editor de gráficos / retoque fotofráfico Æ Photoshop ó GIMP
‰ Editores específicos de páginas WEB
‰Microsoft FrontPage
‰Macromedia DreamWeaver‰NVU (gratuito y de código libre, basado en el núcleo Firefox)
‰ Plugins de Firefox 3.X pensados para el desarrollo web
‰ Un servidor WEB como Apache
‰ Varios navegadores y en varias versiones (para hacer pruebas)
Introducción al desarrollo Web

6

Pincelada sobre el HTML

‰ HTML es el lenguaje con el que se definen páginas WEB
‰ Es texto plano
‰ Se trata de un conjunto de etiquetas que sirven paraindicar que el
texto dentro de la etiqueta hay que tratarlo de manera especial
‰Ej: Texto en negrita

‰ Ha evolucionado a lo largo del tiempo desde que Tim
Berners-Lee propusiera la primera versión
‰ Se ha llevado a cabo un proceso de estandarización
‰Word Wide Web Consortium: http://www.w3.org
‰ Las versiones actuales son HTML 4.01 y XHTML 1.1

Introducción al desarrollo Web

7

Ejemplode página WEB simple

‰ Las etiquetas están estructuradas (en un árbol)
‰ Hay dos secciones claramente diferenciadas (cabecera y
cuerpo)
‰ Las etiquetas van pareadas

Encabezado

Podemos crear un párrafo resaltando
parte de sus contenidos.

Introducción aldesarrollo Web

8

Construir páginas WEB y sitios WEB

‰ Si planeamos un sitio WEB grande, es útil crear plantillas
que podamos utilizar como partida para crear cada una
de las secciones de nuestro sitio WEB
‰ Podemos definir varias plantillas para distintos tipos de páginas

‰ Consejos
‰ No utilizar espacios en blanco o acentos en los nombres de
ficheros
‰ Hay que tener cuidado con las...