Beruflich Dokumente
Kultur Dokumente
Versin: 02
Cdigo: GFPI-F-019
GUA DE APRENDIZAJE N
001
Programa
de
Cdigo:
228106
Anlisis
y Desarrollo de Sistemas de
IDENTIFICACIN DE LA GUIA DE APRENDIZAJE
Formacin:
Versin: 102
Informacin
Nombre del Proyecto:
Cdigo:
Actividad
(es)
del
Proyecto:
Construir el Sistema de
Informacin
en
ambiente Web
Resultados
de
Aprendizaje:
Representa el bosquejo
de
la
solucin
al
problema
presentado
por
el
cliente,
mediante
la
elaboracin
de
diagramas de casos de
uso, apoyado
en
el
anlisis
del
informe
de
requerimientos,
al
confrontar la situacin
problmica
con
el
usuario segn normas
y protocolos de la
organizacin
* Reconocer los
conceptos de pgina
Web, sitio Web,
protocolo HTTP,
navegador Web,
servidor Web,
hipertexto, HTML.
* Identificar la
estructura de una
pgina Web en HTML y
sus etiquetas bsicas.
* Emplear etiquetas
para dar formato a los
textos de una pgina
Web.
* Utilizar las etiquetas
necesarias para definir
diferentes tipos de
enlaces en una pgina
Web.
* Usar etiquetas para
fijar imgenes dentro de
una pgina Web.
* Crear tablas al interior
de una pgina Web.
Competencia:
Ambiente de
formacin
ESCENARIO
(Aula,
Laboratorio,
taller, unidad
productiva)
y elementos
y condiciones
de seguridad
industrial,
salud
ocupacional
y medio
ambiente
MATERIALES
FORMACIN
DEVOLUTIV
O
(Herramien
ta - equipo)
DE
CONSUMIB
LE
(unidades
empleadas
durante el
programa)
Teleinformti
ca
Ambiente
16
Teleinformti Computado
Analizar
los ca. Centro de res
requerimientos
Automatizaci
del cliente para n Industrial.
construir
el Ambiente
sistema de
con
16
informacin
equipos
de
cmputo
y
TV
Marcadore
s
(2),
Resma de
papel
carta
Pgina 1 de 20
la
Versin: 02
Cdigo: GFPI-F-019
gua 18 horas
INTRODUCCIN
Pgina 2 de
20
Pgina 3 de
20
Hipertext
Hipertext
o
o
Sitio
Web
Sitio Web
HTM
L
Servidor
Servidor
Web
Web
Navegad
Navegad
or
Web
or Web
TCP/IP
TCP/IP
HTTP
HTTP
Pgina 4 de
20
Estructura bsica
Ejemplo Cdigo
Como ejercicio inicial vamos a crear una pgina bsica en HTML utilizando el
programa notepad ++, al abrir dicho programa digitaremos en un archivo nuevo el
cdigo de ejemplo que se encuentra en la parte superior.
Guardar el archivo con extensin html y depositarlo en una carpeta en el disco local
c: llamada pagina_prueba.
Nota: se recomienda que los nombres de las pginas, archivos o carpetas que se
escriban en un lenguaje de programacin que sea orientado a la web, como es el
caso de HTML, sean en minsculas y sin espacios, ya que ms adelante pueden
ocasionar problemas la subirlos al servidor.
Pgina 5 de
20
A menudo encontramos, en pginas web y otros documentos html, enlaces que nos
conducen a otras pginas, documentos o aplicaciones. Cuando se abre la nueva
pgina o documento enlazado puede suceder que lo haga reemplazando a la pgina
de la que venimos o abriendo una nueva ventana del explorador.
La orden de enlazar con otra pgina web u otro documento se resuelve, en el
lenguaje html, con la etiqueta a que significa ancla o anchor en la expresin
anglosajona. Al encontrar un texto etiquetado con una etiqueta a, el cliente web
(Mozilla, IExplorer, Netscape, etc) lo presenta en la pantalla resaltado en color y
subrayado. Si el usuario de la pgina hace clic sobre ese texto marcado, el navegador
pedir al servidor otra pgina web o abrir otro documento.
Para ampliar los conceptos consultar la presentacin HTML Body y Texto.ppt
Etiquetas para imagen:
La etiqueta para las imgenes es <img ............ >, todo lo dems que va dentro son
detalles que se le aaden y que son necesarios (todos).
Esta etiqueta es algo especial, pues as como las etiquetas de prrafo y de ttulos (y
muchas otras que hemos visto) necesitan obligatoriamente de su correspondiente
etiqueta de cierre, la etiqueta de imagen no tiene etiqueta de cierre.
P.E:
1. <IMG SRC="amiguito.gif"> hace el llamado a una imagen que se encuentra en la misma carpeta
que el index.html
2. <IMG SRC=" imagenes/amiguito.gif"> hace llamado a una imagen que se encuentra en la carpeta
imgenes y que sta debe estar en la misma carpeta del index.
Pgina 6 de
20
Cualquiera de los mtodos para guardar imgenes en la pgina principal son vlidos, se recomienda
utilizar el segundo ya que una pgina puede llegar a tener muchsimas imgenes, y ser mejor tenerlas
organizadas en carpetas.
Pgina 7 de
20
Pgina 8 de
20
Vamos a crear un sitio que hable acerca de los 5 reinos de la naturaleza, para ello
vamos a construir una pgina index.html en una carpeta nueva, la pgina debe
cumplir con las siguientes caractersticas:
Una imagen de fondo.
Imagen general del tema la cual servir de introduccin junto con un texto que
se pueden descargar de Internet.
El texto de introduccin debe estar justificado.
Debe llevar un subttulo que diga Listado de Reinos.
Crear una lista ordenada para cada reino tal cual se muestra en la imagen en la
parte superior.
Luego vamos a crear las pginas secundarias del sitio, una para cada reino, por lo
que sern 6 en total incluyendo index.
Cada
Resultado de la tabla
Pgina 10 de
20
Pgina 11 de
20
Pgina 12 de
20
Las tablas tambin manejas atributos entre sus etiquetas. Ver y aplicar algunos atributos a las
tablas creadas teniendo en cuenta la informacin de la siguiente pgina web
http://www.mclibre.org/consultar/amaya/xhtml/xhtml_tablas_atributos.html
a. Utilizando tablas HTML hacer la siguiente pgina web
Pgina 13 de
20
Pgina 14 de
20
Pgina 15 de
20
La pgina principal o index debe tener el texto e imagen en una tabla como se
observa en la muestra.
Las pginas de cada uno de los reinos de la naturaleza deben contener el texto en
una tabla con borde = 0. Para las imgenes se deber construir una tabla aparte y
deben tener el mismo tamao conservando la relacin ancho y altura para no
distorsionarlas.
Se aconseja que el tamao del texto sea tamao 4 y la fuente Arial.
Tcnicas e Instrumentos
de Evaluacin
Pgina 16 de
20
Evidencias de
Desempeo:
Instrumento con ejercicios
con los temas tratados en
la presente gua de
aprendizaje
DE LA CONSTRUCCIN
DE ALGORITMOS, COMO
PARTE DE LA SOLUCIN A
SITUACIONES
PLANTEADAS,
UTILIZANDO LENGUAJES
DE
PROGRAMACIN
ORIENTADOS A OBJETOS.
Preguntas
y
ejercicios
sobre
etiquetas
HTML
planteadas
en
un
cuestionario CT-001
Materiales
formacin
RECURSOS
PARAdeEL
APRENDIZAJE
Materiales de formacin
devolutivos:
(Equipos/Herramientas)
ACTIVIDADES
DEL
PROYECTO
DURACI
N
(Horas)
Descripcin
Construir
el Sistema
de
Informaci
n
en
ambiente
Web
(consumibles)
44
Computador
de escritorio
Cantidad
16
Descripcin
Cantidad
Marcadores
Resma papel
carta
3
2
Especialidad
Ingeniero de
sistemas
GLOSARIO DE TERMINOS
Directorio web
Las pginas que se incluyen en la base de datos del directorio son previamente
revisadas por humanos (no es automatizado como los crawlers o araas). No se
agrega la pgina completa, sino nicamente algunos datos tales como el ttulo, la
URL y un breve comentario redactado especialmente que explique el contenido, y se
la ubica en una categora. Un ejemplo es www.yahoo.com
DNS
Servidor de Nombres de Dominio. Servidor automatizado utilizado en el internet cuya
tares es convertir nombres fciles de entender (como www.panamacom.com) a
direcciones numricas de IP.
Dominio
Pgina 17 de
20
Cant
Pgina 19 de
20
Pgina 20 de
20