Diseño Web 1 - Crear un sitio web con DIVs

Tenemos 16 vídeos con los cuales se aprenderá a crear un sitio web estándar. Sigan la secuencia de los primeros 7 vídeos para entender los temas básicos, los siguientes 9 vídeos se tratan de un proyecto desde el boceto hasta la creación de las paginas internas. Mas adelante pondremos vídeos de temas relacionados como menú desplegable, uso de plantillas y scripts.

Esta es la secuencia de los vídeos:

1 - Diseño web 1 - Organización del sitio

El orden es fundamental para trabajar en el diseño. En este vídeo aprenderás a organizar tus archivos originales y los que se subirán a la web.

- - - - - -

2 - Diseño web 1 - Creación del sitio en Dreamweaver

Dreamweaver tiene la opción de administrar sitios completos enlazándose con la carpeta en donde se guardan los archivos html e imágenes. En este vídeo aprenderemos a crear un sitio web para trabajar en nuestra computadora.

- - - - - -

3 - Diseño web 1 - Configuración del sitio en Dreamweaver

En este vídeo veremos la configuración básica de nuestro archivo html (pagina web). Ajustaremos las propiedades básicas como bordes y fuente predeterminada.

- - - - - -

4 - Diseño web 1 - Insertar DIVs

La diagramación de un sitio web esta sujeta a ubicar las partes de este en contenedores (DIVs), por ejemplo un banner, un botón o una imagen estarán ubicados en un DIV al cual se le asignaran propiedades (CSS) como medidas y ubicación en la pantalla.

- - - - - -

5 - Diseño web 1 - Trabajar con multiples DIVs

Una vez comprendido el proceso de creación y asignación de propiedades de un DIV procederemos a trabajar con múltiples DIVs.

- - - - - -

6 - Diseño web 1 - Centrar los DIVs

Ya sabemos como crear y posicionar los contenedores (DIVs) ahora solo falta centrar la pagina para que nuestro sitio este siempre al medio de la pantalla en cualquier tipo de resolución.

- - - - - -

7 - Diseño web 1 - Centrar los DIVs 2da parte

Para centrar la pagina de nuestro sitio solo debemos agregar un par de DIVs y darles unas propiedades (CSS) básicas.

- - - - - -

8 - Diseño web 1 - Boceto y Layout del sitio web

Para crear un sitio web hay que seguir unos pasos básicos como crear uno o más bocetos que muestren la diagramación de las paginas. Empezamos con un boceto a mano y después en el programa Illustrator creamos la diagramación de los respectivos contenedores (DIVs) con sus medidas y propiedades.

- - - - - -

9 - Diseño web 1 - Guardar imagenes para la web

En el programa Photoshop tendremos el diseño de nuestro sitio web. Ahora deberemos guardar las imágenes separando lo que es el fondo del grupo de imágenes que tendrán una función en nuestro sitio.

- - - - - -

10 - Diseño web 1 - Fondo de página centrado

Una vez que tenemos la imágenes listas procederemos a crear los DIVs principales y centrar el fondo de la página.

- - - - - -

11 - Diseño web 1 - Armado de los DIVs

Una vez que tenemos en fondo centrado empezaremos a insertar los DIVs que contendrán todos los elementos de nuestra pagina. Utilizaremos la técnica de copiar y pegar para trabajar rápido.

- - - - - -

12 - Diseño web 1 - Propiedades de los DIVs

Ya tenemos los DIVs creados ahora es cuestión de asignarles propiedad mediante las Hojas de estilo (CSS). Empezaremos por la parte superior de la pagina.

- - - - - -

13 - Diseño web 1 - DIVs con textos reales (html)

Cuando tenemos que usar texto real (html) podemos crear DIVs con propiedades para el texto. En este vídeo insertaremos 2 DIVs que contendrán texto real, cada uno con diferentes propiedades como tamaño de la fuente.

- - - - - -

14 - Diseño web 1 - Creando los enlaces (links)

Es hora de crear los enlaces, para esto usaremos los DIVs del menú principal como elemento de enlace.

- - - - - -

15 - Diseño web 1 - Imagenes intercambiables (hover)

Ya habiendo enlazado los botones podemos crear el efecto de cambiar la imagen de estos al pasar el mouse sobre ellos. Este efecto se logra con una pequeña linea de código y una copia de la imagen con algún cambio.

- - - - - -

16 - Diseño web 1 - Creando las paginas internas

Ya terminada la pagina principal pasaremos a crear las internas. Utilizaremos una técnica simple que consta de eliminar los DIVs que serán diferentes y crear los de la nueva pagina.

- - - - - -

17 - Diseño web 1 - Creando una plantilla

Las plantillas (Template) nos permitirán simplificar el trabajo de creación y modificación de aquellos sitios en los cuales solo varía el contenido (textos e imágenes). Hay que recordar que para trabajar con una plantilla es necesario el haber creado un sitio web (ya lo vimos en el video #2) y luego crear la plantilla.

- - - - - -

18 - Diseño web 1 –Divs y estilos en la plantilla

Una vez creada la plantilla se deberá crear los Divs y los estilos, en este caso hemos utilizado la información de nuestro sitio creado anteriormente (copiando y pegando). Podremos ver que los estilos se crearan en un archivo Css externo que estará enlazado a la plantilla y a las paginas html

- - - - - -

19 - Diseño web 1 – Fondos diferentes en cada pagina

Si queremos que cada página tenga un fondo diferente deberemos agregarle un región editable para el código del estilo. Esto se puede aplicar para diferentes partes de la plantilla como la cabecera o pie de página entre otros.

IPP- Desarrollo de Páginas Web

Los videos ya estan subiendose en el canal de Youtube, solo faltan subir los 6 últimos. Recuerden seguir la secuencia : 1 - Diseño web... 2 - Diseño web...

El día viernes 22 estare publicando el post con la explicación detallada.

Pueden ir viendo los videos en el canal Edugrafico en Youtube:

- Ir al canal Edugrafico

Trabajo 2 - animación

A continuación encontrarán el enlace con las instrucciones y materiales para armar el fenakitiscopio.

- Materiales

- Instrucciones para la animación

- Instrucciones para el armado

Publicaciones digitales

Ya voy a publicar en PDF revistas sobre diseño, 3D, fotografia y VFX. Estoy armando el equipo paradar contenidos de calidad y que gusten.

Tesis de maestria en educación superior

He escogido como tema para mi tesis de la maestría el desarrollo de una metodología didáctica para la elaboración de material de apoyo a utilizarse en herramientas multimedia. Es decir cómo se debe elaborar todo material a utilizarse en una herramienta multimedia (TV, PC, proyector, etc.), me estoy enfocando en la metodología didáctica, como deben elaborarse estos materiales, su estructura, desde la conceptualización pasando por la interface y elementos visuales hasta la redacción creativa.

Esto lo aplicare primero a mis cursos de diseño de páginas web ya que son más complejos para la mayoría de alumnos debido a que se trata de manejar estructuras y código lo cual no es fácil para ellos.

¿De que se trata esto?

Es un recurso valido para evaluar y tratar de mejorar la labor del docente y/o capacitador involucrado en el mundo del diseño grafico y sus vertientes. Se que servirá como aporte para todos aquellos que están involucrados en esta grandiosa profesión que día a día me sorprende por sus extraordinarias expresiones.