SEMANA 1

Ing. Lino Martin Quispe Tincopa

 AGENDA
Internet y Navegadores

Web 2.0 y Web 3.0

Elementos de un Web Site

Creación del Sitio Web

Aplicativos para crear sitos web en modo Diseño

Herramientas para el diseño web

HTML y su estructura

Listas y Tablas

Enlaces e Hiperenlaces
 Internet
O Internet es un espacio digital de intercambio de
información.
O Red de ordenadores alrededor de todo el mundo
que pueden intercambiar información entre
ellos.
O Red de redes, supercarretera de la información o
ciberespacio.
O Por otro lado nos permite acceder a
información, textos, imágenes, videos,
música….
O Y realizar acciones como comunicarnos,
informarnos, enseñar, aprender, comprar,
vender, etc….
 Servicios que ofrece
O Paginas Web WWW
O Correo electrónico
O Chat
O Transferencia de ficheros (FTP)
O Mensajería Instantánea
O Intercambio de archivos P2P (eMule, ..)
O Newgroups, Foros de Discusión..
O Telefonía IP (Skype)
 Que necesitas para conectarte?
O Ordenador
O Programas de
Navegación (Explorer,
Netscape, Firefox…)
O Contrato compañía de
Servicio
O Modem, router, wifi,…
 Qué es la Web 2.0?
O La Web 2.0 es la representación de la evolución de
las aplicaciones tradicionales hacia aplicaciones
web enfocadas al usuario final. El Web 2.0 es una
actitud y no precisamente una tecnología.

O Se trata de aplicaciones que generen colaboración

y de servicios que reemplacen las aplicaciones de
escritorio.
Es una etapa que ha definido nuevos proyectos en
Internet y está preocupándose por brindar mejores
soluciones para el usuario final.

Evolución Web 2.0

 En 2001 Tim Bernes-Lee emplean el termino de
Web Semántico.

 En 2004 Dale Dougherty de O’Reilly Media y Craig

Cline de MediaLive emplearon el termino Web 2.0
 Que es la Web 2.0?
O Es un «ecosistema» de información. (Tim
O’Reily)
O Casi seguro que ya estas usando Web 2.0
O Google, Wikipedia, Ebay, Youtube, Skype,
Writely, Blogger, RSS, Flickr, Emule, cientos de
otros.
O Todas estas aplicaciones tienen algo en común
que su principal activo es el usuario. A mayor
numero de usuarios aumenta el valor del sitio y
su contenido.
O Es una evolución del Web 1.0
Web 3.0
DIFERENCIAS ENTRE UN SITIO WEB Y UNA APLICACIÓN WEB

1. Un sitio web es un espacio donde se publica

contenido generalmente estático con un muy bajo
nivel de interactividad con el usuario
…DIFERENCIA ENTRE UN SITIO WEB Y UNA APLICACIÓN WEB

2. Una aplicación web es un SI con alto grado de

interactividad y funcionalidades que bien podrían
ser de un software convencional.
…DIFERENCIA ENTRE UN SITIO WEB Y UNA APLICACIÓN WEB

3. La aplicación web más sencilla sería una que contenga

formularios y subiendo de nivel encontramos las que
realizan conexión con base de datos remotas, y CMS
(Sistema de Gestión de Contenidos)
 EN RESUMEN: ¿QUÉ ES APLICACIÓN WEB?
Es un SI en donde una gran cantidad de datos van a
ser consultados, procesados y analizados mediante
navegadores.

«Si no existe lógica del negocio en el servidor, el

sistema no puede ser llamado Aplicación Web»
[Conallen99].
FUNCIONAMIENTO DE UNA APLICACIÓN WEB BASADA EN PHP
FUNCIONAMIENTO DE UNA APLICACIÓN WEB BASADA EN PHP
 ELEMENTOS DE UNA APLICACIÓN WEB

Es una especialización de las aplicaciones cliente/servidor donde

tanto el cliente (el navegador), como el servidor (servidor web) y
el protocolo HTTP son estándares y no han de ser creados por el
programador.
 IMPORTANCIA DE LA INGENIERÍA WEB

Permite construir Aplicaciones Web de calidad que:

Pesen mucho menos

El mantenimiento de las mismas sea más

sencillo

Cumplan con los requerimientos de un cliente

Sean soportadas y mostradas con excelente

calidad en cualquier navegador
CARACTERÍSTICAS DE UNA APLICACIÓN WEB

Aplicación informática en entorno web

Arquitectura por capas

Procesamiento en el servidor

Acceso a bases de datos

Distintos tipos de usuarios

Comunicación: HTTP
 EL CLIENTE

El navegador no ven la página web ... solo se "come" el código html,

sigue las ordenes de sus etiquetas y nos proyecta el resultado.

Un navegador web o explorador web (del inglés,

navigator o browser) es un programa que permite al
usuario visualizar documentos descritos en HTML, desde
servidores web de todo el mundo a través de Internet.
 EL CLIENTE

En el mercado hay varios navegadores: I Explorer,

FireFox, Opera, Safari (para la plataforma Mac) y
otros.

Los diseñadores web trabajamos PARA estos

programas: somos los cocineros que preparan el
HTML que después se van a «comer» los
navegadores.
 SERVIDOR WEB ó SERVIDOR HTTP

Es un programa informático que procesa una aplicación del

lado del servidor realizando conexiones bidireccionales con
el cliente, generando o cediendo una respuesta en cualquier
lenguaje o Aplicación del lado del cliente
LADO DEL SERVIDOR y LADO DEL CLIENTE

Lenguajes de lado servidor son reconocidos,

ejecutados e interpretados por el propio servidor y
que se envían al cliente en un formato
comprensible para él.

Lenguajes de lado cliente son aquellos que

pueden ser directamente "digeridos" por el
navegador y no necesitan un pretratamiento.
TECNOLOGÍAS Y LENGUAJES DEL LADO DEL CLIENTE.
LENGUAJES DE PROGRAMACIÓN DEL LADO DEL
SERVIDOR

O ASP, ASP.NET (son tecnologías, soportan

diferentes lenguajes como VB, C#, C++, etc.).
O PHP.

O JSP.

O Perl.

O Ruby.

O Python.

O XML.
 SERVIDOR WEB
O Apache (Libre, servidor más
usado del mundo, según
Wikipedia)
O IIS (Internet Information
System)
O Tomcat (Libre, del proyecto
Jakarta de Apache)
O Geronimo (Libre, orientado a
J2EE, del proyecto Jakarta de
Apache, actualmente se
encuentra en desarrollo)
O JBoss
O JOnAS
HERRAMIENTAS PARA EL DISEÑO WEB
 HERRAMIENTAS PARA EL DISEÑO WEB

O Los IDE (ambientes integrados de desarrollo) para

aplicaciones Web son muy numerosos.
O Considerar los que permitan trabajar con los
diferentes lenguajes para Web.
O Algunos son específicos para lenguajes del lado del
servidor. Por ejemplo, Visual Studio solo soporta
ASP.NET del lado del servidor.
O Existen IDE’s de buena cantidad, libres y gratuitos
de buena calidad: Eclipse, NetBeans, etc.
APLICATIVOS PARA CREAR SITIOS WEB EN MODO
DISEÑO (EDITORES HTML WYSIWYG)

 Entorno WYSIWYG (abreviatura inglesa para what

you see is what you get, o sea, “lo que ves es lo que
obtienes”).
 Los editores de texto HTML
 EDITORES HTML WYSIWYG

 Editor de CSS (Cascading

Style Sheets)
 Barras de herramientas
personalizables
 Marcas visibles
 Corrector ortográfico
automatizado
 Web:
http://www.kompozer.net/
 EDITORES HTML WYSIWYG

 Amaya es un
excelente y
completo
software gratuito
para el diseño,
creación y
manipulación de
archivos HTML,
CSS y XML.
 EDITORES HTML WYSIWYG

 Soporte de los estándares del

W3C (World Wide Web
Consortium).

 Utiliza la tecnología web como

CSS y Java Script.
 Se puede diseñar y crear
paginas web sin conocimiento
de código HTML.
 Permite previsualizar las
paginas web en casi todos los
navegadores web.
 Permite el uso de extinciones
como HTML y Java Script
 EDITORES HTML WYSIWYG

o Es un programa
completamente visual
y estructurado de
manera intuitiva.
o En tan sólo 5 pasos
se puede crear,
actualizar y publicar
sitios web.
o No se necesita
conocimientos de
programación.
HTML

El HTML (Hyper Text Markup

Language) es el lenguaje con
el que se escriben las páginas
web. Está compuesto por
etiquetas, que marcan el
inicio y el fin de cada elemento
del documento.
 ESQUEMA DE UN DOCUMENTO HTML

Una página HTML tiene dos secciones muy bien definidas que
son la cabecera:

<head>
</head>

Y el cuerpo de la página:

<body>
Cuerpo de la página.
</body>

Todo el texto que dispongamos dentro del <body> aparece dentro del
navegador tal cual lo hayamos escrito.
…ESQUEMA DE UN DOCUMENTO HTML
…ESQUEMA DE UN DOCUMENTO HTML
 ¿QUÉ SON LOS ATRIBUTOS DE LAS ETIQUETAS?

Muchas etiquetas llevan atributos. Los mismos proveen de mayor información a los
elementos HTML.
Los atributos siempre van con la estructura: nombre="valor".
Los atributos siempre van en la etiqueta de apertura.
Los valores siempre hay que ponerlos entre comillas.

Un ejemplo de los atributos sería:

LOS QUE ESTAN EN NEGRITA SE PUEDEN ESCRIBIR
DIRECTAMENTE
 PARTES DE UN ELEMENTO HTML

Aunque en ocasiones se habla de forma indistinta de "elementos" y "etiquetas", en

realidad un elemento HTML es mucho más que una etiqueta, ya que está formado
por:

■Una etiqueta de apertura.

■Cero o más atributos.
■Texto encerrado por la etiqueta.
■Una etiqueta de cierre.
 PRIMER DOCUMENTO HTML

EJEMPLO:

A continuación se muestra el código HTML de una página web muy sencilla:

<html>

<head>
<title>El primer documento HTML</title>
</head>

<body>
<p>El lenguaje HTML es <strong>tan sencillo</strong> que
prácticamente se entiende sin estudiar el significado
de sus etiquetas principales.</p>
</body>

</html>
… PRIMER DOCUMENTO HTML
 HEADINGS

<h1> nos dá el tipo de letra más grande.

<h6> nos dá el tipo de letra más pequeño.

<h1> al ser usado como título de una página

Web, es de suma importancia ya que es uno
de los parámetros que Google tiene en Nos definen el tamaño
cuenta, a la hora de indexar su sitio. de un título o cabecera.
Ejemplo de headings
 PÁRRAFOS

Los párrafos se definen con la etiqueta <p>.

 COMENTARIOS

La etiqueta <!-- ... --> se utiliza para insertar un comentario

dentro del código que estamos escribiendo.

<!-- Esto es un comentario. -->

Es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para
explicar mejor el código y son de gran ayuda en el momento que necesitemos
editarlo.
 SALTO DE LÍNEA

El salto de línea está definido con la etiqueta <br>. Es

utilizado cuando queremos terminar una línea sin
necesidad de terminar con el párrafo.

La etiqueta <br> obliga a saltar de línea dondequiera que la ubiquemos

ETIQUETAS BÁSICAS
 EJEMPLO: ETIQUETAS ANIDADAS
A continuación tenemos la etiqueta <font..> anidada dentro de la etiqueta <p..>.:

<p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial,

MS Sans Serif">Bienvenidos a www.ucvlima.edu.pe</font></p>

Este código daría como resultado el siguiente texto:

Bienvenidos a www.ucvlima.edu.pe

Es importante anidar bien las etiquetas, las etiquetas no se pueden 'cruzar', en nuestro
ejemplo hemos empezado por la etiqueta <p..>, antes de cerrar esta etiqueta hemos
puesto la <font..> por lo que antes de cerrar la etiqueta <p..> debemos cerrar la
etiqueta <font..>.

También es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas
de comienzo y de cierre
 ETIQUETAS ANIDADAS
Todas las etiquetas que componen HTML se pueden insertar unas dentro de otras. A
esto se le llama anidamiento.

Veamos un ejemplo:
<b> Texto en negrita </b>
<b> Texto en negrita <i> Texto en cursiva y negrita </i> </b>
con esto veremos:
Texto en negrita
Texto en negrita ,Texto en cursiva y negrita

El anidamiento puede ser poniendo las etiquetas en cualquier

orden, pero siempre se ha de guardar simetría.

Esto es incorrecto:
<b> <i>... </b> </i>
Y esto es la forma correcta:
<b> <i>... </i> </b>
 LISTAS

Una lista es un párrafo

estructurado que contiene
una serie de elementos.

HTML define tres tipos de

listas:
Listas ordenadas
Listas no ordenadas
Listas de definiciones
 LISTA ORDENADA

Contenedor Tipo de lista Efecto visual

<ol>
1. ítem 1
<li> ítem 1 </li>
Lista ordenada 2. ítem 2
<li> ítem 2 </li>
3. ítem 3
</ol>

Las listas ordenadas comienzan con la etiqueta <ol> y para cada uno de los items de
la misma, utilizamos la etiqueta <li>.
 LISTA ORDENADA
EJEMPLO: El siguiente código HTML muestra un ejemplo sencillo de lista ordenada:

En la definición del type podemos colocar los siguientes valores:

A: Letras Mayúsculas (A, B, C,….)

a: Letras Minúsculas (a, b ,c..)
I: Numero romanos en Mayúsculas (I, II, III,…..)
i: Números romanos en Minúsculas (i, ii, iii ,..)
1: Numéricamente (1, 2,3…) (es la numeración por defecto y por tanto no habría que indicarla)

Dentro de cada Item se pueden agregar imágenes, párrafos, otras listas, etc.
LISTA ORDENADA
 LISTA DESORDENADA

Exponen la lista anteponiendo un punto, cuadrado o triángulo

negro.

Contenedor Tipo de lista Efecto visual

<ul>
 ítem 1
<li> ítem 1 </li>
No ordenada  ítem 2
<li> ítem 2 </li>
 ítem 3
</ul>

Las listas desordenadas comienzan con la etiqueta <ul> y para cada uno de los
Items de la misma utilizamos la etiqueta <li>.
 LISTA NO ORDENADA

Dentro de cada Item se pueden agregar imágenes, párrafos, otras listas, etc.
 LISTA DE DEFINICIONES

Se utilizan para definir términos.

Contenedor Tipo de lista Efecto visual

ítem 1
<dl>

<dt>Término</dt> definición 1
Definición
<dd>Definición</dd> ítem 2

</dl> definición 2

Las listas de definición se representan con la etiqueta <dl>.

Los términos de las mismas con <dt>.
La definición de esos términos comienza con <dd>.
 …LISTA DE DEFINICIONES

Se utilizan para definir términos.

Las listas de definición se representan con la etiqueta <dl>.

Los términos de las mismas con <dt>.
La definición de esos términos comienza con <dd>.
 LISTA DE DEFINICIONES
EJEMPLO:
El siguiente código HTML muestra un ejemplo sencillo de lista de definición:
<html>
<head><title>Ejemplo de etiqueta DL</title></head>
<body>
<h1>Metalenguajes</h1>

<dl>
<dt>SGML</dt>
<dd>Metalenguaje para la definición de otros lenguajes de marcado</dd>

<dt>XML</dt>
<dd>Lenguaje basado en SGML y que se emplea para describir datos</dd>

<dt>RSS</dt>
<dt>GML</dt>
<dt>XHTML</dt>
<dt>SVG</dt>
<dt>XUL</dt>
<dd>Lenguajes derivados de XML para determinadas aplicaciones</dd>
</dl>

</body>
</html>
LISTA DE DEFINICIONES
 TABLAS
o Definimos las tablas con la etiqueta <table>.
o La tabla está dividida en filas definidas con la etiqueta <tr>.
o Y a su vez cada fila dividida en celdas definidas con la etiqueta
<td>.
o Las celdas pueden contener texto, imágenes, formularios, listas,
otras tablas, etc.
…TABLAS
…TABLAS
MÁRGENES DE LA CELDA
Espaciado entre celdas
 Leyendas entre tablas

Las leyendas de la tabla por lo general indican de que se trata

la tabla, la etiqueta CAPTION sirve para este fin
 Alineación de tablas

Para alinear la tabla se realiza mediante el atributo ALIGN

 Alineación de celdas
La alineación horizontal ALIGN define alineación a la izquierda LEFT o a la
derecha RIGHT o al centro CENTER
La alineación vertical VALIGN define la alineación superior TOP la inferior
BOTTOM y la central MIDDLE
 Celdas que abarcan filas y columnas
Para crear celdas que abarcan filas se utiliza el atributo ROWSPAN y para
columnas COLSPAN veamos un ejemplo.
Combinando filas
 HIPERVÍNCULOS

Un hipervínculo es un
enlace, normalmente entre
dos páginas web de un
mismo sitio.
La parte activa del enlace puede
ser también una imagen en lugar
de texto y el esquema sería el
siguiente:

<a href="url del documento"><IMG SRC="fichero imagen"></a>

El elemento más importante que tiene una página de internet es el

hipervínculo, estos nos permiten cargar otra página en el navegador.
 HIPERVÍNCULOS

se conocen como
hiperenlaces, enlaces o
links.

un enlace también puede apuntar a una página de otro sitio web, a un

fichero, a una imagen, etc. Para navegar al destino al que apunta el
enlace, hemos de hacer clic sobre él.
 HIPERVÍNCULOS

La marca de hipervínculo a otra página del mismo sitio tiene la siguiente

sintaxis:

<a href="pagina2.html">Noticias</a>

Lo que se encuentra entre el comienzo de marca y el fin

de la marca es el texto que aparece en la página
(normalmente subrayado).
 HIPERVÍNCULOS

Una propiedad se incorpora en el comienzo de

una marca y tiene un nombre y un valor.

El valor de la propiedad debe ir entre comillas

dobles.

<a href="pagina2.html">Noticias</a>

La propiedad href del elemento "a" hace referencia a la página

que debe mostrar el navegador si el visitante hace clic sobre el
hipervínculo.
HIPERVÍNCULOS
HIPERVÍNCULOS
 EJEMPLO

La sintaxis para disponer un hipervínculo a otro sitio de

internet es:

<a href="http://www.google.com">Buscador Google</a>

<html>
<head>
</head>
<body>
<a href="http://www.google.com">Buscador Google</a>
</body>
</html>
¿CÓMO INSERTAMOS IMÁGENES EN UN ARCHIVO
HTML?
Para insertar imágenes en un sitio usaremos la etiqueta
<img>.

Esta etiqueta es vacía, es decir que debemos utilizarla con

el atributo src para que muestre la imagen.

La etiqueta <img> no tiene cierre.

 EJEMPLO

El elemento "a" tiene una propiedad target que nos permite indicar
que la referencia del recurso sea abierto en otra página.
Esta propiedad se llama target y debemos asignarle el valor "_blank"
para indicar que el recurso sea abierto en otra ventana.

<html>
<head>
</head>
<body>
<h1>Apertura de enlaces en el mismo navegador y en otra instancia del
navegador</h1>
<p>
<a href="http://www.uigv.edu.pe">Universidad Inca Garcilaso de la
Vega</a>
<br>
<a href="http://www.rpp.com.pe" target="_blank">Radio
Programas</a>
</p>
</body>
</html>
 ¿CÓMO INSERTAMOS IMÁGENES EN UN ARCHIVO
HTML?

WWW
La siguiente página muestra una imagen llamada
foto1.jpg (La imagen se encuentra almacenada en el
servidor en la misma carpeta donde se localiza esta
página)
 ¿CÓMO INSERTAMOS IMÁGENES EN UN ARCHIVO
HTML?

Si la imagen se encuentra en una WWW

subcarpeta llamada imagenes, luego la
sintaxis para recuperarla será:

<img src="imagenes/foto1.jpg" alt="Pintura geométrica">

Es decir, antecedemos al nombre de la imagen el

nombre de la carpeta y la barra /
 ¿CÓMO INSERTAMOS IMÁGENES EN UN ARCHIVO
HTML?
WWW

Si la imagen se encuentra en una carpeta padre

de donde se encuentra la página HTML luego la
sintaxis será:

<img src="../foto1.jpg" alt="Pintura geométrica">

Es decir, le antecedemos .. y la barra / al nombre de

la imagen

Si queremos subir dos carpetas luego escribimos:

<img src="../../foto1.jpg" alt="Pintura geométrica">
 ¿CÓMO INSERTAMOS IMÁGENES EN UN ARCHIVO HTML?

WWW
si queremos acceder a una imagen que
se encuentra en una carpeta llamada
imagenes pero que está al mismo nivel:

<img src="../imagenes/foto1.jpg" alt="Pintura geométrica">

Primero le indicamos que subimos al

directorio padre mediante los dos
puntos .. y seguidamente indicamos
el nombre de la carpeta y la imagen
a mostrar.
 WWW EJERCICIO

Crear la estructura de directorios (de la figura),

páginas html e imágenes.
A Pagina01.html
Se pide:

Imagen01.jpg Implementar el código html de la página1.html

Imagen02.jpg añadiendo referencias (HIPERVÍNCULOS) a las
imágenes y páginas de tal manera que se
observe en el navegador web un listado de
B Imagen03.jpg
todas las imágenes:

Imagen01.jpg
Imagen02.jpg
B1 Pagina02.html Imagen03.jpg
Imagen04.jpg

Pagina03.html Y debajo un enlace a cada una de las páginas

C html.
Imagen04.jpg

C1 Imagen05.jpg