Clase Diseño en InternetClase 1

El diseño en Internet requiere, antes de trabajar, dos claves: Organización y Planificación. Para ello, no hace falta herramientas técnicas, sino tener idea de qué se quiere hacer. Luego veremos cómo hacerlo.En este sentido, el diseño web tiene, como punto de partida, elementos sencillos: boli y un anotador.El consejo es, por un lado, apuntar en un anotador ideas, esbozar diseños, etc; antes de armarlos en el Dreamweaver. Allí tambien conviene apuntar estilos de letra, colores, etc; para que nuestra página tenga un cierto estilo.Y dentro de la necesaria organización, conviene tener todo bien planificado en carpetas, porque el Dreamweaver trabaja con archivos vinculados a determinadas carpetas. Su desaparición, cambio de nombre, o inclusive la modificación de un carácter, altera la estructura, nos marcarán errores, y habremos perdido tiempo en trabajar de más. Y en ocasiones, hay que volver a empezar.

Antes de realizar y trabajar en El Mundet, vamos a realizar algunas páginas de prueba. Porque la otra forma de diseñar es bajo la metodología del “ensayo y error”.

1- CREAR CARPETAS

- Recuerden en que ordenador esta cada uno sentado, porque ese será su lugar durante todas las clases de diseño web. En MIS DOCUMENTOS hay una carpeta que dice web_xxxxx. Reemplacen las xxxx con su nombre, pero atención: escribanlo en minúsculas, sin acentos ni espacios.

- Dentro de la carpeta personal, verán una subcarpeta llamada “imagenes”. Y allí, dentro, otras dos subcarpetas, llamadas “bruto” y “ok”.

- En “ok”, se alojarán las fotos ya editadas, listas para ser subidas a la web. En “bruto”, las imágenes antes de modificarlas. Pero es muy importante saber dónde se guardan las imágenes: el error más frecuente es colocar todo en “bruto”, y luego estar dando vueltas para hallar los archivos necesarios

IMPORTANTE: todos los nombres de textos, fotos, carpetas, documentos de Dreamweaver y Photoshop se escriben en minúsculas, sin espacios y sin acentos. SIEMPRE. Si el archivo tendría más de un nombre, usar guión bajo: “mi_web”, pero nunca “Mi web” o “Mi_WEB”. Tampoco usar caracteres como “ñ” o “ç”. Es que lo más probable es que el código lo malinterprete y nos marque error.

2- DEFINIR SITIO

- Abrimos el Dreamweaver. En la barra de la derecha, en la opción ARCHIVO, bajar la pestaña e ir a ADMINISTRAR SITIO

- Se despliega una ventana. Poner la opción NUEVO SITIO- Con la pestaña de BASICO, vamos a la casilla que nos pregunta qué nombre

queremos para el sitio. Ponemos web_xxxxx (donde las xxxx son el nombre personal)... y haced click en SIGUIENTE.

- A la pregunta de que si deseamos trabajar con una tecnología de servidor como ColdFusion, ASP.NET, ASP, JSP o PHP?, seleccionad NO y haced click en SIGUIENTE.

- A la pregunta “¿Cómo desea trabajar con los equipos durante la etapa de desarrollo?”, seleccionad la primera opción (“Editar copias locales….”).

- En la misma pantalla, donde pregunta “¿En qué lugar del ordenador desea almacenar los archivos?”, aseguraos que está seleccionada la carpeta con su nombre, dentro de MIS DOCUMENTOS. Por las dudas, abran la carpeta amarilla y busquen la carpeta vuestra en MIS DOCUMENTOS. De este modo, Dreamweaver sabe donde está todo lo que vamos a colocar en la web.

- Haced click en NEXT- A la pregunta “¿Cómo conecta con su servidor remoto?”, seleccionad

“LOCAL/NETWORK” (aquí, cuando tengáis un servidor en Internet para acoger vuestra página web, es donde hay que ponerla)

- En la misma pantalla, debajo, donde pone “¿En qué carpeta del servidor desea almacenar los archivos?”, aseguraos de nuevo que está seleccionada la carpeta con su nombre en MIS DOCUMENTOS. Por las dudas, hagan clic en la carpeta amarilla para verificar si está bien seleccionada. Y luego SIGUIENTE

- A la pregunta “¿Desea activar la desprotección y protección de archivos para que usted y sus colaboradores no puedan editar el mismo archivo simultáneamente?”, seleccionad “NO” y haced click en SIGUIENTE.

- En la siguiente pantalla, una vez más, comprobad que los datos sean los correctos

- Click en LISTO, y ya tenemos definido el sitio web.

Este paso puede parecer burocrático, largo y complicado; pero es esencial porque así Dreamweaver tiene en claro dónde se encuentran los archivos, y a partir de allí, comienza a organizarse. Por eso, repetimos: cambiar una carpeta de lugar altera la estructura como un castillo de naipes. De ahí que primero hay que organizarse uno para que el programa pueda trabajar en orden.

3 – CELDAS Y TABLAS

Dreamweaver no trabaja como una página de Word. Más bien, está más cercano al Excel, ya que su organización se basa en tablas. De una tabla central, se van subdividiendo, fusionando, creando y eliminando hasta llegar al diseño deseado.Por eso, lo más recomendado es dibujar bocetos de diseño en el apuntador, y una vez que estamos convencidos de lo que queremos hacer, lo volcamos en el Dreamweaver

Como primero hay que crear una página nueva, ir al menú. En ARCHIVO, ir a NUEVO. Se despliega una pantalla. Hacer clic en las primeras opciones: PÁGINA BASICA y HTML, y luego en CREAR

En la página en blanco del Dreamweaver, vamos a insertar una tabla. Hay dos opciones:

a) Ir a INSERTAR TABLAb) Hacer click en el ícono de Tabla

Dreamweaver nos preguntará cómo deseamos el diseño. Le decimos que queremos una tabla de 5 filas (rows) por 1 columna. El ancho de la fila (table width) lo establecemos en 1000 pixeles. Los demás valores (bordes y espacios entre celdas) lo establecemos en 0.

y nos saldrá un gráfico así:

IMPORTANTE: Hay que recordar de guardar el archivo cada tanto. Y recordemos: la página inicial, la primera, se llamará index.htm. Ni “primera página” ni “página 1” ni “inicio”. La primera es index.htm porque, para el Dreamweaver, es el nombre prefijado para la página inicial.

4 – TEXTOS Y FOTOS

Cómo esta es una página de prueba, haremos textos simples para conocer mejor los comandos.

Vamos a distribuir las celdas así

En la primera celda, entonces, ponemos un título cualquiera, por ejemplo “Master en Periodismo BCNY”

En la fila del centro, vamos a colocar una foto. El tamaño ya fue pre-fijado, más adelante aprenderemos a retocar imágenes.

a) Colocar el cursor en la celda del mediob) Ir a INSERTAR IMAGEN o hacer click en el ícono de Imagen, y luego ir a

la opción IMAGEN

Vamos a la carpeta imagenes ok, y seleccionamos la imagen “foto”. Se desplegará un cuadrito preguntando qué texto le ponemos a la imagen. Pasamos de él, ponemos OK, y nos quedará esto:

TITULO(espacio)

(espacio)

FOTO

ICONOS

Seleccionamos la imagen, quedarán sus bordes marcados en color negro, y la centramos en la celda con el comando ALINEAR AL CENTRO, que se encuentra en la barra de PROPIEDADES (la barra inferior)

Luego, se trata de crear alternativas entre el color de la letra y los fondos. Para cambiar el color de la letra, se hace igual que en el word: se “selecciona” el texto con el ratón. Para cambiar el color de la celda, basta con hacer click en ella y cambiar desde el menú de Propiedades. Estos son los comandos

Y para ver cómo queda la página en el Internet Explorer (o sea, que se vea como se publicaria en Internet), sólo hay que apretar F12

Color de letraColor de fondo

Tipo de letra Cuerpo de letra Negrita y cursiva

Alinear texto

5 – PROPIEDADES DE PAGINA

Verán que en la parte superior de la página, vista como página web, hay una línea que presenta el documento. Que esta parte diga “Documento sin título” queda fatal, por lo que hacemos este paso para cambiar la propiedad de la página:

En la parte superior, hay un recuadro blanco donde, directamente, se puede colocar el título de la página.

Otra opción es el comando CTRL + J, y se despliega el cuadro de PROPIEDADES DE LA PAGINA. En TITULO / CODIFICACION ponemos el nombre de la página, pero en las otras opciones también podemos predeterminar los colores del texto, del fondo, el color de los vínculos web, las tipografías, etc. Se trata de analizar, probar y experimentar.

6 – ICONOS

Vamos a colocar cinco íconos, o sea pequeños cuadros gráficos, que nos conducirán a otras páginas web, ya sean internas (dentro de la misma página) o externas (otras páginas web).

El primer paso es ir hasta la última celda, y marcarla con el cursor. Allí colocaremos una tabla.

Para eso, recordemos, vamos al icono de TABLA , en el menú superior, y le damos estos valores:Filas: 1Columnas: 5Ancho de la tabla: 1000 pixelsY los demás valores, en 0

Luego, colocamos los tres íconos. Tal como insertamos antes la imagen de la foto,

vamos al ícono de IMAGEN, y en la carpeta imagenes ok, seleccionamos el ícono de inicio_logo. Repetimos los pasos, en las otras cuatro celdas, con los íconos de barrio_logo, mper_logo, il3_logo y ub_logo, colocando uno en cada celda. No se preocupen si las celdas se mueven a la izquierda, cuando se coloquen todos los iconos quedaran centradas

Nos tiene que quedar esto:

7 - VINCULOS

Los vínculos pueden ser internos o externos.

Los internos son los vínculos que conectan las páginas de un mismo sitio. Por ejemplo, en la web del Master en Periodismo BCNY, funciona este “árbol”

De cada página, surgen nuevas subpáginas. De allí, más subpáginas, fotos, archivos de audio, lo que quieran; todo dentro del “paraguas” de la web page.

Por otra parte, los vínculos externos son aquellos que conducen a otras páginas web, fuera de nuestro sitio.

En este esquema, los vínculos internos estan marcados con negrita, y los externos con azul.

Para marcar vínculos internos:

Dejamos el icono de “Inicio” (porque es la página en la que estamos). Elegimos el segundo ícono, el de Barrios, y vamos a la opción VINCULO, en la barra de Propiedades. Hacemos clic en la carpeta amarilla, y se despliega un cuadro, en donde elegimos la página que queremos vincular: se llama “barrio.htm”

Para marcar vínculos externos:

Para vínculos externos, el procedimiento es el mismo: marcamos el tercer ícono, y en la opcion VINCULO, escribimos la página web a la que queremos vincular. Eso sí: siempre, siempre se encabeza con http://www.....etcétera. En este caso, escribimos http://www.masterperiodismo.fbg.ub.es

Un truco: si tenemos la página a la que queremos vincular abierta, copiamos la dirección web y, en el casillero de VINCULO, y le damos a la opción Pegar.Pero es muy posible que no querramos que el internauta se vaya de nuestra página, por más que lo direccionemos a otra web page. Para evitar su partida, una vez que hayamos seleccionado la página web externa, hay que ir a la opción DEST y allí seleccionar marcar el comando _blank. Y así, indicamos que se abra una página nueva cuando haga clic en el vínculo.

Repetimos el proceso con el ícono de IL3, cuya dirección web es http://www.il3.ub.edu ; y con el de la UB, cuya dirección web es http://www.ub.edu

Y esto es todo por esta clase. Para la próxima, traigan el archivo de Word con el trabajo del barrio, y al menos 3 fotos horizontales.