Practica 17

En esta practica 17 usaremos la paleta de "Imagen de substitución" y veremos el novedoso "Google web fonts"

· Tenemos el documento Illustrator de la tabla de elementos versionado en tipografía.
· Guardamos el documento para web y dispositivos móbiles y lo guardamos como gif, jpg o png; cualquiera de ellos nos sirve para lo que haremso a continuación.
· Abrimos Dreamweaver en un documento HTML y vamos a "Modificar/ Propiedades de la página" y clicamos en el apartado "Imagen de rastreo". Aquí buscamos el gif de esta tabla de elementos de tipografía y en cuanto a transparencia le ponemos un 50%. Aceptamos y vemos que nuestro gif tiene una transparencia y que encima de esta imagen podemos colocar elementos.

· Los elementos a colocar son cada cuadro de la tabla de elementos. Para hacer esto, podemos usar Photoshop o Illustrator. La forma de hacerlo es similar. Yo voy a explicar la de Illustrator.

· Para hacerlo en Illustrator vamos al panel de herramientas del lateral y veremos que encima de la lupa hay una herramienta llamada "Sector".





· Con esa herramienta podemos ir seleccionando cada cuadro de la tabla. Veremos que cada vez que hagamos un cuadro, nos coloca un número; este número lo usará a la hora de dar numeración a cada imagen que luego recorte.







· Si nuestro ordenador es potente, podemos darle guías y decirle a Illustrator "Sectores a partir de guías", también sirve en Photoshop. (Esta opción en illustrator se encuentra en: Objeto/ Sector/ Crear desde guías)

· Si lo hemos hecho a mano, guardamos para web y dispositivos, y en este panel de web y dispositivos, con la herramienta sector que se encuentra a la izquierda, seleccionamos sector a sector y lo guardamos como gif. Al guardar, en las opciones que nos da, le tenemos que decir que guarde los objetos seleccionados.

· Nos lo guarda en la carpeta "img" que siempre creamos y nos vamos a Photoshop.
· Ir a Photoshop nos ayudará a hacer la imagen de substitución. Para hacerlo, cogemos cualquiera de los cuadros y lo convertimos a escala de grises o invertimos el color y lo guardamos para web y dispositivos y como gif. (Yo he guardado todas las imágenes del documento como gif).

· Una vez tenemos la imagen original y la imagen en blanco y negro o invertida, abrimos Dreamweaver y dibujamos una tabla DIV PA (Paleta Diseño) encima de la imagen con transparencia, en el lugar correspondiente a la tipografía. Vamos a la paleta "Común" al apartado imágenes y en el desplegable clicamos en "Imagen de substitución" nos abre un menú, en este menú escogemos la imagen original y la imagen de substitución que será la imagen en blanco y negro o invertida.

· De esta manera, cuando pasemos por encima de cada imagen, veremos el efecto que hace.

· Dejo aquí unos ejemplos:













(Nota: A las imágenes de substitución de las imágenes de los cuadros en gris les he puesto un filtro de fotografía naranja para que no hubiera confusión con las imágenes de substitución de las otras)

Google Web Fonts

Dreamweaver nos da como opción una serie de tipografías, que son las que se encuentran en común en todos los ordenadores. Si en internet se incluye en una página la tipografía "Frutiger" por ejemplo y mi navegador no la interpreta porque no la tiene, yo no podría ver esa página con la tipografía correcta, sino que me pondría una de substitución. Para esto google ha creado las web fonts, fuentes que se encuentran en internet y que así cualquier ordenador con internet la puede visualizar. Estas fuentes son en formato vectorial.

http://www.google.com/webfonts

· Para incluir una de estas fuentes en nuestro documento seguiremos estos pasos:

- Primero, entramos en la web de google que he dejado arriba y cuando hayamos entrado clicamos en "Start Choosing Fonts". Elegimos la que deseamos utilizar y clicamos en "Quick-use". Seguidamente veremos que nos indica en inglés varios pasos. En el paso 3 nos deja un código. Este código lo tenemos que incluir en nuestro documento debajo del título de la pagina (<title>taulaperiodica</title>).
- Segundo, en el documento dreamweaver dibujamos un cuadro DIV PA y escribimos "Taula Periòdica" y veremos que en el menú inferior nos indica el nombre del ID de este cuadro que hemos dibujado. En mi caso es el "apDiv106". Vamos al código a buscar ID y veremos que se trata de un CSS.
- Tercero, vamos a la pagina de google web fonts de antes y en el paso 4, nos da un código CSS. Este CSS lo pegamos en el ID del cuadro donde habíamos escrito "Taula periòdica" que correspondía en mi caso al "apDiv106". Dejo una imagen que aclare la explicación.








Si todos estos pasos los hemos hecho con éxito, se debería ver algo parecido a la imagen siguiente.

Practica 16

En esta practica 16, empezamos con un documento nuevo, HTML.

Escribimos un titular, subtitular y un parágrafo. (cada una con su <h1>, <h2> y <p>)

Y nos vamos al panel de CSS y hacemos "Nueva regla CSS", nos sale el panel que vimos en la practica anterior y le decimos esta vez, "Etiqueta". Y donde nos dice, "Elija o introduce nombre para el selector" le decimos que por ejemplo sea, la etiqueta "h1" que es el titular.












·El resto de opciones que teníamos en ese desplegable eran:

- ID: Se refiere a estilos de cabecera, menú o pie de página.
- Clase: Se refiere a un elemento que determinamos en un cierto momento a un elemento.
- Etiqueta: Es cuando quieres redefinir una etiqueta, como en este caso, h1.

· Aceptamos y veremos que nos sale un panel que ya habíamos visto en la practica 15, donde ahora podremos redefinir la etiqueta h1. En la siguiente imagen podremos ver los cambios que he hecho:














· Como se puede ver en esta misma imagen, hemos creado un estilo CSS. Así que abrimos un documento CSS, cortamos de "style a style" en nuestro HTML (veremos que lo que los estilos que se habían creado, al cortar han desaparecido, como colores, tipo de letra, etc) y lo pegamos en el documento CSS. Cortamos los styles. Dejo una imagen para que se vea visualmente, ya que en la anterior práctica no se vio.













· Guardamos el documento y el procedimiento es igual que en la practica anterior, vinculamos el documento CSS y aparecerá de nuevo, el estilo que habíamos hecho con anterioridad.

· Una vez recuperados los estilos, veremos que en el panel "Estilos CSS" nos sale cada uno de las etiquetas que tenemos creadas con estilos CSS.














· Insertamos una etiqueta DIV y dibujamos una caja DIV PA. A la caja también podemos ponerle nombre.
· Ahora para acabar de definir las etiquetas, pegaremos un texto simulado. Seleccionamos un parágrafo y en el menú inferior, como veremos en la imagen, le decimos que su ID es por ejemplo "1paragraf" y hacemos una "Nueva regla CSS". Automáticamente nos tendría que salir "#1paragraf", sino, lo podemos poner a mano. Estamos definiendo un ID. Podemos hacer esto, con tantos parágrafos tengamos.












También podremos redefinir la etiqueta <p>














· Una vez hayamos definido <p> , nos saldrá todo el documento con el color y la letra que contiene <p> . Seguidamente, hacemos doble clic en por ejemplo #3paragraf y lo definimos. Todo el parágrafo definido con la ID de 3paragraf quedará definido tal y como lo hagamos en este paso.






· Hacemos un tipo de clase. Para hacerlo, vamos a "Nueva regla CSS" y en el desplegable le decimos que sea "Clase" y para el nombre, le diremos pro ejemplo ".vermell", aceptamos y pasamos a definirlo. Automáticamente nos saldrá en el desplegable del menú inferior en el apartado "Estilo"





· Ahora podremos definir cualquier cosa, con el estilo .vermell.

· Abrimos un documento nuevo e insertamos una etiqueta DIV con clase ID y en el menú que sale, le llamamos "cap" al tipo de ID. Hacemos una "Nueva regla CSS". Le decimos que el tipo de selector es ID y su nombre será "cap" y hacemos el mismo proceso con otro ID y lo llamamos "peu", pero esta vez en el menú "insertar etiqueta DIV en el apartado "insertar" le decimos en el desplegable "Después del inicio de la etiqueta" y automáticamente a su lado nos aparecerá la etiqueta que hemos hecho anteriormente, dejo una imagen para que se entienda lo que explico:







· A continuación pasamos a definir la regla #peu. Si miramos en el apartado "Posición" veremos en primer momento en donde dice en inglés "Position" un desplegable, lo abrimos y vemos varias indicaciones que le podemos dar. Tenemos fijo, relativo, estático y absoluto. Si clicamos en absoluto, podremos mover esta caja DIV por la pantalla a nuestro aire.

Practica 15

Estábamos hasta ahora, haciendo web solamente con HTML, pero ahora utilizaremos una nueva tecnología, llamada CSS (Cascade style sheets) que en Español es, hojas de estilo en cascada.
Estas hojas de estilo se parecen a los estilos de objeto. CSS lo que hace es mejorar HTML.
Con CSS podremos hacer un mismo estilo para varias páginas.

CSS determina que estilo tiene, por ejemplo, una cabecera, una caja de texto. Por ejemplo con que color, tipo de letra, etc.

Hasta ahora con HTML usábamos para definir una etiqueta "<>", CSS usa los corchetes "{}".

· Cosas que utilizaremos con CSS:

- Estilos de clase: Sirve para aplicar algo que indistintamente se puede poner a algo mismo (Por ejemplo, estilo de gafas, se puede aplicar a todas las personas que usen gafas).

- Etiquetas DIV: Sirven para hacer cajas con propiedad.

- Padding: Hacer espacio reservado.

-Hidden: Hacer una caja invisible.

· Y ahora para empezar la Practica 15, abriremos un documento nuevo CSS. Seguidamente abrimos un documento HTML y vamos al apartado Diseño e insertamos una etiqueta DIV, (Nos pedirá un nombre de clase y uno de ID, si no le damos nombre, pondrá uno por defecto).
· A continuación dibujamos DIV PA. En el menú inferior, veremos que clicando encima del cuadro, nos sale unas opciones, en Dreamweaver 8, lo llama "ID de capa" y en Dreamweaver de Adobe lo llama "Elemento CSS" en ese apartado, ponemos "Caixa1" para denominar de alguna forma nuestra caja.
· Veremos que podemos escribir en nuestra caja. Podemos hacer tantas cajas queramos, ponerle un color de fondo, una imagen, etc.
· Si nos fijamos bien cuando tenemos seleccionada la caja DIV, veremos que en el menú inferior, sale la opción, "Indice Z", esto funciona como si de una capa de Illustrator o photoshop se tratara.









· Debajo de ese mismo, pone, "Vis", esto transformará nuestra caja en invisible, visible, heredada...





· Ahora veamos, los estilos CSS que ha hecho:














· Si en el panel que hemos visto anteriormente (panel "Estilos CSS"), clicamos dos veces sobre por ejemplo "Caixa1" veremos las opciones que nos da el programa para "Tunear" nuestra caja con estilos.








· En el mismo panel de "Estilos CSS", hay un botón que se llama, "Nueva regla CSS", también podremos modificar el estilo o crear uno y aplicárselo a lo que queramos, esto lo veremos en la siguiente práctica.

· Ahora vamos a la parte del código y cortamos todo lo que sea estilo CSS. (Va desde "style hasta style)













· A continuación, lo pegamos en el documento CSS que habíamos creado. (veremos que se ponen en rosa las letras). Antes de guardar el documento, debemos borrar las etiquetas "style" ya que esto aún hace referencia al código HTML y puede haber conflicto. Guardamos el documento CSS.

· Vamos al documento HTML y vamos a la paleta de "Estilos CSS" y le damos al botón "Adjuntar o Vincular hoja de estilo".







Ya tenemos nuestro estilo vinculado, que podremos aplicar a tantas páginas queramos.

Practica 14, segunda parte

Recordamos que como principal tenemos Mainframe, que te conserva el marco y te abre la web dentro de la página. Esto metido en un marco nos ayudará a que el menú quede fijo y la página varíe a medida que vayamos clicando en el menú.

Pues bien, Hacemos una página nueva.

· Vamos a la paleta diseño y seleccionamos “Marcos: marco superior” y le decimos que será Mainframe.

Se nos divide la página en 2, veremos que en la parte superior de la página hay un hueco con un tamaño de cabecera y en la inferior hay hueco como para texto y otros.

· Si automáticamente no nos sale seleccionado el código Framset, clicamos en la mitad de estos dos y veremos que nos aparece seleccionado en azul dos códigos “Framset”, clicamos en el primer Framset o seleccionamos la ruta que sale en el código Framset y automáticamente en el menú inferior vemos que nos aparece unas nuevas opciones.

·Al clicar en el Framset primero, le diremos que su origen será la cabecera (En este caso la cabecera se llama "Tit")

·Clicamos en el segundo Framset y le diremos el origen de la página de la parte inferior. (En este caso la parte inferior se llama "home")

· Nos pedirá automáticamente que guardemos la página. Guardamos como index. Y ya podremos ver el resultado de nuestra web.

· Resumen de Framset:

- Voy a la paleta de diseño, selecciono "Marco superior", en teoría automáticamente me sale un código seleccionado con 2 Framset, cada uno tiene una ruta del ordenador. (Sino sale seleccionado, puedo clicar en el borde del marco que sale en la mitad de la página)

- Selecciono el primer mainframe, y le pongo de origen, "tit.html" (cabecera)

- Selecciono el segundo mainframe y le pongo origen a "home.html" (parte inferior). Automáticamente me dice guardar y guardo como index y ya sale automáticamente el cambio.

· No obstante y para que funcione, clicamos en la imagen de la cabecera y en el menú inferior en el apartado “Destino” le indicamos que sea Mainframe, y en el texto de debajo la imagen (por ejemplo, Home), también le indicamos que sea Mainframe. Guardamos todo.

· Vamos a la página “postales” y veremos que hay una imagen que parece un mapa con varias rutas. En cada zona de la ruta, haremos una zona interactiva. En cada zona interactiva irá una página html diferente y su destino será Mainframe. De esta forma, cuando seleccionemos por ejemplo “Cardona”, pues nos llevará hasta la página que hable de Cardona sin que desaparezca el menú superior.

· Una vez hecho esto, vamos a la página Home, donde teníamos un cuadro de imagen sin nada. En este lugar colocaremos un video del you tube, escogemos un video y debajo del video veremos el botón “Compartir” y automáticamente se despliegan otros botones, como el de insertar, le damos a insertar y nos aparece seleccionado un código. Copiamos este código, vamos a la página home, seleccionamos el cuadro donde va a ir el video y colocamos el código de you tube en él, usando unas medidas de cuadro apropiadas a la miniatura del you tube, para que podamos ver el video correctamente, por ejemplo 166 x 264 píxeles.

· Por último, vamos a confeccionar unos detalles en la cabecera.

· Cogemos las imágenes (.gif) que aparecen en la cabecera y las abrimos con Photoshop. Le damos un poco de brillo y la volvemos a guardar para web como gif de 16 colores y la guardamos con otro nombre, por ejemplo “Home_over”

· Volvemos a Dreamweaver y vamos a la paleta “Común” y abrimos botón de “imágenes” y en el menú desplegado, clicamos en “imagen de substitución”. Nos abre una pequeña ventana, donde le podremos decir, cual es la imagen original y cual queremos que sea la de substitución. La original será “home” y la de substitución será “home_over”

A lo mejor, más tarde nos puede ocurrir algún fallo, como por ejemplo, que desaparezca el color de la cabecera. Para asegurarnos que no pase, aremos lo siguiente:

· Esto que hay seleccionado que tiene la letra en gris, debemos borrarlo para que no cause conflicto. Después de suprimirlo, nos quedará el texto en azul

Después comprobaremos que ya funciona correctamente y si es necesario, volveremos a vincular las páginas.

Practica 14, primera parte

Esta práctica es una de las más largas, así que dividiremos la práctica 14 en 2 partes.

· Primero vamos a empezar por crear marcos.

· Lo primero, tenemos un documento ya preparado con unas tablas por rellenar (Documento pallerbase), lo que es un esqueleto de una web.

· Dentro de estas tablas, tenemos un símbolo que nos indica que no se encuentra la imagen que debería ir allí, así que vamos a la carpeta de imágenes (img) de la practica 14 y buscamos la imagen que va en ese lugar y la vinculamos (Se vincula con el menú inferior, en el apartado “Origen” y con la flecha le indicamos que imagen es).

· Bien, veremos que cuando hemos vinculado la imagen nos cambia el código y nos indica cual es la dirección nueva en la que se encuentra la imagen.

También podemos ir a "Edición/ Buscar y reemplazar" y nos aparecerá un menú: (Esto seleccionando el código o la imagen desaparecida)

· Le indicamos que lo que buscamos es código fuente, en el documento actual y que busque la ruta que tenía y que reemplace esa ruta por la actual. (Quitándole el código y dejando solo la ruta que utiliza para buscar la imagen) Aquí dejo un ejemplo:

· Y continuamos haciendo lo mismo para poner una imagen de fondo.

· Tenemos dentro de la carpeta html, varias subpáginas. La idea básica es esta: En la parte superior habrá un menú con enlaces a varias de estas subpáginas.

· Entonces en el menú seleccionamos la imagen que identifica la página a la que se vinculará y vinculamos la página correspondiente. En el código veremos el cambio.

· En el borde de la imagen, le indicamos que sea 0, ya que si tiene un grosor, se notaría visualmente en el diseño.

· Una vez que ya hemos vinculado las páginas siguientes, nos encontramos que tenemos la página del correo.

· Para enlazar la página al correo, en el menú inferior, veremos la opción “Vinculo” (En el mismo apartado donde le indicábamos la vinculación a las subpáginas), ahí le indicamos “mailto:” y a continuación nuestro correo.

El correo no lo dejaremos visible en la web, ya que en el código fuente se puedever el correo y la gente con malas intenciones te puede enviar spam.

· Bien, ahora para asegurarnos que está todo correcto, necesitaremos ayudas visuales. (Ver/ Ayudas visuales/ Bordes de marco).

· En el mismo panel, en Destino, si seleccionamos los apartados que nos indica veremos que hay varias opciones:

- Blank: Que se direccione a una ventana nueva

- Parent: Se usa con marcos y te lleva a la vista de toda la ventana

- Self: Se abre en la ventana donde estamos, pero en una página diferente

- Top: Se abre en otra ventana a vista completa

Y como principal tenemos Mainframe, que te conserva el marco y te abre la web dentro de la página. Esto metido en un marco nos ayudará a que el menú quede fijo y la página varíe a medida que vayamos clicando en el menú.

Hacemos una página nueva.

Vamos a la paleta diseño y seleccionamos “Marcos: marco superior” y le decimos que será Mainframe.