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.