Practica 13

Como siempre y antes de empezar:

· Abrimos Wuala
· Abrimos Dreamweaver
· Creamos la carpeta de Practica13 en el usuario (ags2/web)
· Crear la carpeta con el mismo nombre en Wuala (Web/ Practica13)
· En dreamweaver vamos a Sitio/ Nuevo sitio o Administrar sitio y Nuevo

Esta vez tenemos que configurar una pagína web con nuestro curriculum vitae.

· Lo primero, rellenar los datos
· Podemos también cambiar el fondo del documento (Modificar/ Propiedades de la página)










· Y a continuación, insertaremos tablas. Tablas se encuentra en la pestaña común.
Antes, podemos incluir nuestra imagen en el curriculum si queremos. Yendo a la carpeta del usuario (Ags2), a la carpeta web/ img y metemos en la carpeta la imagen que queremos y vamos al panel de archivos y le damos a actualizar y ya saldrá la imagen, solo hará falta vincularla.







Las webs de finales de los 90 se dibujaban con tablas. Estas tablas se adaptan al texto y podemos poner fijo un tamaño de celda de estas tablas.
Estas tablas las insertamos para introducir dentro de ella el curriculum. En caso de equivocarnos al hacer la tabla, siempre podemos seleccionar la tabla e ir a Modificar/ Tabla. O en el propio código web, cambiarle el tamaño.














· Si queremos cambiar el color de fondo de una celda, seleccionamos la celda que queremos con Control + clic en la celda y abajo veremos las opciones que nos da Dreamweaver, aparte de cambiar el fondo de la celda, darle color al marco de la celda y incluir un "Web patterns" o imagen de fondo. Además también podremos centrar el texto o orientarlo a la derecha, ponerlo en linea de base o superior







· Otra de las opciones dentro de las celdas se encuentra al seleccionar una celda y darle al botón derecho.












· Siguiendo con el tema tablas, existe lo que se llama, espacio reservado. El espacio reservado consiste en insertar una tabla dentro de otra. Espero que esta imagen explique gráficamente de qué se trata:














· Ocurre que cuando insertamos una celda dentro de la otra, se pueden crear espacios en el código (& nbsp ;), esto deberemos eliminarlo para que no nos de problemas.

· Para poder clicar bien las tablas, veremos que en la ventana del programa, encima del panel superior, nos indica varias cosas.








· De esta manera es más accesible modificar la tabla.


Luego podemos incluir una tabla con un menú lateral o abajo de la tabla un inicio y anclarlo a la parte superior del documento Curriculum vitae, así podremos navegar mejor por la página.

Practica 12

Como siempre y antes de empezar:

· Abrimos Wuala
· Abrimos Dreamweaver
· Creamos la carpeta de Practica12 en el usuario (ags2/web)
· Crear la carpeta con el mismo nombre en Wuala (Web/ Practica12)
· En dreamweaver vamos a Sitio/ Nuevo sitio o Administrar sitio y Nuevo

En esta práctica 12 tenemos un texto ya creado, el texto es de ipod y apple y lo que tenemos que hacer con él es, maquetarlo.

En anteriores post vimos unas etiquetas que servían para hacer cabeceras.
*· Cabecera: <h> </h> o <h1> <h2> <h3> (para incluir varios títulos).
Aunque si queremos ahorrarnos el incluir etiquetas, Dreamweaver nos da opciones para lo mismo.











Podemos Utilizar tantas cabeceras o títulos como queramos e iremos viendo el resultado en la pestaña "Diseño" y en la pestaña "Código"

Una vez tengamos todos los encabezados, tenemos una imagen en la carpeta img que va en la parte superior de la página.
· Vamos a "Insertar/ Imagen" e insertamos la imagen correspondiente.
· Una vez insertada la imagen, veremos en el código que nos señala el tamaño de la imagen y el nombre de la imagen, esta es la información que utiliza Dreamweaver para informarnos sobre la imagen que hemos puesto.

· Ahora vamos a la pestaña "Común" y buscamos la herramienta "Anclaje con nombre" y vamos al texto de la cabecera que queremos anclar (clicar al principio del título). Nos preguntará el nombre que le queremos poner y le ponemos el nombre de la cabecera (por ejemplo, "Divertirse").








En el inicio de la cabecera nos saldrá un icono con el dibujo de un ancla. Ejemplo:





· Ahora vamos a utilizar una herramienta nueva. Se encuentra en la parte inferior junto al puntero cuando seleccionamos la imagen. Con esta herramienta podremos hacer que en el lugar donde la apliquemos sea una imagen "Clicable".






· Cogemos la herramienta cuadrado por ejemplo y hacemos un cuadrado encima de la pantalla del ipod.














· Y a continuación le indicamos cuál será el destino de ese cuadrado. Por ejemplo, "Divertirse", "Divertirse" es el nombre del anclaje con nombre que le pusimos anteriormente. Si no se ha vinculado bien el cuadrado al título, podremos hacerlo con la herramienta siguiente:





Veremos que sale una flecha del icono que nos permite indicarle a qué lo queremos vincular.
· Cada zona de la imagen la vinculamos con un título.

Esto lo haremos con tantos títulos o cabeceras tengamos.

Cuando naveguemos por esta página que hemos creado, ocurre que una vez hayamos llegado al final de la pagina, para volver al inicio de esta misma debemos mover la barra lateral o usar la rueda del ratón, pero eso lo podemos solucionar de forma fácil.

· Escribimos abajo de todo, o donde nos interese, la palabra Inicio por ejemplo y vamos a la parte superior del todo, donde la imagen del ipod y seleccionamos en la parte donde no hay la imagen, ahí incluimos un anclaje que le llamamos "inicio" aceptamos y volvemos a abajo, donde Inicio y seleccionamos la palabra y veremos que en el menú de abajo nos dice, "Vínculo" y escribimos "inicio" o utilizamos la herramienta que nos da Dreamweaver para vincular.

· Una vez hecho, vamos a archivo, vista previa en el navegador y ya podremos ver como ha quedado nuestra página.

Guardamos la pagina como index.html

Práctica 11

Como carta de presentación cabe incluir unos conceptos sobre HTML.

· HTML es un lenguaje de descripción, describe el contenido de la página.
· Javascript es un lenguaje de programación, Javascript es el que recuerda de que página venimos cuando navegamos por la web.
Antes de Javascript existía el Ajax.
· Css, es el que controla el aspecto visual de nuestra página.

· Para empezar con la práctica 11, deberemos crear varias carpetas y utilizar el programa Dreamweaver.

Creación de carpetas:

· Como se dijo en anteriores post, creamos una carpeta con un nombre, sin espacios, en la carpeta Web del usuario, dentro de esta carpeta, incluimos la carpeta img.

· De nuevo creamos otra carpeta, con el mismo nombre, pero esta vez en Wuala, si no viene por defecto la carpeta web, creamos una y le damos permisos, un ejemplo es el de la siguiente imagen:


· Aquí le indicaremos que sea público, con lo que veremos que el color de la carpeta será de color azul.


· Abrimos Dreamweaver y antes de empezar deberemos fijarnos en un detalle:



El significado de esto es que según la resolución con la que hagamos la web, depende en qué pantalla se navegará de una forma u otra. El consejo de Jordi es hacer la web con el tamaño de hoja pequeña o predeterminado como le llama Dreamweaver.

· Bien, ya tenemos nuestra carpeta web en el usuario y en el Wuala, ahora toca indicarle a Dreamweaver en qué sitio está cada cosa.

· Vamos a la parte superior, a "Sitio", "Nuevo sitio".
· Veremos que nos aparece en el apartado "Datos locales" varias cosas para rellenar.

· "Nombre del sitio", le ponemos el mismo nombre que la carpeta que creamos en el usuario. Si yo mi carpeta en el usuario/ Web la llamé "Practica11", en Nombre del sitio le tenemos que llamar igual.
· "Carpeta Raiz" pues es la carpeta que hemos creado en el usuario/ Web y en el que guardaremos y yaceran nuestro archivo HTML. Es una carpeta base.
· "Carpeta predeterminada de imágenes": pues aquí le indicaremos que busque nuestra carpeta img del usuario/ Web o sino podemos crearla en ese mismo momento.

· Si le damos a aceptar, veremos el resultado en la imagen siguiente.












· Volviendo al menú de antes y debajo de "Datos locales", encontramos "Datos remotos", que es el lugar donde se encontrará nuestra pagina, un lugar externo al del Pc, como un servidor o un lugar de alojamiento web, un ejemplo es Wuala, el cual es un servidor externo que nos ayudará a alojar la web en público.

· Nosotros para esto utilizaremos la opción Local/red que se encuentra al abrir la pestaña del menú. Le indicamos la carpeta creada en Wuala y debajo veremos unas opciones. Aquí rellenaremos las opciones de "mantener información de sincronización" y "cargar archivos en el servidor automáticamente al guardar".

· De esta manera haremos que se guarden los cambios automáticamente en Wuala y todos los archivos que se efectúen en la web al guardarlos se sincronizarán en el Wuala.


· Si ahora guardamos la página HTML que estuviéramos haciendo veríamos, como este documento se guarda en la carpeta del usuario/ Web y automáticamente en Wuala.

En el caso de que el documento HTML contenga imágenes, también se guardaran automáticamente, eso sí, si movemos cualquier imagen o carpeta, se nos desconfigura la web.

En caso de que no sincronice bien con Wuala, podremos ir a "Sitio/ Sincronizar en todo el sitio" o en el panel lateral derecho, a la flechita de color azul que indica hacia arriba.

Uso del FTP

En clase para la visualización de la web subida por FTP usaremos la siguiente dirección:

http://10.2.5.12/~ags2/

La web que coloquemos deberá llamarse index, este index es la que contiene las webs que subdividen la web principal, index es como el menú principal o página pro defecto, en el que tendremos las paginas HTML. Con index además, no se podrá ver como esta hecha la web, directamente entras a la pagina principal. También index podrá llamarse default.

index.html como índice web
nombre.html como web

Abrimos el Transmit y creamos una carpeta:










Le ponemos el nombre y le hacemos la carpeta img:








En la practica, cuando nuestro documento index se abra, nos mostrará por defecto la web sin ver la carpeta de imagenes de la web o la de contenidos de la propia.
En esta de aqui vemos lo que index contiene:

Inicio en FTP

FTP, es un protocolo de transferencia de ficheros.
Hay un par de protocolos de conexión, el AFP para Mac y el FTP cuando te conectas a otro ordenador.

Programas:
· En Mac se usa "Transmit" para usar el FTP, pro el puerto 21 del FTP.
· Filezilla es otro FTP, pero este es para todos los sistemas.

En clase usaremos el Transmit, para el uso del FTP

Distribución inicial de las carpetas web

En Mac, tenemos dentro del usuario, varias carpetas, una de ellas se llama web. En ella incluiremos nuestra carpeta con el nombre de la web y dentro de esa carpeta la carpeta de imágenes o como la llamamos nosotros "img".
Si utilizamos Dreamweaver podremos visualizar el contenido de dicha carpeta, lo cual nos facilitará la creación del contenido web.

En caso de no usar Dreamweaver, en el código html, incluiremos la ruta de donde se encuentra la imagen que queremos colocar. El código es el siguiente:

<img src="../imagen">

Existen 2 tipos de rutas donde encontrar la imagen:
· Ruta Absoluta: Fotografia en una página web
· Ruta movible: La imagen se encuentra en el Pc

TextWrangler

En clase hemos empezado a utilizar TextWrangler.
TextWrangler es un editor de textos para OS X. Este programa es Freeware.

Primero antes de crear toda la web deberemos fijarnos en unos cuantos parámetros o etiquetas que se usan para formar una web:

<html>
<head>
<title>
Título de nuestra web
</title>
<head>
<body>
Aquí es donde escribimos
</body>
<html>


Antes de empezar a escribir, deberemos definir los caracteres del lenguaje que utilizamos, ya que por defecto viene en inglés y nosotros utilizamos un lenguaje que utiliza caracteres con tildes o diéresis y la "ñ". El código es el siguiente:

<meta http-equiv="Content-type" content="text/hmtl;charset=UTF-8"

Y en el navegador haremos lo siguiente:








Una vez hecho esto podemos empezar a definir la composición, utilizando códigos que pueden ser para definir la tipografía en bold, cursiva o subrayado.
Estas etiquetas tienen un principio y un fin, para saber dónde acaba el código y para que Dreamweaver las interprete.

· Letras en bold: <b> </b>
· Letras en cursiva: <i> </i>
· Subrayar letras: <u> </u>

Eso en cuanto al uso de la tipografía. En cuanto a parágrafos y texto en general, tenemos otro tipo de códigos que a continuación listaré:

· Salto de línea: </br>
· Tachar palabras: <strike> </strike>
· Barra de espacio: & nbsp; (sin espacio algúno)
· Cabecera: <h> </h> o <h1> <h2> <h3> (para incluir varios títulos)
· Parágrafo o Sangría: <p> </p>
· Regla Horizontal: <hr>
· Fuente: <font face="Verdana">
· Tamaño de fuente: <font face="Verdana" size="1"> </font>
· Color: <font face="Verdana" color="Aqua"> </font> (Aqua es un estándar de color web, pero podemos poner otros colores y variaciones de colores, usando el código hexadecimal, por ejemplo: #4400CC el cual podremos abreviar usando tan solo #40C
· Listas (Con punto): <ul> </ul> <li> </li>
· Listas (Con número): <ol> </ol> <li> </li>
· Link: <a href="web"> nombre</a>
· Hipervínculo o enlace, dentro o fuera del sitio web: <a href="web del sitio" title="nombre del sitio" target="_blank" tabindex="1">nombre del sitio</a>

Excursión

La excursión al Palau Robert fue entretenida, en el mismo edificio había diferentes exposiciones, dos de ellas eran de publicidad de los años 1800 en adelante y la Otra era de la Vall de Boí.

La excursión al Palau Robert fue entretenida, en el mismo edificio había diferentes exposiciones, dos de ellas eran de publicidad de Catalunya, de los años 1800 en adelante y la otra era de la Vall de Boí. Fuera del Palau había otra exposición, esta era en plena calle del paseo de Gracia. Exposición titulada “The Hall of fame”

Como podréis ver se trata de la revista “Vanity Fair”, una de las revistas magazine más famosas de América que conmemora su centenario con esta exposición. En ella se pueden desde Javier Bardem, Scarlett Johansson, Martin Scorsese, Lady Gaga... Hasta la mismísima Duquesa de Alba. Aquí abajo dejo unas cuantas fotos y un vídeo resumen de muestra:

Más tarde, y ya para acabar las visitas a exposiciones, fuimos a “Arts Santa Mónica”. Una exposición de estilo muy variado. Podíamos ver la imagen gráfica de un dentífrico, una etiqueta de vino, cuadros y mucho más.