Guia 1maquetacion

SERVICIO NACIONAL DE APRENDIZAJE SENA
SISTEMA INTEGRADO DE GESTIN

Procedimiento Ejecucin de la Formacin Profesional
Integral
GUA DE APRENDIZAJE
Versin: 02
Fecha: 30/09/2013
Cdigo: F004P006-GFPI
GUA DE APRENDIZAJE N
1
1. IDENTIFICACIN DE LA GUIA DE APRENDIZAJE
Programa
Formacin:
de Cdigo:228101
Versin: 102
Nombre del Proyecto:
228106
TGO PRODUCCIN DE MULTIMEDIA
Cdigo:
Fase del proyecto: Ejecucin

Actividad (es) de
Aprendizaje:
Actividad
Proyecto:
(es)
del
Realizar la maquetacin y
prototipado del sitio web
utilizando HTML y CSS
Crear la estructura del

sitio, la pgina principal
y organizacin
mediante capas con el
uso de HTML y CSS,
XHTML/ CSS, HTML5.
Ambiente de
formacin
ESCENARIO(A
ula 203
MATERIALES
FORMACIN
DEVOLUTIV
O
20
computado
res
DE
CONSUMIB
LE
Marcadore
s
Convertir el diseo PSD

en cdigo HTML para su
funcionamiento en
Internet.
Resultados
Aprendizaje:
de Competencia:
Estructurar los elementos de

la multimedia a travs de
Integrar los elementos

multimediales
de
acuerdo
con
un
diseo establecido.
Pgina 1 de 16

GUA DE APRENDIZAJE

Proceso Gestin de la Formacin Profesional Integral
Procedimiento Ejecucin de la Formacin Profesional Integral
Versin: 02
Fecha: 30/09/2013
Cdigo: F004-P006GFPI
lenguajes de maquetacin
web.
Duracin de
( en horas):
la
gua
40 horas
Maquetar una web consiste en convertir el diseo PSD y la arquitectura del lugar en
cdigo para el programador, tales como encabezados, columnas, mens laterales, etc.
Esta es una profesin muy demandada que requiere de conocimientos de diversas
disciplinas, como estilos HTML/ XHTML/ CSS3, HTML5/CSS3
La maquetacin es fundamental a la hora de obtener unos resultados de calidad en el
diseo de tu pgina web y te simplificar la vida, no slo al crear la web, sino tambin
a la hora de mantenerla
El objetivo de esta
gua es orientar al aprendiz para
desarrollar
sitios web
compatibles, amigables y modernos. Convirtiendo
un diseo realizado con
herramientas de diseo profesionales a una web totalmente funcional con el uso de
HTML y CSS3
3. ESTRUCTURACION DIDACTICA DE LAS ACTIVIDADES DE APRENDIZAJE
3.1 Actividades de Reflexin inicial.

Fecha: 08 de abril de 2015
Pgina 2 de
16

GUA DE APRENDIZAJE

Versin: 02
Fecha: 30/09/2013
Tcnica Didctica: Socializacin
Cuales son los aspectos tcnicos a tener en cuenta en la creacin de un sitio web
Ver el siguiente video sobre la importancia del diseo profesional de sitios web
https://www.youtube.com/watch?v=aiRRKFENZsQ
https://www.youtube.com/watch?v=o6LXBgdSp-c
Socializa con los compaeros y el instructor sobre sobre los videos y da a conocer
tu opinin.
3.2 Actividades de contextualizacin e identificacin de conocimientos

necesarios para el aprendizaje.
Fecha: 08 de abril de 2015
Tcnica Didctica: Solucin de problemas reales
Actividad 1
En grupos de trabajo Consulte los siguientes trminos:
Que es Maquetacin Web
Que es HTML
Etiquetas
Que es CSS.
Definir Front-End (cliente) y Definir Back-End

o
Definicin
Plataformas
Clientes y Servidores en internet.
Sintaxis JavaScript y ActionScript
Que son en programacin: Variables, Condiciones, Ciclos, Funciones
Pgina 3 de
16

GUA DE APRENDIZAJE

Versin: 02
Fecha: 30/09/2013
Defina Programacin Orientada a Eventos y Programacin Orientada a Objetos
Duracin: 2 horas
Evidencia: Producto
Entrega: BlackBoard (Actividad No 1 consulta)
Material de Apoyo: http://www.cristalab.com/blog/que-significa-backend-y-frontend-enel-diseno-web-c106224l/
Actividad 2
Taller HTML
Estructura de una pgina Web
Con base en la lectura realizada, vamos a ver como es la estructura de una

pgina web.
<html> // en esta etiqueta inicia la pagina
<head>cabecera de la pgina</head> // ttulo de la pgina
<body> Cuerpo de la pagina
Aqu va propiamente el contenido de la pgina: fotos, prrafos, formularios,
etc. Por ejemplo, siguiendo con el ejemplo de la pgina anterior, el siguiente
cdigo
</body>
</html> // en esta etiqueta termina la pagina
Solicite a su Instructor los siguientes programas;
Notepad++
xampp-win32-5-6-3-0-VC11-installer
Pgina 4 de
16

GUA DE APRENDIZAJE

Versin: 02
Fecha: 30/09/2013
Instalar esos aplicativos en su equipo
Ejemplo 1
Digite el siguiente cdigo utilizando el Notepad++ (editor de HTML)
<br> Indica salto de lnea

<b></b> => Indica comienzo y fin de negrita.
<i></b> => Itlica.
Ejemplo 2
<html>
<head>
<title> Amigos del diseo web</title>
</head>
<body>
<p>Bienvenido al diseo web
<br /> En esta web encontrars informacin sobre la
asociacin y nuestra coleccin sitios de diseo.</p>
</body>
</html>
Pgina 5 de
16

GUA DE APRENDIZAJE

Versin: 02
Fecha: 30/09/2013
+++++++++++
<html>
<head>
<title>DISEO WEB</title>
</head>
<body>
<h1>Bienvenido a Diseo Web</h1>
<h2>Presentacin</h2>
<p> El navegador tambin ignora los saltos de lnea. As si dentro
de un prrafo colocamos varios saltos de lnea pulsando Enter,
estos no se vern. Como ya vimos para crear un salto de lnea
dentro de un prrafo, utilizamos la etiqueta. <br />
Tenemos las fotografas organizadas en diferentes categoras</p>
<h2>Contacto</h2>
<p align="center">Este texto se alinear al centro</p>
<p align="right">Este texto se alinear a la derecha</p>
<p align="left">Este texto se alinear a la izquierda</p>
<p> Si quieres comunicarte con nosotros
visita nuestra pgina de contacto.      Te
esperamos.</p>
</body>
</html>
Ejemplo 3
Uno de los elementos ms utilizados en una pgina web son las
imgenes, tanto para mostrar informacin como parte del propio
diseo de la pgina. Pueden ser fotografas o grficos creados por
programas como Photoshop, Illustrator. etc. Bsicamente, en
pginas web nos encontramos tres tipos de imgenes: GIF, PNG y
JPG.
Cuando queremos introducir una imagen, lo hacemos con la
Pgina 6 de
16

GUA DE APRENDIZAJE

Versin: 02
Fecha: 30/09/2013
etiqueta <img />. Los atributos que como mnimo ha de tener esta
etiqueta son los siguientes:
<img src="ubicacion/imagen.gif" alt="texto alternativo" />
<html>
<head>
<title>Pagina con Imgenes</title>
</head><body>
<p> El navegador tambin ignora los saltos de lnea. As si
dentro de un prrafo colocamos varios saltos de lnea
pulsando Enter, estos no se vern. Como ya vimos para
crear un salto de lnea dentro de un prrafo, utilizamos la
etiqueta. <br />
Tenemos las fotografas organizadas en diferentes
categoras</p>
<img src="sapito.png" width="150" height="150"
alt="No se encuentra esta imagen" />
</br>
<img src="imagenes/osito.jpg" width="200"
height="200"
</br>
<h2>Contacto</h2>
<p> Si quieres comunicarte con nosotros visita nuestra
pgina de contacto.
        &n
bsp; Te esperamos.</p>
</body>
Pgina 7 de
16

GUA DE APRENDIZAJE

Versin: 02
Fecha: 30/09/2013
</html>
Enlace a otra pagina

Cualquier pgina web tiene imgenes o texto, que al pulsarlos nos llevan a otra
pgina del mismo sitio, o a una pgina de un sitio distinto. Esto es un enlace o
hiperenlace (en ingls link o hyperlink) tambin llamado hipertexto o hipervnculo.
Un enlace se diferencia del texto normal porque al colocar el cursor encima, este
cambia de forma y pasa de una flecha a una mano. Tambin es muy frecuente que los
enlaces aparezcan subrayados, ya que es la opcin por defecto que les asigna el
HTML.
En HTML, el enlace se identifica con la etiqueta <a></a>. La forma ms bsica de un

enlace es la siguiente:
<a href="archivo_enlazado">contenido del enlace</a>
El atributo href indica la direccin (URL) a la que se enlaza, que normalmente es un

archivo html, por ejemplo http://www.google.com. El contenido del enlace es lo que
el usuario ve en la pgina y que al pulsar sobre l nos lleva al enlace. Normalmente
es texto o una imagen, en el siguiente ejemplo.
<html>
<head>
</head>
<body>
Pgina 8 de
16

GUA DE APRENDIZAJE

Versin: 02
Fecha: 30/09/2013
<p> El navegador tambin ignora los saltos de lnea. As si dentro

de un prrafo colocamos varios saltos de lnea pulsando Enter,
estos no se vern. Como ya vimos para crear un salto de lnea
dentro de un prrafo, utilizamos la etiqueta. <br />
</br>
<img src="imagenes/osito.jpg" width="150" height="150"
<p>Interesante enlace sobre conceptos HTML: <a
href="http://www.google.com">codigos web</a>
<h2>Contacto</h2>
</br>
<font color="red">Este texto est en rojo</font>
<font color="red"><h2>Contacto</h2></font>
<p> Si quieres comunicarte con nosotros
visita nuestra pgina de contacto.
         &nb
sp;Te esperamos.</p>
</body>
</html>
Duracin: 4 horas
Evidencia: Producto
Entrega: BlackBoard (Actividad No 2)
Material de Apoyo:
Actividad 3
Hasta ahora hemos aprendido a utilizar los elementos bsicos de HTML para escribir
texto, imgenes y enlaces, pero los resultados han sido muy pobres desde el punto
de vista esttico. A continuacin vamos a ver mejorar nuestra pgina formateando
Pgina 9 de
16

GUA DE APRENDIZAJE

Versin: 02
Fecha: 30/09/2013
el texto, con bordes, mrgenes y fondos. Veremos un concepto muy importante y

potente: el estilo CSS. El aspecto de la pgina se controla con los estilos CSS.
<html>
<head>
<style type="text/css">
h1{ margin-left: 80px;
margin-top: 20px;
font-size: 180%;
color: #d38451;}
.aplicatparrafo{ font-weight: bold;
color: #6C6CCA;}
div.cuerpo { margin: 0 20px 20px;
background-color: #f5e4cc; }
</style>
</head>
<body>
<div class="cuerpo">
<p> El navegador tambin ignora los saltos de lnea. <span
class="aplicatparrafo">As si dentro de un prrafo</span> colocamos varios
saltos de lnea pulsando Enter, estos no se vern. Como ya vimos para crear un
salto de lnea dentro de un prrafo, utilizamos la etiqueta. <br />
Pgina 10 de
16

GUA DE APRENDIZAJE

Versin: 02
Fecha: 30/09/2013
<img src="imagenes/osito.jpg" width="150" height="150"

</div>
</body>
</html>
Es importante tener un PSD del sitio antes de realizar la maquetacin?
Que software puedo usar para maquetacin y codificacin para el volcado de

contenidos.
Presenta un diseo en PSD.
Para esto los aprendices deben crear de manera multimedia, bien sea de forma
animada o en forma de video, los pasos para crear un proyecto web.
3.3
Actividades de apropiacin del conocimiento (Conceptualizacin y
Teorizacin).
Tcnica Didctica: estudio de casos.
Se desea construir una aplicacin web de tal forma que se puedan llamar 3
Pgina 11 de
16

GUA DE APRENDIZAJE
Versin: 02

Fecha: 30/09/2013
paginas con vnculos desde una pagina principal.
Al finalizar se realizara una aclaracin de dudas por parte del instructor.

Duracin de la Actividad: 2 Horas
Tipo de Evidencia: Producto (Taller HTML CSS)
Entrega: BlackBoard
3.4
Actividades de transferencia del conocimiento.
Tcnica Didctica: Demostracin:

Tcnica Didctica: Demostracin:
Revisar el archivo PSD y codificar en cdigo HTML y CSS la estructura del sitio.
3.5 Actividades de evaluacin.

Evidencias de
Aprendizaje
Evidencias de
Conocimiento :
Respuesta a preguntas
sobre uso de herramientas
para maquetacin web
Criterios de Evaluacin
Desarrollo completo y
funcional de la interfaz de
usuario, cumpliendo los
requerimientos. Realizando
pruebas a componentes
Tcnicas e Instrumentos
de Evaluacin
Foro de discusin
Tcnica Demostracin
Evidencias de
Desempeo:
Observacin de
desempeo de las
actividades.
Lista de chequeo
Evidencias de
Producto:
Pginas web ejecutadas
sobre el servidor.
Pgina 12 de
16

GUA DE APRENDIZAJE

Versin: 02
Fecha: 30/09/2013
Pgina 13 de
16

Integral
GUA DE APRENDIZAJE
Versin: 02
Fecha: 30/09/2013
4. RECURSOS PARA EL APRENDIZAJE
Materiales de formacin
devolutivos:
(Equipos/Herramientas)
ACTIVIDADES
DEL
PROYECTO
Materiales de formacin
(consumibles)
Talento Humano (Instructores)
DURACI
N
(Horas)
Descripcin
Equipos
porttiles
Televisor
Cantidad
Descripcin
Cantidad
Especialidad
Cantidad
AMBIENTES DE
APRENDIZAJE
TIPIFICADOS
ESCENARIO (Aula,
Laboratorio, taller,
unidad productiva)y
elementos y
condiciones de
seguridad industrial,
salud ocupacional y
medio ambiente
Marcadores
25
Hojas
2
1 rema
Ingenieria en
Sistemas
Aula de Sistemas Biblioteca

Virtual
Pgina 14 de 16

Integral
GUA DE APRENDIZAJE
Versin: 02
Fecha: 30/09/2013
Maquetacin: Diagramacin, composicin de pgina, compaginacin, son diferentes

trminos que se usan para referirse a una misma cosa: la manera de ocupar el
espacio del plano mensurable que es la pgina.
Cabeza
Etiqueta que rodea contenido que es invisible para el usuario, pero que es importante
para el navegador. Los elementos dentro de esta etiqueta contienen metadatos sobre
la pgina y los enlaces a las hojas de estilo, los scripts, etc.
Cuerpo
El contenedor de todo el contenido de una pgina. Se encuentra despus de la
etiqueta <head>, dentro de la etiqueta general <html>.
Divs
Un contenedor a nivel de bloque (o 'divisin' de la pgina web) para el contenido sin
significado semntico.
Relleno (Padding):
El relleno se determina del mismo modo que los mrgenes. Al igual que en el caso
anterior, por defecto, cada capa tiene relleno cero, por lo que para que pueda ser
visible debe determinarse su valor en el cdigo CSS. Al igual que en el caso de los
Pgina 15 de 16
6. REFERENTES BIBLIOGRFICOS

GUA DE APRENDIZAJE

Versin: 02
Fecha: 30/09/2013
mrgenes, el relleno se determina lado por lado, a menos que se emplee el mtodo
abreviado, que es igual que el empleado en los mrgenes.
Borde (Border):
El borde es el lmite de la capa. A diferencia de los dos atributos anteriores, el
borde tiene tres propiedades que puedes ser determinadas en el cdigo CSS. La
siguiente es una lista de estas propiedades y la forma en que se determinan:
ta
5. GLOSARIO DE TERMINOS
Cibergrafia
https://www.youtube.com/results?search_query=maquetacion+web+html+y+css
http://www.desarrolloweb.com/articulos/intro-maquetacion-css.html
http://www.cvbenweb.es/maquetando-una-web-i-pasar-de-psd-a-html/
7. CONTROL DEL DOCUMENTO (ELABORADA POR)

Instructor Nairo Hernndez Vianch
Pgina 16 de
16

Guia 1maquetacion

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Guia 1maquetacion

Загружено:

Авторское право:

Доступные форматы

SERVICIO NACIONAL DE APRENDIZAJE SENA

SISTEMA INTEGRADO DE GESTIN

Nombre del Proyecto:

Fase del proyecto: Ejecucin

Crear la estructura del

Convertir el diseo PSD

Estructurar los elementos de

Integrar los elementos

SERVICIO NACIONAL DE APRENDIZAJE SENA

SISTEMA INTEGRADO DE GESTIN

3. ESTRUCTURACION DIDACTICA DE LAS ACTIVIDADES DE APRENDIZAJE

3.1 Actividades de Reflexin inicial.

SERVICIO NACIONAL DE APRENDIZAJE SENA

SISTEMA INTEGRADO DE GESTIN

Tcnica Didctica: Socializacin

3.2 Actividades de contextualizacin e identificacin de conocimientos

Que es Maquetacin Web

Definir Front-End (cliente) y Definir Back-End

Clientes y Servidores en internet.

Sintaxis JavaScript y ActionScript

Que son en programacin: Variables, Condiciones, Ciclos, Funciones

SERVICIO NACIONAL DE APRENDIZAJE SENA

SISTEMA INTEGRADO DE GESTIN

Defina Programacin Orientada a Eventos y Programacin Orientada a Objetos

Con base en la lectura realizada, vamos a ver como es la estructura de una

SERVICIO NACIONAL DE APRENDIZAJE SENA

SISTEMA INTEGRADO DE GESTIN

Instalar esos aplicativos en su equipo

<br> Indica salto de lnea

SERVICIO NACIONAL DE APRENDIZAJE SENA

SISTEMA INTEGRADO DE GESTIN

SERVICIO NACIONAL DE APRENDIZAJE SENA

SISTEMA INTEGRADO DE GESTIN

SERVICIO NACIONAL DE APRENDIZAJE SENA

SISTEMA INTEGRADO DE GESTIN

Enlace a otra pagina

En HTML, el enlace se identifica con la etiqueta <a></a>. La forma ms bsica de un

<a href="archivo_enlazado">contenido del enlace</a>

El atributo href indica la direccin (URL) a la que se enlaza, que normalmente es un

SERVICIO NACIONAL DE APRENDIZAJE SENA

SISTEMA INTEGRADO DE GESTIN

<p> El navegador tambin ignora los saltos de lnea. As si dentro

SERVICIO NACIONAL DE APRENDIZAJE SENA

SISTEMA INTEGRADO DE GESTIN

el texto, con bordes, mrgenes y fondos. Veremos un concepto muy importante y

SERVICIO NACIONAL DE APRENDIZAJE SENA

SISTEMA INTEGRADO DE GESTIN

<img src="imagenes/osito.jpg" width="150" height="150"

Es importante tener un PSD del sitio antes de realizar la maquetacin?

Que software puedo usar para maquetacin y codificacin para el volcado de

Presenta un diseo en PSD.

SERVICIO NACIONAL DE APRENDIZAJE SENA

SISTEMA INTEGRADO DE GESTIN

paginas con vnculos desde una pagina principal.

Al finalizar se realizara una aclaracin de dudas por parte del instructor.

Actividades de transferencia del conocimiento.

Tcnica Didctica: Demostracin:

3.5 Actividades de evaluacin.

SERVICIO NACIONAL DE APRENDIZAJE SENA

SISTEMA INTEGRADO DE GESTIN

SERVICIO NACIONAL DE APRENDIZAJE SENA

4. RECURSOS PARA EL APRENDIZAJE

Talento Humano (Instructores)

Aula de Sistemas Biblioteca