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. 

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

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 

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