Alberto López

viernes, 23 de marzo de 2012

DISEÑO WEB VII: IMAGEN E IMAGEN DE SUSTITUCIÓN

Cuando creamos un enlace con una imagen dentro de nuestra página, podemos hacerla más atractiva y añadir lo que se llama una imagen de sustitución para el estado "Over" (cuando pasamos el puntero del ratón por encima) de forma que cambie la imagen.
Para ello, donde queramos insertar la imagen, damos click y accedemos al Panel Común (Ver > Diseño del espacio de trabajo) en Imagenes > Imagen de sutitución

A continuación damos un nombre al conjunto de imágenes, escogemos una imagen para el estado "normal" (original) y otra de sustitución para el estado "over". Podemos escoger el vínculo hacia el que dirigiremos el enlace (o hacerlo posteriormente.)

En el ejemplo hemos creado anteriormente una imagen de sustitución partiendo de la original, haciendo un cambio de tono y brillo en Photoshop dando la sensación de iluminación cuando pasamos el puntero del ratón por encima.

Etiquetas: CSS, Diseño web, Dreamweaver, HTML, imagen sustitución

martes, 20 de marzo de 2012

DISEÑO WEB VI: ESTILOS CSS

Para dar una propiedad o definir el estilo de un elemento (por ejemplo, que un titular o un párrafo tenga un tipografía concreta, un margen o una sangría, un tamaño específico de letra; un ancho de bloque o una justifición en el caso del segundo, etc.) aplicaremos estilos CSS al mismo. Estos estilos tienen que ver con la apariencia del documento y son los que permiten que el documento se vea atractivo.

El lenguaje CSS es un lenguaje aparte del HTML y se interpreta de la siguiente forma:
Ejemplo para dar estilo a los encabezados de un documento (h1):

Lo escribimos..: ELEMENTO {propiedad 1 (p. ej. background color: #0000); propiedad 2; propiedad 3; etc.;}

El estilo se puede aplicar a:
Etiquetas: como en el ejemplo anterior (<h1>, <h2>, <p>, <img>, <a>, etc.). Este estilo se aplicaría a TODAS las etiquetas del documento.
IDs: etiquetas con identificación (Ejemplo: <div id="alberto">). Este estilo se aplicaría SOLAMENTE a la etiqueta con el nombre id indicado y se escribiría de la siguiente forma:
#alberto {propiedad 1; propiedad 2; etc.;}
Clases: Para definir una característica de algun elemento y aplicar el estilo SOLAMENTE al elemento con esta característica (Ejemplo: una etiqueta <h2> en verde):
h2 .verde {propiedad 1; propiedad 2; etc.;}

Ejemplo de documento sin estilo y con estilo CSS:

Los estilos los puedes aplicar directamente desde la plaleta inferior Propiedades de Dreamweaver en el apartado CSS. En el recuadro Regla de destino elegiremos Nueva Regla CSS y clicaremos Editar regla. Se nos abrira una ventana que nos indicará primero que estilo queremos aplicar (Clase, Etiqueta, ID, etc.), y en Nombre de selector daremos el nombre al que queremos aplicar nuestro estilo. en el caso del ejemplo, a la etiqueta <body>:

A continuación nos aparecerá un menu de propiedades donde iremos dando las características de estilo.

Todo los estilos que vayamos aplicando desde las propiedades nos generará un código CSS. Si no indicamos nada nos lo escribirá entre unas etiquetas <style type="text/css"></style> dentro de <head>. Una manera de tener el código CSS en un archivo aparte vinculado a nuestro documento es creando una hoja de estilo independiente.

CREACIÓN DE UNA HOJA DE ESTILO

La manera de no tenerlo todo desordenado en nuestro código fuente es creando un documento independiente u hoja de estilo css (.css) de modo que la adjuntemos a nuestros archivos html:
Archivo>Nuevo...> css (abrimos un documento nuevo vacio css, le damos un nombre y lo guardamos junto a los documentos html)
Ventana>Estilos CSS (abriremos la paleta de Estilos css, que colocamos a nuestra derecha)
Lo siguiente será vincular nuestra hoja de estilos al archivo html indicado. Una forma es entrar en la ventana código del html a vincular y con un clic derecho vamos a Estilos CSS > Adjuntar hoja de estilos.. y escojemos nuestra hoja de estilo.
Si todo se ha hecho correctamente aparecerá en el código html lo siguiente, indicando que se ha adjuntado una hoja de estilo:

A continuación podemos ir indicando, cada vez que apliquemos estilos, que nos lo mande todo a nuestra hoja de estilos.

Etiquetas: CSS, Diseño web, Dreamweaver, HTML

domingo, 18 de marzo de 2012

DISEÑO WEB V: CREACIÓN DE MARCOS

Los marcos (o frames) actuan de forma similar a las tablas en cuanto a poder ser utilizados para dar forma a la estructura de una página web. La diferencia es que los marcos son ventanas interactivas independientes y pueden contener vistas múltiples. Un ejemplo sería una pantalla dividida en dos, en la que un marco pueda contener una imágen o contenido estático, como un menu, y un segundo marco un contenido principal que vaya cambiando o pueda ser desplazado. Un marco puede ser el contenedor de páginas html (propias o no), y otro marco estático puede contener vínculos que vayan cambiando el contenido del primero, de modo que sean interactivos:

Ejemplo de marcos

Se escriben con la etiqueta <frameset>, que debe ser colocada antes de la etiqueta <body>. Si no se cumple este requisito, la etiqueta se ignorará.

A continuación unos videos explicativos sobre la creción de marcos y la forma de hacerlos interactivos:

Etiquetas: Diseño web, Dreamweaver, HTML, marcos

DISEÑO WEB IV: CREACIÓN DE TABLAS

Para empezar a diseñar una página web con cuerpo, antiguamente y cuando todo era html, se creaban tablas para delimitar y definir la estructura de la misma: crear un menú lateral, una cabecera, un menú horizontal, un espacio de contenido, etc. Prácticamente toda la estructura de una web clásica se trabajaba con tablas. Actualmente, con la creación de estilos y de "cajones" Divs, este método ya no es tan utilizado.

A continuación un par de videos explicativos de como crear una tabla con Dreamweaver. Como observamos, podemos manipular la cantidad de celdas, los anchos y altos de las mismas, su posición e incrustar celdas dentro de otras para ir amoldando nuestro contenido. También es posible eliminar los bordes desde la paleta Propiedades y darle especificaciones como color de fondo, márgenes interiores (Padding), etc.:

Etiquetas: Diseño web, Dreamweaver, HTML, Tablas

DISEÑO WEB III: ENTORNO DREAMWEAVER

Una vez creado el sitio y nuestro nuevo documento, se nos abre una ventana de trabajo en blanco en la que empezar a trabajar. La peculiaridad es que podemos ver esta ventana, según escojamos, como ventana diseño (vista prelimar a modo de maquetacion) , ventana código (donde se generara el código html,css,etc.) o pantalla dividida.

En el ejemplo vemos la pantalla dividida, en la parte superior podemos ver y trabajar el código, y en la parte inferior tenemos la ventana de diseño. Al abrir un nuevo documento html ya se nos genera un codigo base que contiene las especificaciones html, las etiquetas head, meta, title y body de modo que podamos trabajar directamente el contenido. La característica de Dremweaver es que todo lo que vayamos trabajando en la ventana de diseño nos ira generando el código pertinente. Además, el programa dispone de todas las herramientas, paletas, menús de propiedades, etc. necesarias para ir creando nuestra página.
En el ejemplo podemos seleccionar una imagen que hayamos insertado y en la tabla de Propiedades inferior darle el ancho y alto que deseemos, cambiar la imagen origen (Origen), crear un vínculo, darle un nombre (Alt), una clase (Clase), una identificación para agregarle un estilo (ID),etc. y así con cualquier elemento que vayamos creando. Todas las especificaciones que vayamos dando nos irá escribiendo el código, así que este lo podemos controlar de forma manual o mediante la ventana diseño.

Es esencial, igualmente, conocer el código, revisarlo y trabajarlo manualmente cuando haga falta, puesto que desde la ventana diseño se pueden generar errores, y la revisión manual del código nos permite trabajar directamente sobre los problemas que nos surjan.

La barra de menu superior nos permite también, entre otras cosas:
Insertar imágenes, tablas, formularios,etc.:
Insertar > Imagen, Objetos de imagen, Tabla, Formulario
Cambiar las propiedades de la página (en conjunto con la tabla Propiedades antes nombrada), modificar marcos creados, etc.:
Modificar > Propiedades de la página, conjunto de marcos
Abrir herramientas de diseño, creación de Divs, marcos, tablas, contenido multimedia, etc.:
Ver > Diseño del espacio de trabajo

Una vez vayamos maquetando nuestra página podemos visualizarla en nuestro navegador en Vista Previa (en el icono del mundo de nuestro menu superior)

VÍNCULOS

Seleccionando cualquier elemento de la página (normalmente, texto o imagen), podemos crear vínculos a una página web externa escribiendo la URL en Vínculo en la paleta Propiedades. O vincularlo a una página de nuestro propio proyecto (vínculo interno) escribiendo la ruta de la carpeta.
Otro modo para este último es picando el símbolo que aparece al lado (una especie de timón..) y arrastarlo (nos aparece una flecha) hacia el archivo de nuestro sitio que queremos vincular.

Con la herramienta Anclaje de nuestra pestaña Común (Ver > Diseño del espacio de trabajo) aparte de vincular un elemento a un archivo diferente, podemos enlazar con un elemento o zona de la misma página, de modo que cuando cliquemos sobre este nos lleve a esa zona de la página, por ejemplo para ir directamente a un titular que hayamos marcado al final de página.

Etiquetas: Diseño web, Dreamweaver, HTML

domingo, 26 de febrero de 2012

LA CRISIS ESPAÑOLA (Por Aleix Saló)

La crisis española explicada por el ilustrador Aleix Saló. Para quien no lo haya visto. Muy bueno!

Etiquetas: Aleix Saló, crisis española, Ilustración

lunes, 13 de febrero de 2012

DISEÑO WEB II: DREAMWEAVER, CREACIÓN DE SITIOS

Dreamweaver es considerado el programa de diseño web más avanzado que existe. Nos permite editar contenido web cómodamente desde la aplicación a un nivel profesional. La ventaja de estos editores es que puedes trabajar desde una interfaz de diseño a modo de un programa de maquetación, luego el propio programa te genera el mismo código HTML; además, tienes disponible una gran variedad de herramientas y aplicaciones, conexión a servidores/FTPs, recursos online, etc. que hacen al programa muy versátil y productivo.
Soporta gran cantidad de tecnologías, además muy fáciles de usar: Hojas de estilos, Javascript para crear efectos e interactividades, inserción de archivos multimedia.

COMENZAR UN PROYECTO WEB. CREACiÓN DE UN SITIO:

Lo primordial para empezar a trabajar con Dreamweaver y nos ayudará a tener todo organizado, antes incluso de abrir un documento nuevo, es crearse una carpeta ordenada de nuestro proyecto en nuestro ordenador, la cual ligaremos a un sitio en Dreamweaver. De tal modo que todo lo que vayamos trabajando desde el programa, guardando,etc. se irá sincronizado con nuestra carpeta. Esto nos permitirá trabajar desde Dreaweaver sin tener que acceder a los archivos.

3 PASOS PARA EMPEZAR A TRABAJAR CON UN PROYECTO NUEVO:

1º. Creamos una carpeta de proyecto y la ubicaremos en una carpeta general donde irán todos nuestros trabajos web:
En mi caso he creado una carpeta para web en el disco C, y dentro una carpeta de mi primer proyecto "web prueba". (C:/web/web prueba)
Dentro de la misma creo una carpeta "img" para las imágenes. (C:/web/web prueba/img)

2º. Creamos nuestro sitio en Dreamweaver:
Sitio > Nuevo Sitio... > Avanzadas (Barra superior Dreamweaver)
Dentro de Datos locales: Daremos el nombre al sitio, y añadiremos en Carpeta raíz local (1) y Carpeta para imágenes (2) la ubicación de las carpetas creadas (para las imágenes la ubicación dentro de la carpeta creada "img")
Dentro de Datos remotos: Si queremos vincular además nuestro sitio y los cambios que vayamos haciendo a un sitio externo a nuestro ordenador (un servidor o un hosting para alojar páginas web). Podemos escojer Local/red (3) para un servidor externo online de forma que nos permita trabajar fuera de casa, FTP para subir nuestros archivos a un servidor de hosting, o tenerlo simplemente en Ninguno.

Tenemos nuestro sitio creado, este nos aparecerá en la paleta archivos que deberemos tener activada (en la derecha de nuestra mesa de trabajo de Dreamweaver), de este modo podremos trabajar desde aquí, guardar, crear, actualizar los archivos,etc.

3º. Creamos un nuevo documento HTML en Dreamweaver (Archivo > Nuevo) y podemos comenzar a trabajar en él. A la hora de guardarlo nos lo guardará directamente en nuestro sitio si no especificamos nada diferente.

Lo interesante, es que podemos añadir nuevos archivos desde Dreamweaver que iremos sincronizando con la carpeta raíz, podemos arrastrar una foto a la mesa de trabajo del programa y esta se nos guardará directamente en la carpeta "img".

!! La carpeta raíz creada va ligada a la carpeta sitio, de tal modo que si cambiáramos o elimináramos un archivo de la primera o su ubicación, afectaría a nuestro sitio o tendriamos que reubicarlo.

Etiquetas: Diseño web, Dreamweaver, HTML