S11T01 : Usando LightBox2

Taller 8 :
Adicionar Visualización de Carros con LightBox2 al taller de Concesionario 

Usando el script para la visualización de imágenes LightBox2 visto en la clase anterior adicionar al taller de concesionario las siguientes características : 

• Cada vehiculo (carro o moto) debe tener una imagen que pueda ser ampliada usando LightBox2 

Recuerden los pasos para usar el script : 

1. Visitar la pagina oficial del Script
   http://lokeshdhakar.com/projects/lightbox2
2. Descargar el archivo zip con los archivos necesarios
   http://lokeshdhakar.com/projects/lightbox2/releases/lightbox2.51.zip
3. Descomprimir el archivo 
4. Crear un directorio js en el taller del concesionario 
5. Copiar los archivos
   jquery-1.7.2.min.js y lightbox.js 
6. Copiar los archivos del directorio images
   close.png, loading.gif, next.png, prev.png al directorio imagenes del concesionario 
7. Copiar el archivo lightbox.css del directorio css al directorio de estilos del concesionario 
8. Abrir el archivo lightbox.js y cambiar el nombre del directorio images a imagenes 
9. Dentro del body de la pagina que se va a usar el script
   <script src="js/jquery-1.7.2.min.js">
   </script><script src="js/lightbox.js"></script>
10. Adicionar en el head el estilo
    <link href="css/lightbox.css" rel="stylesheet" />
11. A la imagen que se va a ampliar colocar el atributo rel y si se quiere un titulo
    <a href="imagenes/carro01_miniatura.jpg" rel="lightbox" title="Mazda">
    <img src="imagenes/carro01.jpg" alt="Mazda" />
    </a>
12. Mandar el taller al correo del docente al terminar 

S10C02 : Examen Practico

Examen Practico 01: 

Se realizara un examen practico en el cual se evaluaran los conocimientos adquiridos hasta el momento en la creación de sitios web, se evaluara : 

• Conocimientos básicos de  HTML
• Conocimientos básicos de CSS 
• Manejo de Imágenes 
• Uso de Tablas 

Pasos : 

• Descargar el archivo :
  mcpw_examen_02.zip
• Descomprimir 
• Abrir el archivo ejemplo.html que muestra como se debe ver la pagina a entregar 
• Editar el archivo index.html y adicionar el HTML para generar la pagina 
• Editar el archivo CSS para los estilos 
• Se adjuntaron las imágenes a usar
• Trabajo individual 
• Pueden consultar ejercicios anteriores e Internet 
• Enviar al correo del docente al terminar el examen 

S09T01 : Taller Construcción de Sitio para Concesionario

Imagen Original : http://www.flickr.com/photos/redlinx/2049765237

Taller 7 :
Creación de Sitio para Concesionario 

El dueño de la compra venta de carros "VendoCarros" ha tomado la decisión de montar un sitio web para su negocio por lo cual ha contratado al grupo de estudiantes del Modulo de Creación de Paginas Web la Universidad Autónoma de Manizales para que realice un primer acercamiento al diseño del sitio que se necesita. 

Estos son los requerimientos expresados por el cliente : 

• El sitio debe contener información básica del concesionario :
• Dirección (calle, ciudad, departamento, país)
• Teléfono de contacto 
• Correo electrónico de contacto 
• Fotografía del local comercial
• Información de carros para la venta : 
• Marca del carro 
• Modelo 
• Kilometraje 
• Estado del vehiculo
• Precio de venta 
• En la pagina principal debe ir carros a la venta destacados o en promoción 
• El concesionario vende carros y motos 

Realizar : 

• Maqueta en Papel del sitio web 
• Pagina inicial con la información solicitada 
• Pagina de catalogo de carros y motos 
• Pagina de carros de la marca Mazda 
• Pagina de carros de la marca Renault 
• Pagina de motos de la marca Susuki 
• Pagina de motos de la marca Auteco 
• Los datos del establecimiento deben ser inventado asi como los datos de los carros en el catalogo
• Recuerden adicionar imagenes con licencia 

Recomendaciones : 

• Crear una lista con las URL de las imagenes usadas 
• Crear los archivos con nombres minusculas 
• Usar solo el CSS para colocar los estilos 
• Validar las paginas
• Tener en cuenta las sugerencias de usabilidad 
• Grupos de 2 personas 
• Enviar lo que lleven al correo del docente al finalizar la clase 

S08C02 : Asesoria Taller 6

Se realizo una revisión inicial del Taller 06 se hicieron las siguientes sugerencias : 

• Recordar utilizar nombres en minúscula para los archivos (paginas e imágenes)
• Se indico de nuevo como insertar vídeos dentro de las paginas web
• Usar solo estilo usando el CSS para esto
• Usar imágenes con licencia para evitar problemas de derechos de autor
  (buscar imágenes Creative Commons)
• Crear una lista del sitio donde descargaron las imágenes

Se continuo con el desarrollo de la pagina durante la clase. 

S08T01 : Taller 6 Creación de Pagina para una Persona

Taller 06 : 

La artista Madonna que pronto vendrá a Colombia ha encomendado al grupo de trabajo del modulo de construcción de paginas web de la Universidad Autónoma de Manizales  la construcción de un mini sitio dedicado a su concierto en el cual se debe incluir :

• Pequeña biografía de la artista 
• Una galería de imágenes de la cantante durante conciertos 
• Una galería de videos de la cantante durante conciertos 
• Información acerca del tour "Madonna World Tour", Ciudades y fechas que visitara 
• Información del concierto a realizarse en Medellin, fecha, lugar, localidades y precios 

Para el desarrollo de este taller se deben cumplir los siguientes requisitos :

• Trabajar en grupos de dos personas 
• Crear las paginas que consideren necesarias para publicar la información 
• Incluir imágenes que tengan licencia para su uso, hacer una lista del sitio donde descargaron las imágenes 
• Incrustar uno o mas vídeos de YouTube en la pagina 
• Usar CSS para el manejo de estilos
• Recuerden el uso de letras minúsculas en los nombres de archivos 
• Enviar al correo del docente al finalizar la clase (se debe enviar lo que tengan hasta el momento)

S08C01 : Dia del Trabajo

El día de hoy es festivo debido a que se celebra el
Día del Trabajo 

S07C02 : Inspeccionando las Paginas Web

Cuando estamos creando una pagina web podemos inspeccionar el HTML con la cual esta construida, los estilos que se están utilizando, los recursos descargados, los guiones en ejecución, el tiempo y la cantidad de datos que se descargaron de la red. Esto es posible gracias a que la mayoría de navegadores (Firefox. Chrome, Safari) traen consigo un Inspector de Paginas que nos deja inspeccionar estos datos de cualquier pagina que carguemos. 

Con solo presionar las teclas Ctrl-Shift-I se visualiza bajo el navegador o en una pantalla a parte como :

• El HTML de la pagina a la cual estamos visitando 
• Los estilos CSS usados por cada elemento, cuales esta heredando y de quien 
• Moviendo el ratón sobre la pagina original nos mostrara en la ventana de inspección el trozo de HTML que hace referencia a dicho elemento 
• Los recursos usados por l pagina (scripts. imagenes, etc)
• Las propiedades de cada elemento 
• Los scritps que se están ejecutando 
• Visualizar cuanto demoro la pagina en cargar incluyendo todos sus elementos y el total de bytes para cargar la pagina totalmente 

Esta información es muy útil cuando estamos desarrollando paginas por que permite identificar las propiedades de cada elemento permitiendo su cambio de manera rápida y fácil. 

S07T01 : Taller Manejo de Tablas e Imagenes

Taller Edición de Imágenes y Uso de Tablas

Taller 05 :
Edición de Imágenes y Uso de Tablas

• Descargar el archivo
  mcpw_taller_05.zip
• Descomprimir
• Abrir el archivo PDF donde se explica el taller 
• Editar Imágenes
• Crear tabla con las imágenes
• Enviar al terminar al correo del docente

S07C01 : Usando Tablas

A través del modulo hemos visto como organizar el contenido a través de párrafos (<p>), divisiones (<div>) que permiten crear bloques de contenido los cuales pueden ser ubicados en diferentes partes de la pagina a través del manejo de estilos. En esta clase estaremos viendo como utilizar las tablas para visualizar contenidos que tienen una estructura de filas y columnas. 

Usando Tablas

Temas : 

• Tablas 
• Etiqueta para Tablas <table>
• Etiqueta para Filas <tr> 
• Etiquetas para celdas <td> 
• Creando una tabla con dos filas y dos columnas
  <table border="1">
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>
• Expandir una columna o una fila para que ocupe mas celdas (colspan y rowspan)
  <table border="1">
    <tr>
      <td colspan="2">1</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>

Actividad : 

El docente ilustrara como realizar un diseño básico utilizando hojas de estilo, imágenes y tablas en la creación de un sitio web. 

• Sitio Web :
  Todo Música
  Información acerca de la escena musical mundial, con información de noticias, géneros y artistas. 
• Se creo una maqueta inicial del sitio 
• Se creo en 1 hora una version inicial del sitio utilizando lo visto en clase
• Descargar el archivo :
  mcpw_actividad_06_todo_musica.zip

S06C02 : Uso de Video en Web

Otro de los recursos muy importantes en la creación y publicación de contenidos en web es el uso de vídeo que adiciona la posibilidad de enriquecer la experiencia de navegación de los usuarios a través de sonido e imagen en movimiento.

Temas : 

• Formatos de los Vídeos : 
•  AVI, MP4, xDIV
• Resolución de los Vídeos :
• 320x240, 640x480, 720, 1080, 1090
• Publicación de Vídeos :
• Youtube  (http://www,youtube.com)
• Vimeo (http://www.vimeo.com)
• Creación de Vídeo : 
• Animoto (http://www.animoto.com)
• xTranormal (http://www.xtranormal.com)

S06T01: Taller Mejorar Sitios Web

Taller 04 :
Mejorar los Sitios Web

Atendiendo las observaciones que se hicieron en la clase anterior acerca de los sitios web creados hasta ahora y usando los conocimientos adquiridos para la edición de imágenes : 

1. Actualizar los sitios web del Taller 03 para su mejor visualización
2. Editar las imágenes para volverlas mas pequeñas o del mismo tamaño
3. Usar imágenes como enlaces
4. Enviar al correo del docente al terminar el taller

S06C01 : Uso de Imagenes

En esta sesión estaremos hablando de los diferentes formatos de imágenes utilizados en la creación de paginas web, los tamaños ideales de las imágenes y la creación y edición de las mismas a través de la aplicación Gimp. 

Temas : 

•  Uso de imágenes en las paginas Web :
• Imágenes
• Enlaces 
• Mapas
• Contenido 
• Formatos mas usados : 
• PNG
• JPG
• GIF 
• GIF Animados 
• Tamaños de las imagenes : 
• Tamaños mas usados 
• Miniaturas 
• Tamaño medio 
• Grandes tamaños 

Edición Básica de Imágenes : 

GIMP es un Programa de Manipulación de Imágenes GNU el cual es gratuito y se puede descargar desde internet para su uso en diferentes plataformas.

• Que es Gimp (Programa de Manipulación de Imágenes GNU)
• Convertir imágenes entre formatos
• Cambiar el tamaño de una imagen
• Manejo de Colores 
• Blanco y Negro 
• Transparencias 
• Recortar imágenes 

Enlaces : 

• Sitio Web Oficial de Gimp
  http://www.gimp.org/

S05C02 : Evaluacion Preliminar de Sitios

En esta sesión estaremos haciendo una critica constructiva del desarrollo del Taller 03 donde debían crear un sitio web y estaremos mirando el diseño de otros sitios web que nos sirvan de guía para futuros trabajos.

Observaciones :

• Utilizar párrafos para separar el contenido para una fácil lectura
• Mantener una estructura fija a través de todas las paginas
• Usar imágenes propias o con una licencia que permita usarlas
• Utilizar imágenes con menor tamaño
  (para esto comenzaremos la próxima clase a editar imágenes)

Sitios Web :

Sitio Web del Barcelona

Sitio Web de Bob Marley

Sitio Web de Holocausto Norte

Estos son los primeros ejercicios completos en la creación de un sitio web por los estudiantes, a medida que vayamos explorando nuevos temas los sitios web comenzaran a tomar forma. 

Actividad : 

• Los estudiantes que no terminaron el taller tendrán tiempo en la próxima sección de actualizar sus sitios con las recomendaciones realizadas.

S05T01: Taller Creacion de Sitio Web Libre

Sitio Oficial de Shakira

Taller 03 : 
Creación de sitio web de tema libre

Los estudiantes en grupos de dos personas deben crear un sitio web que tenga :

1. Mínimo 4 paginas web 
2. Mínimo 4 imágenes distintas 
3. Contener un enlaces en cada pagina
4. Cada pagina debe tener un enlace a la pagina principal
5. Deben utilizar CSS para el manejo de estilos 
6. Debe tener la estructura física vista en clase :
   Directorios sitio, imágenes, css
7. Utilizar el bloc de notas para crear el sitio
8. El tema del sitio web es libre
   puede ser un artista, un equipo de fútbol, un personaje, entre otros
9. Enviar al correo del docente al terminar el taller 

S05C01 : Estructura de un Sitio Web

Editor de Bocetos - Denim

Estructura Física de un Sitio:

• Componentes del Sitio Web :
• Paginas 
• Hojas de Estilo 
• Recursos 
• Imagenes 
• Videos 
• Otros contenidos 
• Uso de directorios para separar contenidos :
• Separacion por directorios 
• Organizacion de Directorios 

Estructura Lógica : 

• Para que se construye un sitio web ?
• Planeacion del Sitio 
• Propósito 
• Contenidos 
• Paginas
• Navegación entre Paginas 
• Uso de bocetos para representar las paginas (mockups)

S04C02: Quiz Conocimientos HTML

Se realizara un quiz escrito donde se evaluaran los conocimientos en tormo al lenguaje HTML :

Temas a Evaluar : 

• Estructura de un Documento HTML 
• Uso de Etiquetas
• Creacion de Listas 
• Uso de Imagenes 
• Manejo de Parrafos 
• Identificación de conceptos 
• Que es una pagina web ? 
• Lenguaje HTML 
• Hojas de Estilo en Cascada

 El examen sera escrito e individual.

S04T01 : Terminar Actividad 05

Actividad 05 : 

• Descargar el archivo de la actividad 5 
  mcpw_actividad_05.zip
• Ir al directorio sitio/css y abrir el archivo style.css 
• Adicionar el color de fondo de la pagina :
  body
  {
      background-color: lightgray;
  }
• Abrir cada archivo HTML y adicionar la definición del estilo 
  <head>
     <link rel="stylesheet" href="css/style.css" type="text/css" />
  </head>
• Hacer que las paginas estén separadas por 100 pixels del borde de la ventana
• Hacer que el contenido de los párrafos estén justificados
• Cambiar el estilo de los encabezados (h1) para que el fondo sea azul, la letra sea blanca y el texto este centrado
• Eliminar el subrayado de los enlaces 
• Hacer que la lista de pregrado se visualice con un cuadrado 
• Hacer que la lista de posgrado se visualice con números romanos

S04C01 : Hojas de Estilo

Hasta el momento hemos utilizado el lenguaje HTML para estructurar el contenido de nuestros sitios, ahora con las hojas de estilo podemos cambiar la apariencia de nuestras paginas asignando colores a los diferentes elementos, alineando el texto en pantalla y modificando un sin numero de características visuales de cada uno de los elementos. 

Temas : 

• La apariencia de las paginas web y el HTML 
• Las Hojas de Estilo (CSS)
• Que es una hoja de estilo 
• Creación de un archivo con la hoja de estilo 
• Asignar a la pagina la hoja de estilo 
• Cambiando el color de fondo de una pagina
• Espacio entre elemenos 
• Margenes (margin)
• Acolchamiento  (padding)
• Manejo de los Colores 
• Color del Fondo
  background-color: lightgray;
• Color
  color: lightgray;
  http://www.w3.org/TR/css3-color/
  Calculadora de Colores
• Alineación del Texto : 
• Centrar
  text-align:center;
• Justificar
  text-align:justify;
• Izquierda
  text-align:left;
• Derecha 
  text-align:right;
• Decorando los enlaces :
• a:link
• a:visited 
• a:hover 
• a:active 
• Decorando las listas : 
• Listas con circulos
  list-style-type: circle;
• Listas con cuadrados
  list-style-type: square;
• Listas ordenas con numeros romanos :
  list-style-type: upper-roman;
• Listas ordenas con letras :
  list-style-type: lower-alpha;

Actividad 05 : 

• Descargar el archivo de la actividad 5 
  mcpw_actividad_05.zip
• Ir al directorio sitio/css y abrir el archivo style.css 
• Adicionar el color de fondo de la pagina :
  body
  {
      background-color: lightgray;
  }
• Abrir cada archivo HTML y adicionar la definición del estilo 
  <head>
     <link rel="stylesheet" href="css/style.css" type="text/css" />
  </head>
• Hacer que las paginas estén separadas por 100 pixels del borde de la ventana
• Hacer que el contenido de los párrafos estén justificados
• Cambiar el estilo de los encabezados (h1) para que el fondo sea azul, la letra sea blanca y el texto este centrado
• Eliminar el subrayado de los enlaces 
• Hacer que la lista de pregrado se visualice con un cuadrado 
• Hacer que la lista de posgrado se visualice con números romanos

S03C02 : Actividad Deportiva

El día 22 de Marzo de 2012 se realizara una actividad deportiva con todos los estudiantes del programa de Semilleros de la Universidad Autonoma de Manizales a cargo de la Unidad de Deportes, entre las actividades a realizar estan : 

• Saludo de Bienvenida 
• Rumba Terapia 
• Circuito Cardio 
• Torneo Relampago de Tenis de Mesa 
• Torneo Relampago de Baloncesto 
• Torneo Relampago de Futsala

S03T01 : Taller 02 - HTML Basico 2

Taller 02 :

La banda de música electrónica The Chemical Brothers los ha contratado para crear un sitio web especial donde se publicara la información de sus primero tres trabajos, se debe crear un sitio con cuatro paginas : 

• Pagina principal con el logo de la banda y la lista numerada de la discografía
• Una pagina por cada álbum con la lista numerada de canciones
• Descargue el archivo con las imágenes y la información detalla del taller aquí : taller2.zip
• Realizar el taller de forma individual 
• Enviarlo por correo al docente

S03C01 : HTML5

En esta clase estaremos hablando de la version 5 del lenguaje para la creación de paginas web, sus nuevas características y su uso en el desarrollo del curso.

Temas :

• Evolución del lenguaje HTML 
• Estado actual del lenguaje
• Listas :
• Lista de elementos, etiqueta <ul>
• Listas ordenadas, etiqueta <ol>
• Elementos de una lista <li>
• Validación de la pagina con respecto a los estandares
  http://validator.w3.org/#validate_by_upload

Actividad 04 : 

1. Descargar el archivo :
   mcpw_actividad_04.zip
2. Convertir las paginas realizadas a HTML5, abrir cada archivo html
1. Adicionar el tipo de documento al inicio de los archivos html :
   <!DOCTYPE html> 
2. Adicionar el tipo de codificacion de los caracteres en el encabezado de la pagina adicionando la etiqueta :
   <head>
      <meta charset="UTF-8">
      <title>Titulo</title>
   </head>
3. Adicionar el atributo alt con un texto alternativo para cada imagen, ejemplo :
   <img src="logo.jpg" alt="Logo de la Empresa" />
3. En la pagina facultad_ingenieria.html convertir la lista de programas de pregrado en una lista y la lista de posgrados en una ordenada
4. Validar las paginas de modo que no aparezca ningún error

S02C02 : Taller 01 - HTML Básico

Se  deben crear dos paginas web (index.html y mensaje_bienvenida.html) las cuales deben contener la información suministrada por la Universidad (texto e imágenes) para esto se ha creado un archivo que contiene esta información

1. Descargar el archivo
   taller01.zip
2. Descomprimir y abrir el directorio taller01 
3. Abrir el archivo taller01.pdf y seguir las instrucciones del taller 
4. Comprimir de nuevo el directorio y enviar al correo del docente 

S02C02 : Creación del Blog

En esta clase los estudiantes deben crear su propio blog donde deben comenzar a publicar los contenidos que el docente solicite.

• Temas :
• Creación de un Blog 
• Nombre del Blog
• Publicando la primera entrada
  

• Actividad : 
• Creación del Blog : 
• Ir a http://www.blogspot.com
• Crear un usuario 
• Crear un blog para la publicación de tareas  
• Publicación del Blog :
•  Los estudiantes deben enviar el enlace del blog al correo del docente para ser adicionados al blog principal del modulo
• Creación de una Entrada : 
• Los estudiantes deben crear una primera entrada donde se presenten indicando la institución a la que pertenecen, el nombre del colegio donde estudian e incluir un enlace a la pagina del modulo.

S02C01 : El Lenguaje HTML

Temas : 

Creación de una pagina web con las etiquetas básicas para el titulo de la pagina, un encabezado y un texto usando un editor de texto. 

• Paginas Web 
• Lenguaje HTML 
• Hipertexto 
• Los Navegadores 
• Etiquetas Basicas (tags)
• Estructura del Documento
• <html>, <head>, <body>
• Titulo de la Pagina 
• <title>
• Parrafos 
• <p>
• Encabezados 
• <h1>,<h2>,<h3>,<h4>,<h5>,<h6>
• Insertar Imagenes 
• <img> 
•  Enlazar dos paginas 
• <a>

Actividad :

• Se crearon dos paginas web que usan las etiquetas vistas en clase, se insertaron imágenes y se adicionaron enlaces para navegar entre paginas.

S01C01 : Presentación del Modulo

Presentación del Modulo Construcción de Paginas Web a los estudiantes del programa Técnico Laboral en Aplicaciones Web de la Facultad de Ingeniería de la Universidad Autónoma de Manizales. 

Temas :

• Presentación del Modulo
• Programa 
• Horario de Clase
• Actividades de los Estudiantes 
• Creación de un Blog 
• Creación de un Sitio Web
• Introducción a los temas de :
• Internet 
• Servicios en Internet 
• Correo
• Sitios Web 
• Blogs 
• Paginas Web 

Actividades : 

• Escribir :
• Nombres Completos 
• Institución Educativa
• Intereses (música, cine, libros)
• Ir pensando un nombre para su blog.

Modulo : Construccion de Paginas Web

Módulo:
Construcción de Páginas Web

Programa:

Técnico Laboral en Aplicaciones Web

Área Técnica:

Ingeniería

Docente:

Marlon J. Manrique

Créditos: 3

Horas Presenciales: 4

Horas trabajo dirigido: 3

Horas estudio independiente: 2

Descripción: Conocer los principales elementos de una página Web, de manera que se puedan construir páginas Web estáticas que integren elementos multimedia (texto, imágenes, sonidos y vídeo) siguiendo un diseño previamente establecido.

Clases: 

• Martes de 4 a 6 pm 
• Jueves de 4 a 6 pm 

Taller: 

• Miercoles 2 a 4 pm