Herramientas de diseño en la web y HTML. 1

Herramientas de diseño en la web y HTML.

Adriana Farias, Charly López.

Colegio Débora Arango Pérez I.E.D, 22 de junio /2012.

Herramientas de diseño en la web y HTML. 2

RESUMEN

El diseño web es una actividad que consiste en la planificación, diseño e implementación

de sitios web. No es simplemente una aplicación del diseño convencional, ya que requiere tener

en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de la información y la

interacción de medios como el audio, texto, imagen, enlaces y vídeo. Se lo considera dentro

del diseño multimedia.

La unión de un buen diseño con una jerarquía bien elaborada de contenidos, aumenta la eficiencia

de la web como canal de comunicación e intercambio de datos, que brinda posibilidades como el

contacto directo entre el productor y el consumidor de contenidos, característica destacable del

medio.

HTML, siglas de HyperText Markup Language (lenguaje de marcado de hipertexto), hace

referencia al lenguaje de marcado predominante para la elaboración de páginas web que se utiliza

para describir y traducir la estructura y la información en forma de texto, así como para

complementar el texto con objetos tales como imágenes. 

Herramientas de diseño en la web y HTML. 3

INTRODUCCIÓN

Veremos las herramientas adecuadas para el diseño y desarrollo de un sitio web, las fases de un

desarrollo web, así como los lenguajes de programación usados y HTML.

Herramientas de diseño en la web y HTML. 4

HERRAMIENTAS ADECUADAS PARA EL DISEÑOY DESARROLLO DE UN SITIO

WEB

Las fases de un desarrollo web, así como los lenguajes de

programación usados, son muy extensos y variados, y por ello

necesitamos herramientas específicas para cada una de ellas.

Conoceremos a continuación las principales herramientas existentes

para poder desarrollar fácilmente un proyecto web.

En el desarrollo web tenemos unas herramientas para el

diseño, otras para la maquetación, otras para la programación, y para la depuración. Todas las

herramientas que usemos son muy importantes, desde el Sistema Operativo hasta el comando

más insignificante, y por ello debemos elegir la más adecuada a nuestras necesidades y

capacidades.

SISTEMA OPERATIVO

Herramientas de diseño en la web y HTML. 5

Para desarrollar una web, lo primero que necesitamos es un Sistema Operativo, como es

lógico, y su elección no es tan trivial. Hay que tener en cuenta las aplicaciones de las que dispone

el Sistema Operativo y sus costes.

Por ejemplo, tenemos Microsoft Windows, cuyas aplicaciones son muy caras,

como Photoshop, Dreamweaver, Fireworks, ASP .NET… Y por otro lado tenemos GNU/Linux,

con GIMP, Inkscape, Amaya, Aptana,PHP (aunque todos ellos también están disponibles

en Windows).

Otra característica a tener en cuenta es las facilidades que el Sistema Operativo aporta al

desarrollador, y en este sentido GNU/Linux se lleva de calle a Windows. Y esto es porque

Windows no fue diseñado para los desarrolladores, sino para personas que no tienen muchos

conocimientos sobre informática.

Y por el contrario GNU/Linux fue creado por desarrolladores, y para desarrolladores; y por

lo tanto en GNU/Linux podemos encontrar infinidad de herramientas que nos harán la vida

mucho más fácil, que además son libres.

FASES DE DESARROLLO DE UNA WEB

Para elegir las herramientas a utilizar, antes debemos identificar las fases del proceso que

forman el ciclo de vida de un desarrollo web.

Herramientas de diseño en la web y HTML. 6

DISEÑO:

el diseño consiste en crear esbozos de la web final mediante una herramienta gráfica,

como Photoshop, GIMP o Inkscape.

MAQUETACIÓN HTML/CSS:

La maquetación consiste en convertir los esbozos creados en la fase anterior en

plantillasHTML, su respectiva hoja de estilos, y las imágenes usadas. Es posible saltarse la

fase anterior para comenzar directamente con esta fase, dependiendo de si dominamos

herramientas como Photoshop o no.

PROGRAMACIÓN CLIENTE:

la programación cliente consiste básicamente en Javascript. Una web puede no tener

necesidad de hacer programación cliente, como puede ser una pequeña web corporativa

con poca información estática, o puede que requiera enormes esfuerzos en esta fase, como

ocurre con los proyectos Web 2.0.

PROGRAMACIÓN SERVIDOR:

En esta fase, que se desarrolla junto con la anterior, crearemos la aplicación web en

un lenguaje de servidor, como puede ser PHP, ASP .NET, Python, Perl, etc.

DEPURACIÓN:

Herramientas de diseño en la web y HTML. 7

Esta fase enlaza la anterior con la siguiente, y es donde haremos las pruebas unitarias,

aserciones, trazas, etc.

PRUEBAS EN LOCAL:

En nuestro servidor local haremos todas las pruebas posibles.

SUBIR FICHEROS AL HOSTING:

Una vez nuestra web esté completada y bien testeada en nuestro servidor local

(desarrollo), la subiremos al servidor del hosting elegido (producción). Dependiendo del

hosting, podremos usar FTP, SFTP (SSH), WebDAV, o incluso Subversion. Yo aconsejo

usar Subversion si así lo permite el servidor, por su comodidad y rapidez, además de por su

principal utilidad, que es la de control de versiones.

PRUEBAS EN HOSTING:

Realizaremos las últimas pruebas en el servidor del hosting para comprobar que el

cambio de servidor no ha afectado a nada. Para evitar problemas, nuestro servidor local

debe tener exactamente la misma configuración que el servidor del hosting.

HERRAMIENTAS: DESARROLLO EN PHP

A continuación enumeraré las herramientas básicas para el desarrollo de una web en PHP,

en sus diferentes fases de diseño e implementación.

Herramientas de diseño en la web y HTML. 8

FASES: DISEÑO Y MAQUETACIÓN

Adobe Photoshop:Esta aplicación sólo está disponible en Windows, y es el

más caro, aunque es el más usado y gracias a ello dispone de una gran comunidad de

usuarios con los que poder contar ante cualquier problema. Con él crearemos el diseño, así

como las imágenes que usemos en la maquetación.

GIMP: Es el equivalente de software libre más próximo a Photoshop. Al ser

libre es posible conseguirlo gratuitamente, y de hecho cualquier distribución GNU/Linux lo

incluye. Al igual que en Photoshop, con él podremos crear el diseño y las imágenes de la

maquetación HTML. También disponible en Windows

FASE: MAQUETACIÓN

Inkscape: El equivalente en Windows es Adobe Fireworks. Es un excelente

editor gráfico vectorial con el que poder crear iconos, banners, y demás dibujos de forma

muy fácil y sencilla, incluso para aquellos que no tengan demasiados conocimientos en

edición gráfica digital.

Adobe Fireworks: El editor de gráficos vectoriales más fácil de usar que he

tenido la oportunidad de usar, aunque no lo eché de menos cuando descubrí Inkscape. Al

igual que su compañero Photoshop es muy caro, y más aún si tenemos una gran alternativa

gratuita como es Inkscape.

Herramientas de diseño en la web y HTML. 9

FASES: MAQUETACIÓN, PROGRAMACIÓN CLIENTE

Dreamweaver, Aptana, Amaya: Estas herramientas las describí en mi anterior

artículo sobre los principales editores web del mercado, así que os remito a él para más

información. Con ellos crearemos el código HTML/CSS (maquetación), siendo Aptana la

opción más profesional para la programación cliente (Javascript).

FASE: PROGRAMACIÓN SERVIDOR

Zend Studio: Sin duda el mejor IDE existente en el mercado para desarrollo

web con PHP. Es comercial, aunque no demasiado caro teniendo en cuenta la excelente

herramienta que es. Además es posible descargarlo desde la web de Zend para probarlo

durante 30 días.

Con él crearemos fácilmente la aplicación web en PHP. Aunque podremos usar

igualmente cualquier editor. Una muy buena alternativa es Eclipse con el plugin PHP.

Otra aplicación muy útil que está muy ligada a Zend Studio es Zend Platform, un

módulo para Apache que permite depurar una web directamente en el navegador (Internet

Explorer o Firefox), además de otras funciones más complejas, como alertas configurables

para que nos envíe un email por cada error ocurrido en la web, o cuando un script

sobrepase un tiempo determinado de ejecución, por ejemplo.

Herramientas de diseño en la web y HTML. 10

FASE: PRUEBA LOCAL

Apache Instalar un servidor web Apache en la máquina donde desarrollamos

es fundamental. De esta manera haremos pruebas rápidamente: editamos un fichero PHP,

vamos al navegador, actualizamos, y vemos los cambios.

FASES: PRUEBAS EN LOCAL, DEPURACIÓN

Firefox / Firebug / Web Developer Extension: Firefox es sin duda la mejor

herramienta creada en los últimos tiempos para los desarrolladores web, y con Firefox sus

dos extensiones más útiles para nuestra profesión: Firebug y Web Developer.

Con Firebug podremos depurar Javascript, editar HTML y CSS en la misma página

para ver los cambios en tiempo real, consultar los tiempos de carga de la página en

conjunto, de las imágenes, javascripts, hojas de estilo, etc, así como sus tamaños, etc. Y

Web Developer nos ofrece herramientas muy útiles como ver las cookies de la web, ocultar

imágenes, cambiar el tamaño del navegador a resoluciones estándar, etc.

SUBIR FICHEROS AL SERVIDOR DEL HOSTING

Una vez hayamos concluido todas las fases anteriores, y nuestro proyecto esté listo,

deberemos subirlo al servidor del hosting.

Herramientas de diseño en la web y HTML. 11

La herramienta a utilizar dependerá de las opciones que nos ofrezca el hosting, que

desgraciadamente en la mayoría de los casos es solamente el antiguo FTP. En Dreamweaver y

Zend Studio tenemos un cliente FTP y SFTP (SSH), y la tarea consistirá simplemente en

configurar el FTP y copiar y pegar los directorios que queramos subir.

Confío en que esta guía sirva de ayuda a la hora de afrontar un desarrollo web. Hay que

tener muy en cuenta las fases de desarrollo y usar las herramientas adecuadas: la que nos resulte

más fácil de usar, la más económica, la que mejor conozcamos, etc.

HTML

Herramientas de diseño en la web y HTML. 12

HTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»),

hace referencia al lenguaje de marcado predominante para la elaboración de páginas web que se

utiliza para describir y traducir la estructura y la información en forma de texto, así como para

complementar el texto con objetos tales como imágenes. El HTML se escribe en forma de

«etiquetas», rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un

cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo JavaScript), el

cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.1

HTML también sirve para referirse al contenido del tipo de MIME text/html o todavía más

ampliamente como un término genérico para el HTML, ya sea en forma descendida

del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente

de SGML (como HTML 4.01 y anteriores).

Marcado HTML

HTML consta de varios componentes vitales, entre ellos los elementos y sus atributos, tipos

de data y la declaración de tipo de documento.

Elementos

Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades

básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se

Herramientas de diseño en la web y HTML. 13

considere válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio

(por ejemplo, <nombre-de-elemento>) y una etiqueta de cierre (por ejemplo, </nombre-de-

elemento>). Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido

está ubicado entre las dos etiquetas (por ejemplo, <nombre-de-

elemento atributo="valor">Contenido</nombre-de-elemento>). Algunos elementos, tales

como <br>, no tienen contenido ni llevan una etiqueta de cierre. Debajo se listan varios tipos de

elementos de marcado usados en HTML.

Estructura general de una línea de código en el lenguaje de etiquetas HTML.

El marcado estructural describe el propósito del texto. Por

ejemplo, <h2>Golf</h2> establece «Golf» como un encabezamiento de segundo nivel, el cual se

mostraría en un navegador de una manera similar al título «Marcado HTML» al principio de esta

sección. El marcado estructural no define cómo se verá el elemento, pero la mayoría de los

Herramientas de diseño en la web y HTML. 14

navegadores web han estandarizado el formato de los elementos. Puede aplicarse un formato

específico al texto por medio de hojas de estilo en cascada.

El marcado presentacional describe la apariencia del texto, sin importar su función. Por

ejemplo, <b>negrita</b> indica que los navegadores web visuales deben mostrar el texto

en negrita, pero no indica qué deben hacer los navegadores web que muestran el contenido de

otra manera (por ejemplo, los que leen el texto en voz alta). En el caso

de <b>negrita</b> e<i>itálica</i>, existen elementos que se ven de la misma manera pero tienen

una naturaleza más semántica:<strong>enfásis fuerte</strong> y <em>énfasis</em>. Es fácil ver

cómo un lector de pantalla debería interpretar estos dos elementos. Sin embargo, son equivalentes

a sus correspondientes elementos presentacionales: un lector de pantalla no debería decir más

fuerte el nombre de un libro, aunque éste esté en itálicas en una pantalla. La mayoría del marcado

presentacional ha sido desechada con HTML 4.0, en favor de hojas de estilo en cascada.

El marcado hipertextual se utiliza para enlazar partes del documento con otros documentos

o con otras partes del mismo documento. Para crear un enlace es necesario utilizar la etiqueta de

ancla <a> junto con el atributo href, que establecerá la dirección URL a la que apunta el enlace.

Por ejemplo, un enlace a la Wikipedia sería de la forma <a

Herramientas de diseño en la web y HTML. 15

href=”es.wikipedia.org”>Wikipedia</a>. También se pueden crear enlaces sobre otros objetos,

tales como imágenes <a href=”enlace”><img src=”imagen” /></a>.

Atributos

La mayoría de los atributos de un elemento son pares nombre-valor, separados por un signo

de igual «=» y escritos en la etiqueta de comienzo de un elemento, después del nombre de éste. El

valor puede estar rodeado por comillas dobles o simples, aunque ciertos tipos de valores pueden

estar sin comillas en HTML (pero no en XHTML).8 9 De todas maneras, dejar los valores sin

comillas es considerado poco seguro.10 En contraste con los pares nombre-elemento, hay algunos

atributos que afectan al elemento simplemente por su presencia11 (tal como el atributoismap para

el elemento img).12

Códigos HTML básicos

Artículo principal: Anexo:Etiquetas HTML/XHTML5.

<html>: define el inicio del documento HTML, le indica al navegador que

lo que viene a continuación debe ser interpretado como código HTML. Esto es así de

facto, ya que en teoría lo que define el tipo de documento es el DOCTYPE, que

significa la palabra justo tras DOCTYPE el tag de raíz, por ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"

"http://www.w3.org/TR/html4/strict.dtd">

Herramientas de diseño en la web y HTML. 16

<script>: incrusta un script en una web, o llama a uno mediante src="url

del script". Se recomienda incluir el tipo MIME en el atributo type, en el caso

de JavaScripttext/javascript.

<head>: define la cabecera del documento HTML; esta cabecera suele

contener información sobre el documento que no se muestra directamente

al usuario como, por ejemplo, el título de la ventana del navegador. Dentro de la

cabecera <head> es posible encontrar:

Un ejemplo de código HTML con coloreado de sintaxis.

<title>: define el título de la página. Por lo general, el título aparece en la

barra de título encima de la ventana.

Herramientas de diseño en la web y HTML. 17

<link>: para vincular el sitio a hojas de estilo o iconos. Por ejemplo:<link

rel="stylesheet" href="/style.css" type="text/css">.

<style>: para colocar el estilo interno de la página; ya sea usando CSS u

otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo

externo usando la etiqueta <link>.

<meta>: para metadatos como la autoría o la licencia, incluso para indicar

parámetros http (mediante http-equiv="") cuando no se pueden modificar por no estar

disponible la configuración o por dificultades con server-side scripting.

<body>: define el contenido principal o cuerpo del documento. Esta es la

parte del documento html que se muestra en el navegador; dentro de esta etiqueta

pueden definirse propiedades comunes a toda la página, como color de fondo y

márgenes. Dentro del cuerpo <body> es posible encontrar numerosas etiquetas. A

continuación se indican algunas a modo de ejemplo:

<h1> a <h6>: encabezados o títulos del documento con diferente

relevancia.

<table>: define una tabla.

Herramientas de diseño en la web y HTML. 18

<tr>: fila de una tabla.

<td>: celda de una tabla (debe estar dentro de una fila).

<a>: hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse el

parámetro de pasada por medio del atributo href. Por ejemplo: <a

href="http://www.wikipedia.org" title="Wikipedia" target="_blank"

tabindex="1">Wikipedia</a> se representa como Wikipedia).

<div>: división de la página. Se recomienda, junto con css, en vez

de <table> cuando se desea alinear contenido.

<img>: imagen. Requiere del atributo src, que indica la ruta en la que se

encuentra la imagen. Por ejemplo: <img src="./imágenes/mifoto.jpg" />. Es

conveniente, por accesibilidad, poner un atributo alt="texto alternativo".

<li><ol><ul>: etiquetas para listas.

<b>: texto en negrita (etiqueta desaprobada. Se recomienda usar la

etiqueta <strong>).

<i>: texto en cursiva (etiqueta desaprobada. Se recomienda usar la

etiqueta <em>).

Herramientas de diseño en la web y HTML. 19

<s>: texto tachado (etiqueta desaprobada. Se recomienda usar la

etiqueta <del>).

<u>: texto subrayado.

La mayoría de etiquetas deben cerrarse como se abren, pero con una barra («/») tal como se

muestra en los siguientes ejemplos:

<table><tr><td>Contenido de una celda</td></tr></table>.

<script>Código de un [[script]] integrado en la página</script>.

Nociones básicas de HTML

El lenguaje HTML puede ser creado y editado con cualquier editor de

textos básico, como puede ser Gedit en Linux, el Bloc de notas de Windows, o cualquier

otro editor que admita texto sin formato como GNU Emacs, Microsoft

Wordpad, TextPad, Vim, Notepad++, entre otros.

Existen, además, otros editores para la realización de sitios web con

características WYSIWYG (What You See Is What You Get, o en español: «lo que ves es

lo que obtienes»). Estos editores permiten ver el resultado de lo que se está editando en

tiempo real, a medida que se va desarrollando el documento. Ahora bien, esto no

significa una manera distinta de realizar sitios web, sino que una forma un tanto más

Herramientas de diseño en la web y HTML. 20

simple, ya que estos programas, además de tener la opción de trabajar con la vista

preliminar, tiene su propia sección HTML, la cual va generando todo el código a medida

que se va trabajando. Algunos ejemplos de editores WYSIWYG

son KompoZer, Microsoft FrontPage o Adobe Dreamweaver.

Combinar estos dos métodos resulta muy interesante, ya que de alguna manera se

ayudan entre sí. Por ejemplo, si se edita todo en HTML y de pronto se olvida algún

código o etiqueta, simplemente me dirijo al editor visual o WYSIWYG y se continúa ahí

la edición o viceversa, ya que hay casos en que resulta más rápido y fácil escribir

directamente el código de alguna característica que el usuario desea adherir al sitio que

buscar la opción en el programa mismo.

Existe otro tipo de editores HTML llamados WYSIWYM que dan más importancia

al contenido y al significado que a la apariencia visual. Entre los objetivos que tienen

estos editores es la separación del contenido y la presentación, fundamental en el diseño

web.

HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de

comienzo y final, mediante las cuales se determina la forma en la que debe aparecer en

su navegador el texto, así como también las imágenes y los demás elementos, en la

pantalla del ordenador.

Herramientas de diseño en la web y HTML. 21

Toda etiqueta se identifica porque está encerrada entre los signos menor que y

mayor que (<>), y algunas tienen atributos que pueden tomar algún valor. En general las

etiquetas se aplicarán de dos formas especiales:

Se abren y se cierran, como por ejemplo: <b>negrita</b>, que se vería en

su navegador web como negrita.

No pueden abrirse y cerrarse, como <hr />, que se vería en su navegador

web como una línea horizontal.

Otras que pueden abrirse y cerrarse, como por ejemplo <p>.

Las etiquetas básicas o mínimas son:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="es">

<head>

<title>Ejemplo</title>

</head>

<body>

<p>ejemplo</p>

</body>

Herramientas de diseño en la web y HTML. 22

</html>

BIBLIOGRAFÍA

Sergio Luján Mora (2001) wikipedia enciclopedia libre, recuperado el día (21/07/2012) en:

http://es.wikipedia.org/wiki/HTML

Javier Pérez (JUNIO 5, 2007) Maestros del web, recuperado el día (21/07/2012) en:

http://www.maestrosdelweb.com/editorial/herramientas-adecuadas-para-el-diseno-y-desarrollo-

de-un-sitio-web/