:: § – Mi SiTiO WEB ::

Adobe Fireworks (Fw) Es una aplicación en forma de estudio (basada por supuesto en la forma de estudio de Adobe Flash®) pero con más parecido a un taller destinado para el manejo híbrido de gráficos vectoriales con Gráficos en mapa de bits y que ofrece un ambiente eficiente para la creación rápida de prototipos de sitios Web e interfaces de usuario como para la creación y Optimización de Imágenes para web. Originalmente fue desarrollado por Macromedia, compañía que fue comprada en 2005 por Adobe Systems. Fireworks está enfocado en la creación y edición de gráficos para internet. Está diseñado para integrarse con otros productos de Adobe, como Dreamweaver y Flash. Está disponible de forma individual o integrado en Adobe CS3.

La integración con Adobe Flash se ha ido reduciendo paulatinamente desde que Flash, en su versión 7, integró la herramienta PolyStar que hace un polígono directamente en Flash sin necesidad de usar Fireworks para hacer dicho polígono o estrella.

En la versión 8 de Flash ya incluye potentes filtros de gráficos vectoriales que antes se hacían con Fireworks,

Adobe Photoshop
Adobe Photoshop® (Ps) es una aplicación en forma de taller de pintura y fotografía que trabaja sobre un «lienzo» y que está destinado para la edición, retoque fotográfico y pintura a base de imágenes de mapa de bits (o gráficos rasterizados).

Es un producto elaborado por la compañía de software Adobe Systems, inicialmente para computadores Apple pero posteriormente también para plataformas PC con sistema operativo Windows.

Photoshop en sus versiones iniciales trabajaba en un espacio bitmap formado por una sola capa, donde se podían aplicar toda una serie de efectos, textos, marcas y tratamientos. En cierto modo tenía mucho parecido con las tradicionales ampliadoras. En la actualidad lo hace con múltiples capas.

A medida que ha ido evolucionando el software ha incluido diversas mejoras fundamentales, como la incorporación de un espacio de trabajo multicapa, inclusión de elementos vectoriales, gestión avanzada de color (ICM / ICC), tratamiento extensivo de tipografías, control y retoque de color, efectos creativos, posibilidad de incorporar plugins de terceras compañías, exportación para web entre otros.

Photoshop se ha convertido, casi desde sus comienzos, en el estándar de facto en retoque fotográfico, pero también se usa extensivamente en multitud de disciplinas del campo del diseño y fotografía, como diseño web, composición de imágenes bitmap, estilismo digital, fotocomposición, edición y grafismos de vídeo y básicamente en cualquier actividad que requiera el tratamiento de imágenes digitales.

Photoshop ha dejado de ser una herramienta únicamente usada por diseñadores / maquetadores, ahora Photoshop es una herramienta muy usada también por fotógrafos profesionales de todo el mundo, que lo usan para realizar el proceso de «positivado y ampliación» digital, no teniendo que pasar ya por un laboratorio más que para la impresión del material.

Con el auge de la fotografía digital en los últimos años, Photoshop se ha ido popularizando cada vez más fuera de los ámbitos profesionales y es quizá, junto a Windows y Flash (de Adobe Systems También) uno de los softwares que resulta más familiar

Aunque el propósito principal de Photoshop es la edición fotográfica, este también puede ser usado para crear imágenes, efectos, gráficos y más en muy buena calidad. Aunque para determinados trabajos que requieren el uso de gráficos vectoriales es más aconsejable utilizar Adobe Illustrator.

Entre las alternativas a este programa, existen algunos programas libres como GIMP, pero sólo para edición fotográfica en general, o propietarios como PhotoPaint de Corel, capaz de trabajar con cualquier característica de los archivos de Photoshop, y también con sus filtros plugin.

Adobe Dreamweaver también forma parte de Macromedia, en realidad su contexto es sencillo, sin embargo podemos enlazar nuestras creatividades hechas en otros productos de Macromedia como Flash.
Su manejo es muy sencillo.

Es una aplicación en forma de estudio (Basada por supuesto en la forma de estudio de Adobe Flash®) pero con más parecido a un taller destinado para la construcción y edición de sitios y aplicaciones Web basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems). Es el programa de este tipo más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web Consortium. Su principal competidor es Microsoft Expression Web y tiene soporte tanto para edición de imágenes como para animación a través de su integración con otras herramientas

Hasta la versión MX, fue duramente criticado por su escaso soporte de los estándares de la web, ya que el código que generaba era con frecuencia sólo válido para Internet Explorer, y no validaba como HTML estándar. Esto se ha ido corrigiendo en las versiones recientes.

La gran base de este editor sobre otros es su gran poder de ampliación y personalización del mismo, puesto que en este programa, sus rutinas (como la de insertar un hipervinculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, lo que le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos del programa no sean instrucciones de C++ sino, rutinas de Javascript que hace que sea un programa muy fluido, que todo ello hace, que programadores y editores web hagan extensiones para su programa y lo ponga a su gusto.

Para insertar imágenes, el código HTML utiliza la etiqueta <img> con sus correspondientes parámetros que son los que se enumeran a continuación:

• src = «nombre de la imagen» (p. ej.: <img scr=»mifoto.jpg»>
• alt = «Texto» Este parámetro muestra un texto alternativo cuando pasamos el ratón por encima de la imagen.
• align = Indica como se alineará el texto con respecto a la imagen. Se puede alinear el texto con la parte superior de la imagen (top), con la parte central (middle), o con la inferior (bottom). También puede quedar la imagen a la derecha (right) del texto, rodeándolo, o a la izquierda (left).
• border = Indica si lleva borde y su anchura.
• height = Indica el alto de la imagen. Admite valores en puntos o en porcentaje.
• width = Indica el ancho de la imagen. Admite valores en puntos o en porcentaje.
• hspace = Indica el margen horizontal de la imagen con respecto al texto que le sigue o precede.
• vspace = Indica el margen vertical de la imagen con respecto al texto que le sigue o precede.
• lowsrc = «nombre de la imagen» Este atributo permite especificar una imagen auxiliar, que se abre en primer lugar, mientras carga la imagen definitiva. Se suelen usan imágenes de menor resolución, para que el usuario disponga de ellas cuanto antes. También se puede usar para logar ciertos efectos (muy simples) de animación. Este parametro no es reconocido por la totalidad de los navegadores.

Ejercicio 7: Guarda una imagen cualquiera en la misma carpeta en la que guardarás tu archivo HTML. (Puedes guardar la imagen en cualquier carpeta, pero entonces deberás tener mucho cuidado a la hora de indicar la ruta). Inserta el siguiente código dentro de la etiqueta <body></body>. En los dos primeros ejemplos vemos las diferencias de tamaño de la imagen especificadas por los atributos width (anchura) y height (altura) Código en el editor de textos En el navegador <img src=»surf.jpg» width=»139″ height=»89″/> <img src=»surf.jpg» width=»196″ height=»125″/>

En los siguientes ejemplos se aprecia la diferencia de alineación del texto con respecto a la imagen. Observa el uso del atributo align, con sus correspondientes valores top, middle y bottom.

Como sin duda habrás apreciado, la imagen y el texto están excesivamente juntos. Esto se puede mejorar usando los parámetros vspace y hspace.

El siguiente ejemplo muestra la imagen con borde de 4 puntos.

Haz todos los cambios que creas necesarios hasta que consigas práctica. Prueba con textos más largos para ver las alineaciones de texto envolvente con los parámetros align=right y align=left.

Podemos organizar nuestro texto haciendo uso de las llamadas listas de elementos, que consisten en esas enumeraciones utilizando números, letras o simplemente puntos para separar los diferentes apartados a tratar. Existen tres tipos:

• Numeradas
• Sin numerar
• De definición

1. -Listas numeradas:

Cada elemento va precedido por un número. Para este tipo de lista se utiliza la etiqueta <ol></ol> . Cada uno de los elementos de la lista irá precedido de la etiqueta <li> .

Ejemplo:

Si queremos utilizar letras para ordenar nuestra lista (por defecto siempre utiliza HTML números), debemos añadir a la etiqueta <ol> el atributo type con los siguientes valores:

Ejemplos

Si queremos empezar nuestra lista por cualquier otro número o letra (que no sean el 1 o la «a»), deberemos indicarlo con el atributo start.

2.- Listas sin numerar.

En ellas, cada elemento va precedido por un «bullet» o punto. Se utiliza la etiqueta <ul></ul> para delimitar la lista, y <li> para indicar cada uno de los elementos.

Ejemplo:

Con el parámetro type podemos indicar la forma del «bullet». Los valores de type pueden ser disc (disco) , circle (círculo vacío) o square (cuadrado). Si no indicamos nada, apacerá por defecto el disco.

Ejemplo:

3.- Listas de definición

Las listas de definición se tratan de listas a dos niveles. Es decir, muestran los elementos tipo glosario o diccionario. Sirven para distinguir entre una palabra a definir y su definición. Para este tipo de lista se utiliza la etiqueta <dl></dl> . El elemento marcado como palabra a definir viene marcado por la etiqueta <dt> , y la definición por la etiqueta <dd> .

Listas de varios niveles o Listas anidadas

Podemos construir listas anidadas, es decir, listas que incluyen otras listas.

Todas las listas se pueden «anidar», es decir incluir una lista dentro de otra, con lo que se consigue una estructura tipo «indice de materias».

La etiqueta <blockquote></blockquote>

La etiqueta <blockquote></blockquote> es una etiqueta que se utiliza para encerrar un texto parafraseado, una cita, un ejemplo, etc. y conseguir con ella un efecto de sangrado de texto. Tanto el margen izquierdo, como el derecho, se amplían automáticamente.

Ejemplo:

Este ejemplo y la mayoría de los que aparecen en este tutorial está formateado mediante la etiqueta blocquote.

Su código sería el siguiente:

A continuación usamos dos veces consecutivas la etiqueta <blockquote> para sangrar aún más el texto.

Ejemplo:

Este ejemplo y la mayoría de los que aparecen en este tutorial está formateado mediante la etiqueta blocquote.

Su código sería el siguiente:

La etiqueta <address></address>

La etiqueta <address> se usaba más en los primeros años de Internet, y en la actualidad tiende a desaparecer. Con ella se enmarcan datos como el nombre del autor de la página, el copyrigth, dirección de correo electrónico, etc. El texto siempre aparece en cursiva (por defecto).

Ejemplo:

DistritoWeb. Todos los derechos reservados. info@DistritoWeb.net

Su código sería:

<address>
DistritoWeb. Todos los derechos reservados. info@DistritoWeb.net
</address>

La etiqueta <pre>

Como ha quedado visto en el capítulo dedicado al párrafo, en HTML sólo se reconoce un espacio entre palabra y palabra; el resto de los espacios son ignorados por el navegador. Tampoco se respetan las tabulaciones, retornos de carro, etc… Por lo tanto, si necesitamos obligar al navegador a visualizar el texto tal y como está escrito necesitaremos enmarcarlo con la etiqueta <pre></pre>.

Ejemplo:

Este texto está escrito
 dentro de
 una
 etiqueta             pre, por lo tanto
 estos errores   de espaci
 os entre palabras los muestra 

 tal
 cual.

Este es su código:

<pre>Este texto está escrito
dentro de
una
etiqueta pre, por lo tanto
estos errores de espaci
os entre palabras los muestra

tal
cual. </pre>

La etiqueta <p></p> indica párrafo. La alineación de éste la definiremos con el parámetro align. Sus valores son:

• left: alineación a la izquierda
• right: alineación a la derecha
• center: alineación al centro
• justify: alineación justificada.

Ejemplos:

En HTML sólo se reconoce un espacio entre palabra y palabra, el resto de los espacios son ignorados por el navegador. Tampoco se respetan las tabulaciones, retornos de carro, etc… Por lo tanto, si necesitamos obligar al navegador a visualizar el texto tal y como está escrito necesitaremos enmarcarlo con la etiqueta <pre></pre>.

Para indicar los saltos de linea se utiliza la etiqueta <br>

Para los cambios de parrafo se utiliza la etiqueta <p> (en este caso no es necesario cerrarla)

Ejercicio

Copia el código siguiente en el editor de textos y observa su apariencia en el navegador. (No caigas en la tentación de cortar y pegar el ejemplo; escríbelo tú mismo para practicar)

<html>
<head><title>Mi página web </title></head>
<body bgcolor=»#0D5C94″ text=»#FFFFFF»>
<p align=left>Este párrafo de texto está justificado a la izquierda</p>
<br>
<p align=right>Este párrafo de texto está justificado a la derecha.</p>
<br>
<p align=center>Este párrafo de texto está justificado al centro </p>
</body>
</html>

Este será el resultado:

HTML dispone de un método para destacar los títulos (o encabezamientos) y subtítulos con tipo de texto variable y negrita. Para ello se utiliza la etiqueta <h></h>. El texto que escribamos entre la etiqueta de inicio (<h>) y la de cierre (</h>) será el que resulte destacado como título. Las cabeceras fuerzan un salto de linea cuando se cierran, y el texto siempre está en negrita.
Existen 6 tamaños de cabeceras distintas:

<h1><h2><h3><h4><h5> y <h6> . Siendo la <h1> la que muestra el texto en mayor tamaño.

Ejercicio

Utilizando como base el ejercicio 4, le añadiremos encabezamientos:

<h1>Este es el encabezamiento principal</h1>
<h3>Este es el subtítulo</h3>

De forma que nuestra página quedará del siguiente modo:

<html>
<head><title>Mi página web </title></head>
<body bgcolor=»#000000″ text=»#FFFFFF»>
<h1>Esto es el título principal</h1>
<h3>Este es el subtítulo</h3>
<font size=3 color=»#FFFFFF» face=»helvetica»> Este es un texto para practicar los diferentes estilos que podemos conseguir. <i>Aquí empieza la cursiva,</i><b> para dejar paso a la negrita.</b> Podemos tachar <s>lo que no nos guste</s> o <u>subrayar toda una frase</u>. Para nuestras fórmulas es muy útil el subindice como en b₁ o el superíndice como en m². </font>
</body>
</html>

Este será el efecto conseguido:

La etiqueta <font></font> se refiere a la fuente utilizada en el documento. Va colocada dentro del cuerpo del documento (<body><font></font></body>). Admite diferentes atributos:

• size: Define el tamaño en puntos.
• color: Define color (con los valores RBG o el nombre del color en inglés).
• face: tipo de fuente (arial, georgia, verdana, etc.)

Ejemplo:

Para modificar el estilo de texto (negrita, cursiva, etc…) existen las siguientes etiquetas que enmarcarán la porción de texto a la que queramos aplicar el estilo correspondiente:

Ejercicio:

Escribe el siguiente código en tu editor de textosy edítalo en el navegador. Haz todos los cambios que creas necesarios para ver los diferentes efectos.

<html>
<head><title>Mi página web </title></head>
<body bgcolor=»#0D5C94″ text=»#FFFFFF»>
<font size=3 color=»#FFFFFF» face=»helvetica«> Este es un texto para practicar los diferentes estilos que podemos conseguir. <i>Aquí empieza la cursiva,</i><b> para dejar paso a la negrita.</b> Podemos tachar <s>lo que no nos guste</s> o <u>subrayar toda una frase</u>. Para nuestras fórmulas es muy útil el subindice como en b₁ o el superíndice como en m². </font>
</body>
</html>

Este será el efecto conseguido:

La etiqueta <body></body> engloba el contenido principal del documento HTML (textos, imágenes, etc.). Esta etiqueta puede llevar parámetros opcionales relativos al color de fondo del documento y al color del texto y los enlaces. Estos parámetros son:

• bgcolor = Define el color de fondo del documento.

Ejemplo: <body bgcolor=»#000000></body>

• background= Hace referencia al fichero de imagen que servirá como fondo de la página. Si la imagen no rellena todo el fondo del documento, será reproducida en mosaico.

Ejemplo: <body background=»mifoto.jpg»></body>

• text = Define el color para el texto del documento. Por defecto es negro.

Ejemplo:<body text=»red»></body>

• link = Define el color de los enlaces. Por defecto es azul.

Ejemplo: <body alink=»#00FF00″></body>

• vlink = Define el color de los enlaces ya visitados. Por defecto es morado.

Ejemplo: <body vlink=»yellow»></body>

El color puede describirse de dos formas:

• Por medio del nombre del color en inglés (ver cuadro de colores).
• Por medio de una expresión numérica: Consiste en la formación de un código RBG (Red, Green, Blue) compuesto por tres valores hexadecimales que señalan la proporción de cada uno de ellos en el color resultante. Es necesario colocar delante de ellos el símbolo «almohadilla» (#).

Cuadro de colores :

Puedes ver todos los colores en html en: http://html-color-codes.com/

🙂

Ejercicio :

Copia el siguiente código en el editor de textos (te recomiendo que escribas los códigos a mano y no caigas en la tentación de copiar y pegar, pues es la mejor forma a aprender HTML)

<html>
<head><title>Mi página web </title></head>
<body bgcolor=»#000000″ text=»#FFFFFF» link=»#00FF00″ vlink=»#0000FF»>Este es el texto de mi página web </body>
</html>

Guárdalo como «ejercicio_2.html» (recuerda poner la extensión «html», si no se guardará por defecto como text).Ábrelo desde tu navegador y observa la apariencia. Haz los cambios necesarios hasta que adquieras cierta práctica. Prueba a poner cualquier imagen de fondo. Guarda la imagen en la misma carpeta en la que hayas guardado el ejercicio_2.html y añade el siguiente atributo dentro de la etiqueta body:

background=»nombrearchivo.jpg»

Puedes guardar las imágenes en otra carpeta (de hecho es lo recomendable) pero entonces tendrás que tener mucho cuidado al indicar la ruta al navegador.

Prueba el resultado. Verás que la imagen de fondo anula el color de fondo. Como por ahora no hemos colocado ningún link en nuestra página, no podrás ver el efecto. Si quieres, para ir probando, añade lo siguiente a continuación de la palabra web.

<a href=»#»>esto es un link </a>

De modo que quede como sigue:

<html>
<head><title>Mi página web </title></head>
<body bgcolor=»#000000″ text=»#FFFFFF» alink=»#00FF00″ vlink=»#0000FF»>Este es el texto de mi página web. <a href=»#»>esto es un link </a></body>
</html>

Prueba a indicar los colores usando sus nombres en inglés en vez del valor RBG:

<body bgcolor=»blue» alink=»green» vlink=»yellow»>

Un documento escrito en HTML consta de las siguientes etiquetas básicas:

<HTML> Indica el inicio del documento.
<HEAD> Inicio de la cabecera.
<TITLE> Inicio del título del documento.
</TITLE> Final del título del documento.
</HEAD> Final de la cabecera del documento.
<BODY> Inicio del cuerpo del documento.
</BODY> Final del cuerpo del documento.
</HTML> Final del documento.

Ejercicio :

Abre el editor de textos (el bloc de notas, por ejemplo) y escribe lo siguiente:

<html>
<head><title>Mi página web </title></head>
<body>Este es el texto de mi página web </body>
</html>

Guarda el archivo como «prueba.html» (no olvides escribir la extensión html). No es necesario entrar en internet para ver una página, ni tenerla colgada aún. Abre tu navegador. En el menú, haz clic en Archivo/Abrir. En la ventana emergente pulsa «examinar». Busca y abre el archivo que acabas de guardar. Observa el aspecto de tu primera página. Como ves, lo que has escrito como título aparece en la barra de tu navegador, no es el título del texto.

En el navegador, haz clic en menú/ver/código fuente. Se abre el editor de textos donde podrás leer el código HTML. Aquí mismo puedes hacer los cambios que quieras y guardarlos. Para volver a verlos sólo tienes que actualizar la página del navegador.