Este documento describe las principales herramientas para el diseño y desarrollo de sitios web, incluyendo el diseño gráfico, maquetación con HTML y CSS, y programación del lado del servidor y cliente. Explica las diferentes fases del proceso de desarrollo web y recomienda herramientas como Photoshop, GIMP, Inkscape, Dreamweaver y Zend Studio para el diseño, maquetación y programación, respectivamente. También destaca la importancia de probar el sitio web localmente usando Apache antes de implementarlo en un hosting.

1. 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.

2. 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.

3. 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.

4. 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
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.

5. Herramientas de diseño en la web y HTML. 5
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.
DISEÑO:
el diseño consiste en crear esbozos de la web final mediante una herramienta gráfica,
como Photoshop, GIMP o Inkscape.

6. Herramientas de diseño en la web y HTML. 6
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:
Esta fase enlaza la anterior con la siguiente, y es donde haremos las pruebas unitarias,
aserciones, trazas, etc.
PRUEBAS EN LOCAL:

7. Herramientas de diseño en la web y HTML. 7
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.
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

8. Herramientas de diseño en la web y HTML. 8
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.
FASES: MAQUETACIÓN, PROGRAMACIÓN CLIENTE

9. Herramientas de diseño en la web y HTML. 9
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.
FASE: PRUEBA LOCAL

10. Herramientas de diseño en la web y HTML. 10
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.
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

11. Herramientas de diseño en la web y HTML. 11
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
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

12. Herramientas de diseño en la web y HTML. 12
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
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.

13. Herramientas de diseño en la web y HTML. 13
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
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

14. Herramientas de diseño en la web y HTML. 14
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
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

15. Herramientas de diseño en la web y HTML. 15
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">
 <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:

16. Herramientas de diseño en la web y HTML. 16
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.
 <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>.

17. Herramientas de diseño en la web y HTML. 17
 <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.
 <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

18. Herramientas de diseño en la web y HTML. 18
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>).
 <s>: texto tachado (etiqueta desaprobada. Se recomienda usar la
etiqueta <del>).
 <u>: texto subrayado.

19. Herramientas de diseño en la web y HTML. 19
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
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.

20. Herramientas de diseño en la web y HTML. 20
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.
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:

21. Herramientas de diseño en la web y HTML. 21
 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>
</html>

22. Herramientas de diseño en la web y HTML. 22
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/