ProInf.net

Ejercicios de clase (60 horas)

• Día 7
  • sitio_marcos - Web de marcos
  • marcos_blog - Ejercicio de marcos
  • sitio_imagenes - Imágenes de sustitución
• Día 8
  • sitio_imagenes - Imágenes de sustitución
  • sitio_comportamientos - Ejercicio de comportamientos
  • sitio_flash - Insertar Flash en una página web
• Día 9
  • posicionamiento_absoluto - Posicionamiento absoluto
  • posicionamiento_absoluto2 - Ejercicio de posicionamiento absoluto
  • estilos_varios - Estilos para lista de idiomas
• Día 10
  • imagenes_fondo - Posicionamiento absoluto con porcentajes e imágenes de fondo
  • botones_flash - Mapa de la clase con botones Flash
• Día 11
  • posicionamiento_relativo - Divisiones y estilos para falsas columnas
  • posicionamiento_relativo2 - El ancho no es elástico sino fijo
• Día 12
  • sitio_menu - Lista de enlaces como menú vertical y horizontal
  • posicionamiento_relativo3 - Posicionamiento absoluto dentro de relativo
  • Introducción a XAMP: El servidor Apache, el dominio localhost y la carpeta htdocs
• Día 13
  • bd_deportes - Web dinámica de artículos de deportes. Formulario de agregar artículo, listado de artículos y ficha de artículo. Creación de la base de datos con phpmyadmin
• Día 14
  • sitio_formulario - Creación de un formulario. Enviar los datos del formulario por correo electrónico.
  • dominio_hospedaje - Darse de alta para publicar la web. Transferir la web vía FTP
• Día 15
  • sitio_vacaciones - Creación de un sitio dinámico, de posicionamiento relativo, basado en una plantilla y que usa estilos CSS. Indicación de la opción activa del menú mediante hojas de estilo. Publicación de la web en dw2009.freehostia.com

Ejercicios de clase (110 horas)

• Sesión 1

  Creación de documentos HTML con el bloc de notas y con el Notepad++. Lista de vínculos. Vínculo para volver al inicio de la web.

• Sesión 2

  Sitio de repaso, sitio de listas anidadas y sitio de tablas. Inserción de imágenes alineadas a la izquierda o a la derecha. Creación de una hoja de estilos CSS.

• Sesión 3

  Repasar como crear un sitio web: sitio música. Combinar celdas de una tabla. Enlaces dentro del documento. Cambiar el tamaño de las imágenes. Creación de un archivo de estilos CSS para todo el sitio web. Cambiar el color de los enlaces al pasar el ratón.

• Sesión 4

  Ejercicio y contenido del sitio Diva parar repasar cómo crear un sitio web, las páginas HTML y la hoja de estilos. Colocar una imagen de fondo. Aplicar estilos de relleno, borde y margen a las etiquetas de párrafo y lista.

  Creación del sitio estilos para aplicar estilos a una lista anidada y a una tabla. Creación de varias hojas de estilo. Aplicar más de una hoja de estilos a un archivo HTML. Comprender los selectores CSS para hacer referencia a descendientes, hijos, hermanos, primer hijo, último hijo y todas las etiquetas. Entender la jerarquía de etiquetas.

• Sesión 5

  Creación de un sitio con plantilla de Dreamweaver. Cómo crear la plantilla, la región editable y las páginas. Modificación de la plantilla.

  Ejercicio y contenido del sitio Dire Straits que utiliza plantilla. Uso de pseudo-clases para cambiar los enlaces cuando el ratón está encima.

  Introducción a las clases CSS creando tipos distintos de párrafos.

• Sesión 6

  Creación de un mapa de imagen. Uso del atributo title para ver etiquetas flotantes al dejar el ratón en un enlace. Convertir a plantillas un sitio que ya posee páginas HTML.

  Profundización en las clases CSS creando distintos tipos de formato de tablas. Cómo visualizar tablas con una línea fina de separación.

  Creación del sitio divisiones para compartimentar el documento mediante etiquetas DIV con identificadores. Un ejercicio de uso de CSS para el posicionamiento absoluto de las divisiones. Creación de imágenes de fondo con GIMP para cada división. Añadir una barra de desplazamiento al contenido.

• Sesión 7

  Enunciado del ejercicio para la creación de un sitio viajes que utiliza plantillas de DW y posicionamiento absoluto. Otras características del sitio son:

  • Creación de una lista de enlaces para la navegación. Los enlaces están formateados horizontalmente como botones gracias a estilos CSS.
  • Uso de identificadores en la lista de enlaces para resaltar la opción que corresponde a la página actual. Cada página adjunta una hoja de estilos particular para resaltar la opción del menú correspondiente.
  • Uso de una subplantilla y de una región dentro de una región editable para un grupo de páginas de la web que están relacionadas.
• Sesión 8

  La web sitio náutico utiliza posicionamiento relativo mediante etiquetas div flotantes que actúan como falsas columnas.

  • La columna derecha está pintada con una imagen de fondo en la división principal colocada a la derecha y con repetición vertical.
  • El modelo de cajas nos permite entender que ancho hemos de poner a un elemento flotante que tiene rellenos

  Hemos visto el concepto de dominio y hospedaje.

  En Firefox hemos instalado el complemento Web Developer que nos permite, entre otras cosas, desactivar los estilos de una web, editar sus estilos, desactivar las imágenes y poner un borde a las etiquetas de bloque.

  Nos hemos dado de alta en una web con hospedaje gratuito para subir la web a Internet. Hemos visto como configurar el servidor web remoto por FTP en Dreamweaver. También hemos usado la comunicación FTP desde el programa cliente de FileZilla.

• Sesión 9

  El sitio naturaleza es un ejercicio para practicar la creación de una web mediante falsas columnas, es decir, elementos flotantes e imágenes de fondo.

  El sitio marcos es una web creada utilizando marcos. Hemos visto:

  • Cómo usar el atributo destino de los enlaces para cambiar la ventana dónde aparecen las páginas enlazadas
  • Cómo hacer columnas o filas redimensionables

• Sesión 10

  Creación de un sitio marcos de repaso del día anterior. Los marcos son redimensionables. Hemos visto el código fuente de la página conjunto de marcos: las etiquetas frameset y frame. El encabezado y el menú comparten la misma hoja de estilo. Los diferentes contenidos comparten otra hoja de estilos.

  Creación de un marco en línea mediante la etiqueta iframe que hemos escrito directamente desde código. Le hemos dado algunos atributos entre ellos name para poder crear unos enlaces que cambien la página mostrada dentro del marco en línea. Luego hemos posicionado los elementos con etiquetas de Dreamweaver div pa que nos permite posicionar y cambiar el tamaño directamente con el ratón.

  En el sitio formulario hemos visto como crear formularios HTML: cajas de texto, áreas de texto, contraseñas, listas, casillas de verificación, opciones y botones. La etiqueta del formulario form tiene los atributos de la acción, el método de envío y el tipo de codificación.

  En el sitio Google hemos visto como insertar dentro de una página web un mapa de Google y un vídeo de YouTube.

• Sesión 11

  En el formulario de conexión hemos repasado los pasos esenciales de cómo crear un formulario. Luego hemos creado un formulario de encuesta donde hemos creado un formulario con un código HTML correcto que no hace uso de tablas y lo hemos formateado con estilos. Este formulario lo hemos creado picando código. Hemos usado las etiquetas frameset y legend junto a listas sin ordenar para agrupar los controles. Con la etiqueta optgroup hemos agrupado los elementos del cuadro combinado select. La etiqueta label y su atributo for nos ha permitido asociar un texto a cada control. En los estilos hemos usado selectores por atributo y la pseudo-clase focus.

  En el sitio medios hemos visto como usar una hoja de estilos para pantalla y otra para impresora. Se puede probar su funcionamiento desde la vista previa de impresión del navegador web.

• Sesión 12

  En el sitio flash hemos creado algunas películas de Flash. Hemos visto como colocar los ficheros en la página HTML. También hemos visto como crear un menú de botones y como crear una película que reproduzca un vídeo FLV.

• Sesión 13

  En el sitio javascript hemos visto como introducir Javascript directamente en el código de la página HTML, hemos visto los eventos y las funciones. Luego hemos probado los comportamientos de Dreamweaver que sirven para generar Javascript de forma automática. Hemos visto como crear mensajes y ventanas emergentes, ocultar y mostrar divisiones y modificar los estilos CSS.

• Sesión 14

  Un ejercicio para crear el sitio comportamiento que usa imágenes de sustitución mediante comportamientos de Dreamweaver. Se utiliza una plantilla de DW para crear una estructura idéntica en todas las páginas de la web.

  En el sitio sustitución CSS hemos creado el mismo efecto de imágenes de sustitución mediante CSS sin usar nada de Javascript. Además hemos marcado la opción actual del menú dándole una clase diferente de body a cada página.

  En el sitio atributos plantilla hemos creado una plantilla de DW que además de regiones editables también tiene atributos editables.

• Sesión 15

  En el sitio comportamientos hemos visto como cambiar la imagen de fondo alterando los estilos mediante Javascript. Hemos validado un formulario mediante comportamientos y hemos traducido los mensajes de error. Hemos creado un fichero .js que hemos vinculado a la página HTML. Hemos bajado y utilizado las bibliotecas de Javascript prototype y scriptaculous

  En el sitio estilos hemos visto como aplicar varias clases CSS a una sóla etiqueta HTML

• Sesión 16

  En el sitio php hemos visto como crear páginas PHP. Las páginas PHP sólo se pueden probar en un servidor web así que hemos de tener instalado XAMPP que incluye el servidor HTTP Apache.

  Hemos importado una base de datos a MySQL mediante la aplicación phpmyadmin. En el sitio neptuno hemos realizado páginas PHP que muestran información en formato HTML extraída de la base de datos.

• Sesión 17

  En el sitio neptuno hemos visto como generar páginas PHP de acceso a base de datos mediante DW. Hemos realizado consultas estáticas, paginación, fichas con filtros GET, páginas con enlaces a las fichas y una lista desplegable que acceda a las fichas.

• Sesión 18

  En el sitio visitas hemos creado un libro de visitas que los usuarios de la web pueden firmar. Es decir un formulario de inserción de registros y un listado cronológico inverso. Hemos realizado una copia de seguridad de la base de datos que habíamos creado mediante phpmyadmin.

  En el sitio acme hemos creado un nuevo sitio web dinámico cuya base de datos tiene dos tablas: artículos y categorías. La web tendrá una zona privada y una zona pública. En la zona privada hemos realizado la gestión de las categorías: listar, agregar, modificar y borrar.

• Sesión 19

  En el sitio acme junto a su base de datos hemos finalizado el gestor de contenidos y lo hemos asegurado mediante una protección de usuario y contraseña. Luego hemos empezado a realizar la parte pública.

• Sesión 20

  En el sitio acme junto a su base de datos hemos continuado el ejercicio del sitio dinámico. Para empezar hemos configurado un nuevo sitio según se indica en el ejercicio. Luego hemos mejorado la parte pública con búsquedas por categoría, por orden alfabético, con ficha, con imágenes de artículos y con un formulario de contacto.

• Sesión 21

  En el sitio acme hemos creado dos plantillas PHP con DW, una para la parte pública y otra para la parte privada de la web. También hemos creado dos hojas de estilos, una para cada plantilla. Hemos aplicado las plantillas a todas las páginas PHP. Hemos visto como subir la web y la BD a un servidor remoto y como configurar correctamente el archivo PHP de conexión a la base de datos. Con el phpmyadmin local hemos exportado la BD a un archivo SQL. Luego con el phpmyadmin remoto hemos importado (opción SQL) el archivo SQL.

• Sesión 22

  En el sitio acme hemos creado atributos editables en las plantillas y modificado la hoja de estilos para mostrar activa la pestaña actual.

  Hemos visto como instalar gestores de contenidos de software libre que usan PHP y MySQL: El blog WordPress, y la web multiusuario Joomla. Ambos tienen zona pública y privada y se pueden personalizar con temas o plantillas.

  Hemos creado el sitio sitio fuentes dónde hemos visto como incluir fuentes TTF y OTF en la hoja de estilos. Esta característica está admitida en algunos navegadores web. Para probar si funcionaba hemos bajado Firefox 3.5. En fontspace hay muchas tipografías libres disponibles para ser bajadas.

Enlaces

• Iconos
  • FamFamFam de 16×16px por Mark James
  • Iconos Crystal Clear de 128×128px por Everaldo Coelho
• Hospedaje
  • Hospedaje de pago: Nominalia y Arsys
  • Hospedaje gratuito: FreeHostia - En inglés, sin anuncios, subir por FTP, base de datos MySQL y lenguaje PHP.
• Bibliotecas Javascript
  • Prototype - facilita el disarrollo de aplicaciones web con Javascript
    
    • Forma de uso prototype por Sergio Pereira
    • Script.aculo.us es una biblioteca de Javascript fácil de usar, compatible con los navegadores para hacer que tu sitios web vuele
• Sistemas LAMP, MAMP y WAMP
  • XAMPP - Sistema de Apache, PHP y MySQL que se puede instalar en cualquier sistema operativo
  • Documentación PHP - Documentación oficial desde php.net
• Bases de datos
  • bdneptuno.sql.7z
  • bdmundo.sql.7z
  • bdcine.sql.7z