Desarrollo de aplicaciones Web
Capa 1: HTML
PEDRO ALBERTO ARIAS QUINTERO
Guión de la Conferencia
1.
2.
3.
4.
5.
6.
Motivación
◦ Tecnologías básicas de Internet
Pre – test
◦ Manejo de etiquetas html
Contenido
◦ Arquitecturas Web
◦ Html body y etiquetas básicas
◦ Enlaces
◦ Tablas
◦ frames
Resumen
Pos- test
Actividades de la lección
◦
◦
Lecturas
Tareas
2
MOTIVACION Tecnologías Básicas Aplicadas para
Internet
FTP
(Transferencia
de Archivos)
CORREO
(E-mail)
Algunos
servicios
ofrecidos en
Internet
Noticias o
NEWS
HTTP (para
Hipertexto)
Seguridad (en
transacciones)
3
MOTIVACION -Tecnologías Básicas usadas para
Internet











HTTP
HTML
JavaScript
Applets (Java)
ASP
PHP
JSP
ActiveX del Servidor
XML, SSL y WAP
DHTML, XHTML, SGML
Programación CGI, PERL, ETC
miércoles, 07 de octubre de 2015
4
MOTIVACION - Cómo funciona la
Web?
COMPUTADOR
La Web es conocida como
un sistema cliente servidor. Su
computadora es el cliente
y la computadora remota
que alberga los archivos
electrónicos es el servidor.
miércoles, 07 de octubre de 2015
5
Tecnologías Básicas Aplicadas para Internet
6
MOTIVACION - Ejemplo del
funcionamiento
1.
Visitar página Web …. http://www.rae.es
miércoles, 07 de octubre de 2015
URL
MOTIVACION - Ejemplo
(Continuación)
COMPUTADOR DEL USUARiO
El adhesivo que mantiene
entrelazada la Web es llamado
hipertexto e hiperenlaces
miércoles, 07 de octubre de 2015
7
Tecnologías Básicas Aplicadas para Internet
MOTIVACION - Algo de Historia de
la Web

Originalmente creada en 1990 en CERN (Laboratorio
Europeo de Física de Partículas)

Ahora es administrado por The World Wide Web
Consortium (Consorcio de la Red Mundial), quien promueve
el crecimiento de la Web desarrollando especificaciones y
software de referencia

NCSA Mosaic el primer navegador Web. Desarrollado por el
Centro Nacional para las Aplicaciones de Supercómputo o
NCSA
miércoles, 07 de octubre de 2015
8
9
MOTIVACION - Terminología
Importante
Servidor
Web
Sitio
Web
Hipertexto
• Apache HTTP Server
• Internet Information Server
• Personal Web Server
• Tomcat
http://www.rae.es
ftp://rtfm.mit.edu/pub/
URLs
news:rec.gardens.roses
http://pamplonita:8080
Navegador
Web
miércoles, 07 de octubre de 2015
2. Pre-test.


1)¿Adónde le dirige el
siguiente hipervínculo ?
<a href="curso.zip"> Curso
Internet</a>
a.
b.
c.
d.
A un archivo de descarga
A una dirección de e-mail
A un archivo de otra web
A otro archivo de la misma
web

2) Donde usa las siguientes
etiquetas <INPUT>,
<OPTION>
a. Marcos
b. Formularios
c. Tablas
d. Texto
3) Esta etiqueta se usa <UL>
a.
b.
c.
d.
Una tabla
Un párrafo
Una lista .
En el body.
4) Relaciona
la etiquetas con alguno
de sus atributos <FORM>
a. cols="20%,80%"
b. method="POST"
c. alt="Actividades"
d. href ="#actividades"
miércoles, 07 de octubre de 2015
10
Arquitecturas Web
Correlacionada
con el diseño (lección siguiente) las aplicaciones web se
caracterizan por la facilidad de:
Uso de cara al usuario final,
• Administración centralizada
• Soporte al comercio electrónico
•
Hechos
que han motivado un gran número de soluciones de desarrollo
soportada en capas.
Las
Webapps suelen encontrarse con importantes problemas de
escalabilidad, disponibilidad, seguridad, integración... Esta problemática se
ha resueltp utilizando la división de las aplicaciones en capas que
normalmente serán tres:
◦ una capa que servirá para guardar los datos (base de datos),
◦ una capa para centralizar la lógica de negocio (modelo)
◦ y por último una interfaz gráfica que facilite al usuario el uso del
sistema.
miércoles, 07 de octubre de 2015
11
Arquitecturas Web: Modelo de 3
capas
Permite que las
modificaciones
y mejoras sean
automáticament
e aprovechadas
por el conjunto
de los usuarios,
reduciendo los
costes de
mantenimiento.
miércoles, 07 de octubre de 2015
12
Contenido Páginas Web - HTML

Son documentos que se escriben con código
HTML
HIPERTEXT - Hipertexto
HTML
LANGUAGE - Lenguaje
MarkUp - De Marcas (tags)
miércoles, 07 de octubre de 2015
13
Capa 1: Elementos de un
documento HTML
•
•
•
•
•
•
•
•
•
•
•
Texto
Scripts
Programas Java
Hiperenlaces
Tablas
Elementos Multimedia
Imágenes
Animaciones
Video
Audio
Formularios
miércoles, 07 de octubre de 2015
14
Qué necesitas para comenzar?
Notepad

Un procesador de
Texto
Wordpad
FrontPage
Dreamweaver
Internet Explorer
Netscape Navigator

Navegador o
Browser
miércoles, 07 de octubre de 2015
Opera
HotJava
15
Ejemplo 01
Página Básica HTML

<XXX> Este es el inicio de una etiqueta.
</XXX> Este es el cierre de una etiqueta.
Toda página HTML inicia con esta etiqueta
<HTML>
<HEAD>
<TITLE> Título de la página </TITLE>
</HEAD>
<BODY> Aquí van las etiquetas que visualizan la página
</BODY>
</HTML>
Lo que ves en el navegador
miércoles, 07 de octubre de 2015
16
Ejemplo 02
Etiquetas y Atributos






ETIQUETA SIMPLE
<ETIQUETA> </ETIQUETA>
ETIQUETA CON ATRIBUTOS
<ETIQUETA ATRIBUTO1=valor1 ATRIBUTO2=valor2 ATRIBUTO3=valor3>
</ETIQUETA>
EJEMPLO
<body bgcolor="#FFFFFF" text="#000000" link="#0033FF"
vlink="#993366" alink="#0000FF" tracingsrc="acrobat.gif"
tracingopacity="20">
miércoles, 07 de octubre de 2015
17
Ejemplo 03 18
Etiquetas Básicas para el Contenido
<P>
Párrafo
<OL>
Lista ordenada
<H1>
Encabezados
<!-- -->
COMENTARIO
<BR>
Salto o Break
<SUB>
Subíndice
<B>
Negrilla (Bold)
<SUP>
Superíndice
<I>
Cursiva (Italic)
<UL>
Lista sin orden
<PRE>
Preformateado
<LI>
Lista con orden
miércoles, 07 de octubre de 2015
Caracteres Especiales
<
&lt; - Less than
ñ
&ntilde;
>
&gt; - greater than
ü
&uuml;
&
&amp; - ampersand
¿
&#191;
“
&quot; double quotation
¡
&#161;
á
&aacute;
Á
&Aacute;
é
&eacute;
É
&Eacute;
í
&iacute;
Í
&Iacute;
ó
&oacute;
Ó
&Oacute;
ú
&uacute;
Ú
&Uacute;
miércoles, 07 de octubre de 2015
19
Contenido Enlaces en Páginas
Web
En general, los enlaces tienen la siguiente
estructura:

<A HREF="xxx"> yyy </A>

Destino del link o
enlace
Texto que se observa
en el navegador
2011
20
Tipos de Enlaces (I)

Vamos a distinguir cuatro tipos de enlaces:
◦ Enlaces dentro de la misma página
Se Supone que las páginas
están en el mismo DIR
<A HREF="#marca"> YYY </A>
<A HREF="#final"> Pulsa para ir al final</A>
◦ Enlaces con otra página nuestra
◦ <A HREF=“pagina"> YYY </A>
◦ <A HREF="mipag2.html"> Ejemplo 2 </A>
◦ <A HREF="cap4.html#alinear"> Capitulo 4 </A>
<A HREF= "../mipag2.html"> Capitulo 4 </A>
DIR anterior
miércoles, 07 de octubre de 2015
21
Ejemplo 04
Tipos de enlaces (II)
◦ Enlaces con una página fuera de nuestro sistema
<A HREF="http://home.netscape.com/">
Netscape </A>
◦ Enlaces con una dirección de email


<A HREF="mailto: dirección de email"> Texto </A>
Comentarios al <A HREF="mailto: [email protected]"> Profe
Arias</A>
miércoles, 07 de octubre de 2015
22
Ejemplo 05
Imágenes en una documento HTML

La estructura de la etiqueta es:
<IMG SRC="imagen.gif">
<IMG SRC="imagen.gif" ALT="descripción">


Ubicación de la
Imagen. Similar a
HREF
Texto que se ve al
pasar el Mouse
sobre la imagen
miércoles, 07 de octubre de 2015
23
Ejemplo 06
Sonidos en un documento HTML
 Etiqueta


de Microsoft Explorer
<BGSOUND SRC="fichero_de_sonido">
LOOP=n (número de veces que se repite)
 Etiqueta

para Netscape
<EMBED SRC="fichero_de_sonido" WIDTH=xxx HEIGHT=yy>

AUTOSTART="true" (arranca automáticamente)

LOOP="true" (se ejecuta ininterrumpidamente)
24
miércoles, 07 de octubre de 2015
Ejemplo 07
Tablas












<TABLE>
Resto de las etiquetas
</TABLE>
EJEMPLO:
<TABLE BORDER=“1”>
<TR>
<TD>fila1-celda1</TD>
<TD>fila1-celda2</TD>
</TR>
<TR>
<TD>fila2-celda1</TD>
<TD>fila2-celda2</TD>
</TR>
</TABLE>
Fila1-celda1
Fila1-celda2
Fila2-celda1
Fila2-celda2
miércoles, 07 de octubre de 2015
FILA
CELDA
25
Contenido Partes de un Formulario
Etiqueta de inicio:
<FORM ACTION=“XXX" METHOD=“YY" ENCTYPE=“ZZZ">
Cuerpo del formulario, con los distintos elementos para
poder introducir los datos.
Botones de envío y de borrado.
Etiqueta de cierre. </FORM>
miércoles, 07 de octubre de 2015
26
Formularios – <FORM>
Indica que aplicación o programa
llamar al enviar la forma
<FORM ACTION=“XXX" METHOD=“YY">
 </FORM>

Un formulario
presenta una manera
de capturar datos
mediante elementos
de HTML y enviarlos al
servidor para ser
procesados
POST / GET
miércoles, 07 de octubre de 2015
27
Elementos de un Formulario
Ejemplo 08
Caja / Area de Texto
FORM
Botones
RadioButtons
Menú
Listas
miércoles, 07 de octubre de 2015
28
Ejemplo 09
Formularios - Cajas de Texto

<input type="text" name="nombre" value="ricardo" size="20">
Indica que es
de TEXTO.
longitud
type="password"
miércoles, 07 de octubre de 2015
29
Ejemplo 10
Formularios – Areas de Texto
<textarea name="perfil" cols="30" rows="6"></textarea>
Nombre
del objeto
ancho
filas
miércoles, 07 de octubre de 2015
30
Ejemplo 11

<input type="submit" name="Botonaceptar" value="ACEPTAR">
Tipo:
SUBMIT RESET
Formularios - Botones
miércoles, 07 de octubre de 2015
31
Ejemplo 12
Formularios - RadioButtons
<input type="radio" name="sexo" value="f" checked>
El nombre
debe ser
igual para
ambos
elementos
miércoles, 07 de octubre de 2015
32
Ejemplo 13
Formularios - Checkbox

<
input type="checkbox" name="liquido" value="limonada">
Nombres
Diferentes
para cada
elemento
miércoles, 07 de octubre de 2015
33
Ejemplo 14
Formularios – Listas y Menú
<select name="select">

<option value="1" selected>Matem&aacute;ticas</option>

<option value="2">Ecolog&iacute;a</option>
 </select>

Menú
Lista
miércoles, 07 de octubre de 2015
34
Ejemplo 15
Formularios - Campos Ocultos

<input type="hidden" name="ValorAsignatura" value="1.000.000">
Campo
Oculto
miércoles, 07 de octubre de 2015
35
FRAMES - Marcos
Frame1.
html
Contenido.html
index.html
Frame2.html
80 %
20 %
Esquema de definición de páginas con frames
miércoles, 07 de octubre de 2015
36
Herramientas para Frames
Con Borde o sin borde separador
% ó Pixeles
Tipos de Marcos
(Frames) ofrecidos por
Dreamweaver
miércoles, 07 de octubre de 2015
37
Código con Frames















Indica que la división es vertical
(col) y no horizontal (rows)
<HTML>
<HEAD>
<TITLE>Mi pagina con frames</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC=“izquierda.html">
<FRAME SRC=“derecha.html"
NAME="principal">
</FRAMESET>
<NOFRAMES>
<BODY>
Estas utilizando un navegador que no
soporta frames.
<P>Pulsa para visitar mi <A
HREF=“derecha.html"> p&aacute;gina</A>.
</BODY>
</NOFRAMES>
</HTML>
Se usa para navegadores
sin soporte de Frames
miércoles, 07 de octubre de 2015
38
Nombre de los Frames

Obsérvese que en la etiqueta del segundo se ha
incluido el atributo NAME="principal", pero no así en el
primero.

El motivo es que se necesita dar un nombre al
segundo frame, pues, en el documento del primer frame
va a haber unos enlaces que van a ir dirigidos hacia él. En
este caso sólo tenemos dos frames, pero podría haber
más, y es necesario distinguirlos unos de otros. Y el
primero no necesita nombre, pues no va a haber enlaces
en el segundo dirigidos hacia él
miércoles, 07 de octubre de 2015
39
FRAME de la Izquierda

<HTML>
<HEAD>
<TITLE> Indice </TITLE>
</HEAD>
<BODY BGCOLOR="#FFBB00">
<P><A HREF=“Ejemplo_01.html"
TARGET="principal"> EJEMPLO 1 </A>
<P><A HREF=“Ejemplo_02.html"
TARGET="principal"> EJEMPLO 2 </A>
</BODY>

</HTML>







Links al FRAME de la
derecha… llamado
PRINCIPAL en este caso
miércoles, 07 de octubre de 2015
40
Ejemplo 16
Acerca del TARGET
_top
_blank
_self
TARGET="_blank". Hace
que se abra una nueva
copia del navegador, y el
enlace activado se carga en
ella, a pantalla completa.
TARGET="_self". Hace que
el enlace se cargue en el
propio frame.
TARGET="_top". Hace que el enlace se cargue a pantalla
completa, suprimiendo todos los frames, pero sin que se
cargue una nueva copia del navegador
miércoles, 07 de octubre de 2015
41
4. Resumen.

Esta lección

1) Atributos básicos
2)tablas
3)marcos
4)Prácticas…
miércoles, 07 de octubre de 2015
42
5. Post-test.


1)¿Adónde le dirige el
siguiente hipervínculo ?
<a href="curso.zip"> Curso
Internet</a>
a.
b.
c.
d.
A un archivo de descarga
A una dirección de e-mail
A un archivo de otra web
A otro archivo de la misma
web

2) Donde usa las siguientes
etiquetas <INPUT>,
<OPTION>
a. Marcos
b. Formularios
c. Tablas
d. Texto
3) Esta etiqueta se usa <UL>
a.
b.
c.
d.
Una tabla
Un párrafo
Una lista .
En el body.
4) Relaciona
la etiquetas con alguno
de sus atributos <FORM>
a. cols="20%,80%"
b. method="POST"
c. alt="Actividades"
d. href ="#actividades"
miércoles, 07 de octubre de 2015
43
6. Actividades de la Semana.
Lecturas de la lección.
Por favor acceda a la siguiente página:
http://es.wikipedia.org/wiki/JavaScript
Preguntas:
Indague sobre la
diferencia entre lenguajes
interpretados y lenguajes
compilados y presente al
menos 2 ejemplos por
tipo.
miércoles, 07 de octubre de 2015
44
ACTIVIDADES

Revisión de documentación - link de la
siguiente diapositiva.

Exposición de tema asignado

Diseño de pagina web con html y
dreanweawer.

Montaje de un servidor WEB y alojamiento
de la pagina en dicho servidor.
6. Actividades de la Semana.
Tarea
de la lección.
Revisa
los siguientes link
http://sciencestage.com/v/20579/tutorial-bsico-de-html.-creacin-de-pginas-web...-tema-i.html
http://sciencestage.com/v/20624/tutorial-bsico-de-html-creacin-de-pginas-web-tema-ii.html
http://sciencestage.com/v/20511/tutorial-bsico-de-html-creacin-de-pginas-web-tema-iii.html
http://sciencestage.com/v/20594/tutorial-bsico-de-html-creacin-de-pginas-web-tema-iv.html
http://sciencestage.com/v/20582/tutorial-bsico-de-html-creacin-de-pginas-web-tema-v.html
http://sciencestage.com/v/20594/tutorial-bsico-de-html-creacin-de-pginas-web-tema
miércoles, 07 de octubre de 2015
46
Descargar

Plantilla Presentaciones UIS