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)