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 

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)

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

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/

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 

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