Estudiando Introducción al Desarrollo Web: agosto 2015

viernes, 21 de agosto de 2015

Proyecto Módulo 2: Mi página web sobre mi identidad digital 5/5

Aquí dejo escrito el código final del proyecto del segundo módulo del curso. Si queréis ver el reslutadi final tan solo debeis copiar los archivos en vuestro editor.

A.html

<html>
<head>
<title>Ricard Ferrero Conde - Identidad Personal</title>
</head>
<body>
<h1>Ricard Ferrero Conde</h1>
<p>
   <ul>
     <li><a href='A.html'>Identidad Personal</a></li>
   <li><a href='B.html'>Ojetivos y Servicios</a></li>
   <li><a href='C.html'>Estudios, Habilidades y Técnicas</a></li>
   <li><a href='D.html'>Proyectos</a></li>
   <li><a href='E.html'>Contacto</a></li>
   </ul>
</p>
<h2>Identidad Personal</h2>
<p><strong>Ricard Ferrero Conde<br/>Polifacético<br/>Músico profesional, <em>community manager</em> y desarrollador web</strong></p>
<p>Durante años se ha exigido al empleado que perfeccione su profesión obsesionandose en especializarse unidireccionalmente.</p>
<p>Es lógico buscar la optimización de las capacidades hacia una única disciplina, creiendo que así podremos llegar a ser uno de los mejores en la profesión y esperar que los demás acudan a nuestros servicios.</p>
<p>Pero los tiempos están cambiando y las empresas se modernizan en la dirección de los deseos de la sociedad del nuevo milenio. La era digital ha creado lazos y contactos entre personas de todo el mundo y, lo creamos o no, la sociedad se está volviendo más humana y empática.</p>
<p>Las personas con actitudes polifacéticas sin miedo a aprender todas las disciplinas posibles y relacionadas acostumbran a tener la capacidad de la objetividad, la empatía y el buen trabajo en equipo.</p>
<p>Aprender a ver una situación desde diferentes puntos de vista permite tener una visión del terreno más amplia y eso fomenta la creatividad y la capacidad de solventar dificultades y superar obstáculos.</p>
</body>
</html>

B.html

<html>
<head>
<title>Ricard Ferrero Conde - Ojetivos y Servicios</title>
</head>
<body>
<h1>Ricard Ferrero Conde</h1>
<p>
   <ul>
     <li><a href='A.html'>Identidad Personal</a></li>
   <li><a href='B.html'>Ojetivos y Servicios</a></li>
   <li><a href='C.html'>Estudios, Habilidades y Técnicas</a></li>
   <li><a href='D.html'>Proyectos</a></li>
   <li><a href='E.html'>Contacto</a></li>
   </ul>
</p>
<h2>Ojetivos y Servicios</h2>
<p>
<dl>
   <dt><h3>Profesor de música</h3></dt>
    <dd>Aunque mi especialidad es la batería tengo un alto nivel en solfeo y harmonía. Doy clases particulares a alumnos interesados en la batería así como clases de solfeo y harmonía a personas que quieren completar sus conocimientos de música (sea cual sea el instrumento que toquen).</dd>
   <dt><h3>Baterista profesional</h3></dt>
    <dd>Mis servicios ofrecen mi técnica instrumental tanto para bandas que necesiten un baterista para sus conciertos, como para grabaciones. Compongo las baterías o interpreto las ya compuestas, a gusto del cliente. Acostumbrado a la improvisación, me adapto a cualquier estilo.</dd>
   <dt><h3>Desarrollador web</h3></dt>
    <dd>Si necesitas una página web y no sabes a quien acudir puedes consultarme. Puedo asesorarte en tus necesidades y si terminas conforme empezaría a trabajar en el proyecto desde el minuto cero.</dd>
   <dt><h3><em>Community manager</em></h3></dt>
    <dd>Si tienes algun tipo de interés en crear una buena reputación digital de tu empresa, grupo de música o incluso tu misma identidad web, puedes contar conmigo y mi experiencia.</dd>
</dl>
</p>
</body>
</html>

C.html

<html>
<head>
<title>Ricard Ferrero Conde - Estudios, Habilidades y Técnicas</title>
</head>
<body>
<h1>Ricard Ferrero Conde</h1>
<p>
   <ul>
     <li><a href='A.html'>Identidad Personal</a></li>
   <li><a href='B.html'>Ojetivos y Servicios</a></li>
   <li><a href='C.html'>Estudios, Habilidades y Técnicas</a></li>
   <li><a href='D.html'>Proyectos</a></li>
   <li><a href='E.html'>Contacto</a></li>
   </ul>
</p>
<h2>Estudios, Habilidades y Técnicas</h2>
<p>
<ul style='list-style-type:circle'>
   <li>Estudiante de música en grado profesional de moderno y clásico</li>
   <li>Márqueting a través de las redes sociales</li>
   <li>Introducción al desarrollo web</li>
</ul>
</p>
</body>
</html>

D.html

<html>
<head>
<title>Ricard Ferrero Conde - Proyectos</title>
</head>
<body>
<h1>Ricard Ferrero Conde</h1>
<p>
   <ul>
     <li><a href='A.html'>Identidad Personal</a></li>
   <li><a href='B.html'>Ojetivos y Servicios</a></li>
   <li><a href='C.html'>Estudios, Habilidades y Técnicas</a></li>
   <li><a href='D.html'>Proyectos</a></li>
   <li><a href='E.html'>Contacto</a></li>
   </ul>
</p>
<h2>Proyectos</h2>
<p>
<dl>
   <dt><h3>Magret De Paco</h3></dt>
    <dd>Banda musical en la que participo como intérprete, letrista, compositor, community manager y desarrollador web.</dd>
   <dt><h3><em>Two-Hours Song</em></h3></dt>
    <dd>Composición y grabación de baterías y percusión para bandas en dos horas.</dd>
   <dt><h3>Estudiando Introducción al Desarrollo Web</h3></dt>
    <dd>Blog donde dejo anotados mis evoluciones como desarollador web que a su vez sirve como tutorial para otros interesados.</dd>
</dl>
</p>
</body>
</html>

E.html

<html>
<head>
<title>Ricard Ferrero Conde - Contactos</title>
</head>
<body>
<h1>Ricard Ferrero Conde</h1>
<p>
   <ul>
     <li><a href='A.html'>Identidad Personal</a></li>
    <li><a href='B.html'>Ojetivos y Servicios</a></li>
    <li><a href='C.html'>Estudios, Habilidades y Técnicas</a></li>
    <li><a href='D.html'>Proyectos</a></li>
    <li><a href='E.html'>Contacto</a></li>
   </ul>
</p>
<h2>Contacto</h2>
<p><strong>Correo electrónico:</strong> r.ferrero.conde@gmail.com</p>
<p><strong>Google+:</strong> Ricard Ferrero</p>
<p><strong>Teléfono:</strong> 679 45 32 38</p>
</body>
</html>

Proyecto Módulo 2: Mi página web sobre mi identidad digital 4/5

Prácticamente está finalizado el proyecto del módulo. Os dejo aquí los códigos del prototipo de alta fidelidad. Si quereis ver el código del proyecto final lo dejo en esta otra entrada.

A

<html>
<head>
<title>Título del sitio web + A</title>
</head>
<body>
<h1>Título del sitio web</h1>
<p>
   <ul>
     <li><a href='A.html'>A</a></li>
    <li><a href='B.html'>B</a></li>
    <li><a href='C.html'>C</a></li>
    <li><a href='D.html'>D</a></li>
    <li><a href='E.html'>E</a></li>
   </ul>
</p>
<h2>A</h2>
<p>Contenido</p>
</body>
</html>

B

<html>
<head>
<title>Título del sitio web + B</title>
</head>
<body>
<h1>Título del sitio web</h1>
<p>
   <ul>
     <li><a href='A.html'>A</a></li>
   <li><a href='B.html'>B</a></li>
   <li><a href='C.html'>C</a></li>
   <li><a href='D.html'>D</a></li>
   <li><a href='E.html'>E</a></li>
   </ul>
</p>
<h2>B</h2>
<p>Contenido</p>
</body>
</html>

C

<html>
<head>
<title>Título del sitio web + C</title>
</head>
<body>
<h1>Título del sitio web</h1>
<p>
   <ul>
     <li><a href='A.html'>A</a></li>
    <li><a href='B.html'>B</a></li>
    <li><a href='C.html'>C</a></li>
    <li><a href='D.html'>D</a></li>
    <li><a href='E.html'>E</a></li>
   </ul>
</p>
<h2>C</h2>
<p>Contenido</p>
</body>
</html>

D

<html>
<head>
<title>Título del sitio web + D</title>
</head>
<body>
<h1>Título del sitio web</h1>
<p>
   <ul>
     <li><a href='A.html'>A</a></li>
    <li><a href='B.html'>B</a></li>
    <li><a href='C.html'>C</a></li>
    <li><a href='D.html'>D</a></li>
    <li><a href='E.html'>E</a></li>
   </ul>
</p>
<h2>D</h2>
<p>Contenido</p>
</body>
</html>

E

<html>
<head>
<title>Título del sitio web + E</title>
</head>
<body>
<h1>Título del sitio web</h1>
<p>
   <ul>
     <li><a href='A.html'>A</a></li>
    <li><a href='B.html'>B</a></li>
    <li><a href='C.html'>C</a></li>
    <li><a href='D.html'>D</a></li>
    <li><a href='E.html'>E</a></li>
   </ul>
</p>
<h2>E</h2>
<p>Contenido</p>
</body>
</html>

Proyecto Módulo 2: Mi página web sobre mi identidad digital 3/5

Ya están definidas las bases del proyecto a realizar y el prototipo de la web. Ahora toca empezar a desarrollar la web.

Desarrollando la web

El primero paso que voy a dar antes de comenzar a desarrollar ninguna de las páginas será construir un prototipo directamente con HTML que nos servirá a la vez de plantilla para todas las páginas del proyecto.

El código de la plantilla es el siguiente:

<html>
<head>
<title>Título del sitio web + Título de la página</title>
</head>
<body>
<h1>Título del sitio web</h1>
<p>
   <ul>
     <li><a href='A.html'>A</a></li>
   <li><a href='B.html'>B</a></li>
   <li><a href='C.html'>C</a></li>
   <li><a href='D.html'>D</a></li>
   <li><a href='E.html'>E</a></li>
   </ul>
</p>
<h2>Título de la página</h2>
<p>Contenido</p>
</body>
</html>

El prototipo de alta fidelidad será tan fácil como crear las cinco páginas del sitio web con exactamente el mismo código pero modificando el nombre del archivo por el correcto (la página principal será "A" y las otras "B", "C", "D" y "E").

Este proceso lo he hecho de ésta manera para facilitar el trabajo. Ahora podemos comprobar que las páginas web están bien enlazadas entre sí. El siguiente paso es coger el prototipo de alta fidelidad de la web y rellenarlo con el contenido de la web. Y ya estará.

Dejo en otras entradas los códigos del prototipo y del sitio web con el conenido finalizado por si queréis consultar alguna cosa.

Proyecto Módulo 2: Mi página web sobre mi identidad digital 2/5

Como hemos visto en la entrada anterior, el proyecto del segundo módulo del curso es construir una web con HTML. Ya han quedado definidos los objetivos del sitio web, las necesidades de los usuarios, las funciones y requerimientos de la web y la navegación. Ahora hay que prototipar.

Prototipado de la web

Primero y antes de todo vamos a hacer un listado de los elementos que van a aparecer en el contenido de la web:

Identidad personal definida
Mis objetivos y servicios en la red
Mis objetivos y servicios fuera de la red
Método de contacto conmigo
Información de mis estudios
Información de mis "skills"
Proyectos personales finalizados
Proyectos personales en proceso

He numerado los elementos de la lista para poder trabajar a posteriori más cómodamente. Vamos a ver cómo podemos ordenar los elementos.

Por lógica el asunto más importante a tratar es mi identidad que quiero mostrar al mundo, la razón principal de la web, así que es el elemento que debería verse al entrar a mi web. La página principal debería contener el elemento 1.

Si queremos que las páginas queden sencillas y rápidas de leer será bueno no poner más elementos en la página principal y dejar los demás para las otras páginas deribadas de ésta.

Los elementos 2 y 3 pueden ir empaquetados en la mimsa página por tratar temas muy parecidos.

Los elementos 5 y 6 son parecidos a los elementos de un currículum y podrían juntarse en la misma página.

Lo mismo pasa con los elementos 7 y 8, que podrían ir perfectamente en el mismo apartado del sitio web.

Por último tenemos el elemento 4 que puede ser independiente al resto de las páginas.

Nombraremos cada una de las páginas con letras en mayúsculas, y partiremos de que la primera es la página principal de la web. Las páginas y sus contenidos quedarán organizados de la siguiente manera.

Identidad personal definida
Mis objetivos y servicios en la red y fuera de ella
Información de mis estudios y "skills"
Mis proyectos personales con sus resultados y los proyectos en proceso
Método de contacto conmigo

El proceso, como podéis observar, está formandose desde lo general y abstracto hacia algo más concreto y definido. Ahora vamos a hacer un diagrama sobre la estructura del sitio web y vamos a aclarar cómo será la navegación.

En este tipo de web hay que reconocer que prácticamente no hace falta el proceso de prototipado y la diagramación por la sencillez y escasez de páginas, pero hay que practicar siempre que se pueda y será una buena oportunidad empezar ahora.

Lo primero será un plano de la navegación de la web con el vocabulario visual descrito por James Garret.

Las conexiones sin flechas simbolizan que aunque las páginas B, C, D y E derivan de la A, todas están conectadas entre sí y hay enlaces en cada una de ellas para saltar a cualquier otra.

Ahora hay que crear una buena maqueta. He empezado por un sketch hecho con boligrafo en papel, y ahora pasaré a formalizarlo con un software adecuado. Por cierto, que sepas que para hacer cualquier tipo de archivo gráfico yo uso el GIMP.

Supongo que queda clara la estructura de la información y el contenido que tendrá cada una de las páginas. Ya tenemos un buen prototipado de las páginas web del proyecto.

Ahora voy a construir una especie de prototipo de alta fidelidad que en realidad vendrá a ser una maqueta que a su vez servirá de plantilla para el desarrollo de la web. Como ésto ya es desarrollo web lo dejaré para la siguiente entrada.

Proyecto Módulo 2: Mi página web sobre mi identidad digital 1/5

Al final de cada módulo del curso iDESWEB los alumnos debemos hacer un proyecto con las nuevas habilidades adquiridas. La del Módulo 1 era empezar este mismo blog que estás leyendo.

Proyecto

En este caso el proyecto a realizar es escribir un sitio web con lo aprendido hasta ahora de HTML. Y cuando digo un sitio web me refiero a varias páginas web enlazadas entre sí.

Lógicamente no habrá fotografías ni vídeos, ni tampoco se podrá cambiar el color de fondo ni el de texto. Por lo tanto no habrá que preparar el dieño. Si no sabes por qué lee esta entrada.

Requisitos

Elegir una temática libre, aunque prononen tres ejemplos: mi currículum, mi identidad digital en la Web o mi empresa.
Prototipado de la web con las herramientas que he aprendido.
Desarrollar la página principal.
Desarrollar el resto de páginas.
Recomiendan hacer una página pequeña, no muy extensa con pocas páginas web.

Mis objetivos personales

Como temática he elegido crear una página como targeta de presentación de mi identidad digital.
El prototipado no necesita reflejar absotulatemente nada del diseño web teniendo en cuenta las limitaciones de mis actuales conocimientos de HTML. Sin embargo es primordial tener clara la arquitectura de la información de la conexión entre las páginas y su contenido. Por lo tanto también diseñaré maquetas y prototipos de la página con HTML, investigando el diseño de la arquitectura del texto.

Temática

Mi página web sobre mi identidad digital

"Como idea general se trata de escribir un sitio web que describa mi personalidad dentro de la Web. Por lo tanto podría poner cómo contactar conmigo, mi cuenta de google+ o mi correo electrónico."

Éste podría ser el planteamiento si fuese un cliente que pide una página web. Es lo primero que se me ha ocurrido cuando he pensado en hacer una web sobre mí, y podría pasarle a cualquier inexperteo en desarrollo web, que lo único que sabe es que quiere la web porque es útil pero no sabe exactamente hasta qué punto.

Mi obligación como arquitecto de la información es indagar más en el asunto, concretar más algo tan genérico y abstracto y transformarlo en algo específico.

El objetivo del proyecto "Mi página web sobre mi identidad digital" es comunicar al público usuario mi existencia en la red y mi participación en ella, así como también utilizar ésta identidad como conexión a mi identidad del mundo real, alcanzable al público físico para trabajos complementarios.

Como músico es una oportunidad perfecta poder conectar el desarrollo web con mis proyectos de música, así como también ofrecer mis servicios tanto en una disciplina como en la otra.

Las necesidades de los usuarios son poder encontrar la información deseada de mis proyectos personales, sus resultados, mi interés en participar en más proyectos, así como poder leer mi currículum y promocionar mis servicios como músico (clases, composición, interpretación), desarrollador web y community manager. Ésta información debe ser de fácil y rápido acceso (un máximo de tres clics desde la página principal) y todo debe ser fácil y rápido de entender.

Las funciones y los requerimientos de la web son básicamente textos explicativos de mi identidad web y mis proyectos, con los enlaces correspondientes a la información (correo electrónico, página del grupo, etc...), y para ello solo es necesario HTML.

La navegación debe ser sencilla y corta. Deben ser un listado de páginas web que deriban de la principal, pero éstas también deben tener enlaces entre sí y uno de retorno a la página principal. Éstos enlaces serán un listado, un pequeño índice de el resto de las páginas del sitio, y debe aparecer siempre muy visible y en el mismo lugar, para no perderse entre tanto texto.

Hasta aquí hemos terminado la introducción al proyecto "Mi página web sobre mi identidad digital". En la próxima entrada empiezo a trabajar el prototipado.

martes, 18 de agosto de 2015

HTML: Un par de asuntillos importantes

Ya sabemos construir páginas webs con HTML (y si no sabes empieza a leer a partir de aquí). Pero, como dije antes, no pararemos de aprender el lenguaje HTML a lo largo de nuestra vida. Voy a dejar aquí escritas un par de cosillas que se debe saber para no crear confusiones.

Los espacios en el texto

Estamos acostumbrados a usar programas para redactar como el Microsoft Word o el Word Office. Pero cuando desarrollamos una web el sistema es absolutamente diferente. Por más que escribas espacios en blanco y saltos de línea en los párrafos del código la máquina no hará distinción entre éstos. De hecho tan solo hará un espacio entre palabra y palabra, por más que las separes.

Lo bueno de éso es que permite escribir el código de la página como tu te sientas más cómodo en tu editor. Por ejemplo, yo siempre pongo una sangria de espacios a los contenidos de un elemento como por ejemplo el "head", para remarcar visualmente que ese texto está dentro de otro. Son recursos y cada uno usa los que le sean más útiles.

Si necesitas poner espacios en blanco en la web (algo que no acostumbra a tener mucha utilidad, por cierto) debes saber que la manera correcta es con la "etiqueta" (no es una etiqueta, se explica después)   (sí, el punto y coma va incluido) y representan las siglas de no-break space.

Te pondré un ejemplo para que te quede claro:

Código: <p>Hola Adiós</p>
Texto: Hola Adiós
Código: <p>Hola     Adiós</p>
Texto: Hola Adiós

Desde mi punto de vista es algo bastante inútil, feo y molesto de usar. Para este tipo de manipulación de la presentación está el lenguaje CSS.

Lo mismo pasa con los saltos de línea, que por más que los escribes solo formarán un único espacio en blanco. La etiqueta correcta es <br></br>, pero ésta etiqueta no es necesario ponerle el cierre (aunque se puede usar así), por lo cual se puede escribir <br> para HTML4 o <br/> para XHTML. En HTML5 puedes usar las dos anteriores. Se recomienda usar la segunda por mayor compatibilidad.

Caracteres especiales

Hay caracteres que son considerados especiales por no ser reconocidos en todos los ordenadores, como por ejemplo nuestra querida "Ñ". Ésta letra se escribe digitalmente con un caracter especial que no siempre será identificado en otros países.

Hay un sistema para escribir estos caracteres especiales y que puedan ser leídos en todos los ordenadores. Todos los caracteres tienen un nombre o número de referencia (referencia de caracter) y debes escribirlo entre los símbolos "&" y ";" (exacto, la etiqueta que hemos visto antes para escribir espacios en blanco es una referencia de caracter también). A este proceso se le llama "escapar caracteres".

Si por ejemplo queremos poner el símbolo "&" en el texto que queremos mostrar en la web, como comprenderás no basta con escribirlo porque éste caracter es un elemento del lenguaje HTML (igual que "<") y confundiría al navegador. Para ello deberás escribir & y entoncés sí aparecerá el caracter "&" en el texto de tu web.

En la web hay varias listas de las referencias de caracteres. Aquí dejo la lista oficial.

Para las referencias de caracteres numéricas decimales se escribe &#número; y las referencias de caracteres numéricas exadecimales se escribe con &#xnúmero; (muy pocas veces tendrás que hacer uso de ésto).

El problema de ésto es que hay tutoriales donde explican que los símbolos como por ejemplo las vocales acentuadas deben escribirse con su referencia de caracter, porque en otros paises (como los de habla inglesa) no usan tilde en ninguna vocal. Pero eso es un error porque las cosas han avanzado mucho y actualmente las páginas web se implementan eligiendo el juego de caracteres adecuado, que en nuestro caso es el ISO-8859-1 (también llamado Latin1 o UTF-8).

Si lo deseas puedes consultar mi proyecto del Módulo 2 del curso iDESWEB. En él he construido una página web, tocando todos los temas tratados hasta ahora (incluidos el prototipado). Lo he dejado todo detallado para que veas un buen ejemplo.

lunes, 17 de agosto de 2015

HTML: Primeros pasos 4/4

Y aquí tenemos el final de éste módulo de cuatro entradas de los primeros pasos que hay que dar para empezar a aprender el HTML. Si has visto la primera, segunda y tercera entrada te darás cuenta que ahora puedes escribir y estructurar textos comprensibles con HTML, pero falta el elemento especial que transforma las webs en hipertextos: los enlaces o hiperenlaces. Si acabas de empezar te recomiendo que antes visites la entrada introductoria al HTML.

Los enlaces

Los enlaces (también llamados hiperenlaces, vínculos o hipervínculos) son aquel elemento que permite conectar digitalmente diferentes páginas web entre sí con tan solo un clic.

Las partes de los hipertextos que contienen información accesible para el usuario se les llama nodos. Los enlaces son las uniones o vínculos que se establecen entre nodos y facilitan la lectura secuencial o no secuencial por los nodos del documento. Por último, los anclajes son los puntos de activación de los enlaces.

Existen dos tipos de enlaces en las páginas web:

Enlaces intradocumentales
Enlaces extradocumentales

Realmente un enlace puede llevar al usuario a otro punto concreto del mismo documento (enlaces intradocumentales), a un documento diferente o un punto concreto de otro documento diferente. Estos dos últimos casos, ambos extradocumentales, pueden llevar a un documento web del mismo servidor o de otro servidor.

La etiqueta que se utiliza para definir un hiperenlace es <a> y </a>. En el contenido de este elemento puedes utilizar tanto texto como imágenes que se transformarán en el componente sensible (anclaje) que al activarlo con un clic te llevará al destino.

Enlaces intradocumentales

Para hacer un enlace intradocumental lo primero es definir el destino.

Antiguamente se utilizaba el atribuo name para la etiqueta <a>, y escribiendo como valor el nombre que usaremos como referencia del destino:

Pero ése atributo ya no se usa. Actualmente usamos el atributo id para la etiqueta del párrafo en concreto, y escribiendo como valor el nombre que usaremos como referencia del destino:

etc...

Luego, para crear el enlace, se usa la etiqueta <a> con el atributo href y reescribiendo el nombre del destino con una almohadilla delante.

Por supuesto que en una página web se pueden definir varios enlaces a un mismo destino, pero no se pueden crear varios destinos con el mismo nombre. El nombre debe ser único.

Enlaces extradocumentales

Para hacer un enlace extradocumental tan solo tenemos que indicar la URL de acceso al otro documento como valor del atributo href.

También existe el enlace extradocumental a un punto concreto de otro documento. En este tipo de enlace se combinan los dos enlaces anteriores. Por un lado tenemos el enlace, en el que se tiene que indicar tanto la URL del documento como el nombre del punto en el otro documento. Por otro lado, en el destino del enlace se debe definir el punto al que se hace referencia mediante un nombre, ya sea con el atributo name, el método antiguo, o mediante el atributo id.

Si debemos utilizar un enlace para ir a una página web alojada en otro servidor debemos poner la direccion completa.

<a href="http://estudiandoidesweb.blogspot.com.es/">...</a>

Si la página está alojada en el mismo servidor (es decir, otra página de tu sitio web) tan solo debes poner el nombre de la página siempre y cuando compartan la misma carpeta (como en el primer ejemplo de este apartado).

Pero si la página a donde lleva el enlace está en el mismo servidor pero en una carpeta diferente, esta carpeta debe permanecer almacenada dentro de la misma carpeta de la página web principal. No funcionaria si intentásemos buscar en carpetas anteriores una vez lo subamos a la red.

<a href="carpeta/pagina2.html">...</a>

No olvides nunca

Las rutas y los nombres para los ficheros o puntos concretos de los documentos es importante que sean simples. Es mejor hacerlo todo en minúsculas, no utilizar caracteres extraños ni nombres largos y poco amigables.

No uses espacios en blanco para los nombres de las rutas.

También vigila no pongas direcciones de lugares físicos de tu ordenador, pues una vez abierto desde el ordenador de otra persona darían error 404.

¿Algo más?

Pues en realidad sí, muchísimo más. Queda practicar diferentes proyectos e ideas que tengas en la cabeza para acabar de aprender bien el lenguaje HTML, y buscar más información sobre como usar este código. Recuerda que solo te he enseñado unas pocas etiquetas de todas las que usa HTML (que son unas cien).

Te recomiendo que heches un vistazo a esta entrada con un par de detalles importantes que ayudarán a que puedas conocer mejor como funciona el lenguaje HTML.

HTML: Primeros pasos 3/4

Si has leído la primera y segunda parte de este módulo introductorio al HTML ya conoces las ocho primeras etiquetas para escribir un texto comprensible. Ahora aprenderás unas etiquetas nuevas y también empezarás a usar los atributos. Si acabas de empezar o aun no has hecho nada de HTML te recomiendo que leas la entrada introductioria de este blog.

Las listas

Las listas sirven para estructurar diferentes datos (normalmente textos) que forman parte de un mismo contexto y ayudar a la comprensión del lector de una forma visual.

Hay tres tipos de listas: no ordenadas, ordenadas y de descripción.

Listas ordenadas

Ésto es una lista no ordenada:

Cuadrado
Triángulo
Redonda

Como puedes comprobar en una lista no ordenada no hay ningún motivo para colocar un elemento antes que otro, por eso se simbolizan todos igual (en este caso con un disco negro).

Éste es el caso en que el orden de los factores no altera el producto.

Las etiquetas de las listas no ordenadas son <ul> y </ul>, que probiene de unordered list. En el contenido de este elemento pondremos cada uno de las partes de la lista.

Para definir cada una de esas partes usaremos las etiquetas <li> y </li>, que probiene de item list.

Es decir, la anterior lista no ordenada se escribiría en lenguaje HTML de la siguiente manera:

<ul>
<li>Cuadrado</li>
<li>Triángulo</li>
<li>Redonda</li>
</ul>

Pruébalo tú mismo.

Dentro de las listas no ordenadas hay tres tipos que se definen con CSS, pero también es posible usar el atributo style (aunque menos recomendado) del lenguaje HTML.

Disco "list-style-type:disc":

Es la lista que ya hemos visto. No necesita atributo, pero por si te interesa también puedes usarlo:

<ul style="list-style-type:disc">
<li>Cuadrado</li>
<li>Triángulo</li>
<li>Redonda</li>
</ul>

Círculo "list-style-type:circle":

<ul style="list-style-type:circle">
<li>Cuadrado</li>
<li>Triángulo</li>
<li>Redonda</li>
</ul>

Cuadrado
Triángulo
Redonda

Cuadrado "list-style-type:square":

<ul style="list-style-type:square">
<li>Cuadrado</li>
<li>Triángulo</li>
<li>Redonda</li>
</ul>

Cuadrado
Triángulo
Redonda

Nada (vacío) "list-style-type:none":

<ul style="list-style-type:none">
<li>Cuadrado</li>
<li>Triángulo</li>
<li>Redonda</li>
</ul>

Cuadrado
Triángulo
Redonda

Listas ordenadas

Ésto es una lista ordenada:

Primero
Segundo
Tercero

Una lista ordenada es aquella que el orden sí es importante y además se usa para dejar clara la posición de los elementos de la lista.

Para ello utilizaremos las etiquetas <ol> y </ol>, que probiene de ordered list. Y los componentes de la lista se separarán también con las etiquetas "li".

En los lenguajes HTML4 y HTML5 hay dos atributos útiles, el atributo start que permite indicar el valor inicial en el que debe comenzar la lista y el atributo style que (al igual que las listas no ordenadas) permite indicar el tipo de numeración para la lista (1, 2, 3... ó bien I, II, II... etc...).

En HTML5 se ha añadido el atributo booleano reversed, y permite indicar que la numeración debe ser descendente.

Los diferentes tipos de estilo de las listas ordenadas son:

Números "1":

Es la lista que ya hemos visto. No necesita atributo, pero por si te interesa también puedes usarlo:

<ol type="1">
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ol>

Letras mayúsculas "A":

<ol type="A">
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ol>

Primero
Segundo
Tercero

Letras minúsculas "a":

<ol type="a">
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ol>

Primero
Segundo
Tercero

Números romanos "I":

<ol type="I">
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ol>

Primero
Segundo
Tercero

Números romanos (minúsculas) "i":

<ol type="i">
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ol>

Primero
Segundo
Tercero

Listas de descripción

Ésto es una lista de descripción:

Mesa: - Plancha de madera con patas para poner cosas encima
Cama: - Superficie acolchada para dormir

Estas listas lo único que hacen es desplazar las sangrías de sus componentes para crear una sensación de gerarquía. Es útil para formar descripciones como en un diccionario.

Utilizaremos las etiquetas <dl> y </dl> (que probiene de description list) para marcar donde irá la lista, luego cada término o sección de la lista se definirá con <dt> y </d>, y cada definición del término se definirá con <dd> y </dd>. No hay diferentes modalidades.

El código del ejemplo es el siguiente:

<dl>
<dt>Mesa</dt>
<dd>- Plancha de madera con patas para poner cosas encima</dd>
<dt>Cama</dt>
<dd>- Superficie acolchada para dormir</dd>
</dl>

Listas anidadas

Una lista anidada es simplemente una lista dentro de otra, y se pueden combinar de cualquier forma. La lista que está dentro de otra se llama sublista.

Así de simple:

<ul>
<li>Primera lista</li>
    <ul>
    <li>Sub lista de la primera lista</li>
    <li>Sub lista de la primera lista</li>
    </ul>
<li>Segunda lista</li>
    <ul>
    <li>Sub lista de la segunda lista</li>
    <li>Sub lista de la segunda lista</li>
    </ul>
</ul>

Y el resultado es el siguiente:

Primera lista

Sub lista de la primera lista
Sub lista de la primera lista

Segunda lista

Sub lista de la segunda lista
Sub lista de la segunda lista

Pruébalo tú

Ahora toca hacer un ejemplo como mínimo de cada. Esta vez ha sido denso, lo se, pero recuerda que lo más importante es que memorices qué puedes hacer y las etiquetas siempre las puedes venir a ver luego.

Cuando hayas hecho un par de listas de teléfonos, de la compra, de amigos, de fechas importantes, etc. avanza a la última entrada de la parte introductoria al HTML.

HTML: Primeros pasos 2/4

Si has hecho el ejercico propuesto en la primera parte de este módulo introductorio al HTML puedes seguir avanzando para aprender las otras cuatro etiquetas que nombramos. Y si acabas de empezar te recomiendo leer a antes esta introducción al HTML.

Más etiquetas básicas de HTML

Seguro que a estas alturas ya te habras dado cuenta que las cuatro etiquetas explicadas antes básicamente estructuran el cuerp de la página web. Vamos a utilizar las otras para construir sobre una estructura ya definida.

Etiqueta <h1>...<h6>

Existen seis etiquetas de estas y dan forma de encabezado. La etiqueta "h1" es la que destaca más a su contenido, siendo ésta la mayor de todas. Normalmente usaras solo hasta la "h3", y las "h4", "h5" y "h6" apenas se usan.

Te recomiendo que antes de seguir con el siguiente apartado experimentes con las seis etiquetas. Crea una web y escribe la misma frase en el contenido de cada una de las etiquetas para observar las diferencias. ¡No olvide que todas necesitan su etiqueta de cierre!

Etiqueta <p>

El contenido de esta etiqueta queda colocado con forma de parrafo independiente de los otros. Los textos de los archivos HTML se adecuarán al tamaño de la ventana del navegador, y es importante que te asegures que cada párrafo quede delimitado por esta etiqueta para que no se deforme la composición del texto y pierda comprensión.

Ahora coge la misma web que has creado con las seis etiquetas "h" y despues del primer encabezado escribe dos párrafos diferentes con una frase diferente en cada una. Copia estos dos párrafos y pégalos despues de cada uno de los encabezados. Fíjate bien en la forma que coje, y lo diminutos que se vuelven los últimos encabezados en comparación con un párrafo normal.

Etiqueta <strong>

Usaremos la etiquea "strong" para remarcar el texto que resida en su contenido. Por norma general, el efecto visual es el mismo que "negrita" en el Microsoft Word o Word Office.

Etiqueta <em>

Por último tenemos una etiqueta para enfatizar un texto que resida en su contenido.Por norma general, el efecto visual es el mismo que "cursiva" en el Microsoft Word o Word Office.

Venga chico, a experimentar

Realmente es más fácil de lo que pueda parecer al principio, ¿verdad? Para asegurarte que lo has entendido bien deberías probar de hacer un par de páginas (sencillas y cortas) diferentes. Podrías hacer una descripción de tu casa (utilizando los encabezados como zonas de la casa, remarcando con "strong" los objetos y enfatizando con "em" los colores y describciones) o también podrías hacer un pequeño diari de lo que hiciste ayer.

Prueba todas las etiquetas todas las veces que puedas, observa el resultado y piensa luego en cómo puedes cambiarlo para que sea más comprensible, claro y ordenado. Recuerda que las páginas web están para comunicarse y saber hacer comprender de manera estructurada algo es aun más complejo que memorizar etiquetas. Pero todo se puede aprender practicando, y practicand, y practicando...

Cuando te canses de practicar avanza a la siguiente entrada y aprende más etiquetas del lenguaje HTML.

HTML: Primeros pasos 1/4

A partir de ahora vamos a empezar a machacar nuestros dedos contra el teclado escribiendo páginas de código HTML. Empezaremos aprendiendo ocho etiquetas diferentes. Recuerda que si acabas de empezar deberías leer antes la entrada que he escrito como una introducción al HTML.

Las etiquetas HTML

Si vamos a aprender un lenguaje nuevo es imporante que aprendamos todas las palabras posibles. Pero en realidad es aun más importante aprender las palabras fundamentales (como decir "hola" o "gracias").

Debes saber que de todas las etiquetas del lenguaje HTML vas a utilizar habitualmente el 20%, con el que podrás construir el 80% del contenido de tus webs.

Por ahora nos conformaremos con aprender lo mejor posible las bases de cemento de una página web:

<html>

<head>

<title>

<body>

<h1>...<h6>

<strong>

<em>

En realidad las etiquetas se pueden escribir en mayúsculas o en minúsculas, pero te aconsejo que lo hagas TODO en minúsculas.

Te anticipo que si ahora empiezas a jugar (la mejor forma de aprender) escribiendo páginas web sin ninguna de estas etiquetas y las abres con tu navegador verás que los textos que hayas escrito sí estarán presentes en la web, pero a la hora de la verdad no usar las etiquetas correctamente te dará muchos dolores de cabeza y construirás webs confusas e indeseables.

Ahora copia el siguiente ejemplo en tu editor de textos y guárdalo como un archivo web. Ábrelo con tu navegador y observa el resultado.

<html>
<head>
<title>Mi primera Web</title>
</head>
<body>
<h1>Ejemplo de prueba</h1>
<h2>Primera prueba</h2>
<p>Esto es una prueba para ver como funciona el lenguaje HTML.</p>
<p>Si todo sale bien, probaré por mi mismo</p>
<h2>Segunda prueba</h2>
<p>La <strong>mejor</strong> manera de aprender HTML es <em>practicando, practicando y practicando mucho.</em></p>
</body>
</html>

Ahora vamos a conocer las etiquetas una a una comparándolas con el ejemplo anterior y su resultado del navegador.

Etiqueta <html>

Sin este elemento no hay página web. Es la más importante de todas, la principal (llamada raíz) y solo puede existir una. Indica que todo su contenido debe ser interpretado bajo las normas del lenguaje HTML. El navegador necesitará encontrar sus etiquetas de inicio y final (o apertura y cierre) para detectar toooooodo el texto del contenido y traducirlo a lo que el usuario va a ver en su navegador web.

Debes escribir tu página web entre las etiquetas <html> y </html>.

Etiqueta <head>

Aquí aparecerán casi todos los datos que no se mostrarán en la página web: los metadatos. Es importante aclarar la separación entre el "head" y el "body" para que no se confunda la información que se mostrará en la web. Por ahora solo usaremos dentro de su contenido una etiqueta, la que indica el título de la página web que se mostrará en la barra del navegador (pero no en la página web).

Etiqueta <title>

El contenido de esta etiqueta será lo que salga como título de la página web y quedará escrito SOLO en la barra superior del navegador o en el botón del navegador que quedará abajo al minimizar la ventana. Básicamente será el nombre que cojerá la ventana o pensataña del navegador que muestre en ese momento la página web. Elige un buen título para tu página, que sea breve y conciso para que el lector sepa siempre donde está. Además también ayudará a tener un mejor posicionamiento en los motores de búsqueda (SEO).

Etiqueta <body>

Con esta etiqueta indicamos qué queremos que muestre la página. Todo el contenido que pongas entre las etiquetas de apertura y cierre "body" será lo que vea el usuario a través de su navegador. Es el lugar donde debes escribir todo aquello que quieres que se vea en tu página web.

Ahora te toca a ti

Antes de aprender como funcionan las otras cuatro etiquetas observa bien la gramática del lenguaje HTML. Fíjate bien en las funciones de las etiquetas "html", "head", "title" y "body" y sobretodo examina el orden en que se escriben.

¿Que elementos van dentro del contenido de otros elementos? ¿Cómo están ordenadas las etiquetas para poder dar sentido a la página web?

Empieza una página web muy simple con solo las cuatro etiquetas que se han descrito en esta entrada y asegúrate de que siguen la misma estructura. Juega y experimenta y descubre cosas por ti mismo.

Luego podrás seguir con la segunda parte de este pequeño tutorial introductorio.

HTML: ¿Por dónde empiezo?

Por la Web hay varias listas de tutoriales y páginas web donde encontrar la lista de etiquetas de HTML, pero para poder empezar desde cero hay que saber algunas cosillas importantes de las que no se habla mucho.

Primer consejo

Ésto no me va a ocupar mucho espacio en el blog, pero por desgracia es, quizás, lo más importante que debes saber y no olvidar JAMÁS: ¡paciencia!

Como decía mi madre la paciencia es la madre de la ciencia, y si quieres llevar tus experimentos a buen puerto (como un sitio web) debes ser paciente, aprender poco a poco, sin prisa pero sin pausa.

No aprenderás HTML en dos días, de hecho te pasarás la vida aprendiendo y actualizando tu estilo personal de desarrollo web, porque vivimos en una era de cambios: la era digital.

Y sobretodo escribe, practica, prueba, experimenta y cuando creas que ya lo has probado todo date cuenta por ti mismo que solo conoces una pequeña parte de todas las posibilidades del mundo, vuelve a practicar, a reescribir tus ideas de una manera más eficiente y moderna, investiga y compara con otros desarrolladores.

Repito: paciencia y práctica son las claves para todo, incluido aprender un lenguaje nuevo como podría ser Chino mandarín o HTML.

Introducción al HTML

Qué puedo llegar a hacer con HTML

Hay algo sobre el lenguaje HTML que se da por obvio y en mi opinión debería quedar más claro. Este lenguaje fue diseñado (en sus principios) con la ambición de poder compartir información entre científicos que trabajaban en zonas distantes. Así que puedes imaginarte que los archivos que transmitían se parecían más a prospectos de medicamentos que no libros coloreables.

Y a lo que me refiero con todo es que HTML es un lenguaje para describir la estructura y el contenido, que puede ser texto, imágenes, vídeos y otros componentes, de las páginas web. Con HTML no se define la presentación visual de las páginas web.

Debe quedarte muy claro que con HTML no hay ni colorines para las letras, ni una colección de tipografías ni nada de eso. Para tratar los aspectos estéticos y visuales se utilizan otros lenguajes como el CSS (del que hablaremos más adelante).

Tipos de HTML

El lenguaje HTML ya lleva unos años "on the road" y en octubre de 2014 publicaron su quinta edición, el HTML5. Realmente es muy joven y, aunque puedes usarlo libremente, algunos navegadores no están preparados para todas sus nuevas etiquetas. Pero en muy poco tiempo HTML5 será el lenguaje más apto para todos los navegadores, así que poco a poco hay que ir aprobechando sus nuevas posibilidades.

Los lenguajes más usados hasta ahora son HTML 4 y XHTML, de los cuales podrás encontrar todo tipo de información útil por toda la Web.

Recuerda que en este blog dejo escritas las pautas para empezar desde cero y también una bibliografía con la información útil con la que yo mismo trabajo y te recomiendo. Si quieres añadir más información estaré encantado de recibir tus comentarios.

Qué se necesita para escribir HTML

Los sistemas operativos (Windows, Mac OS, Linux, etc...) vienen con las herramientas necesarias para desarrollar una página web en HTML.

En el caso de Windows puedes utilizar el carismático y humilde "Bloc de notas". Una vez hayas terminado tu trabajo, para transformarlo en una web tan solo debes guardar el archivo con la extensión .html o .htm (ambas son lo mismo), y recuerda que en algunos sistemas operativos deberás seleccionar en el desplegable "Tipo:" la opción "todos los archivos".

Si el archivo queda guardado con el mobre de "ejemplo_web.html.txt" o bien "ejemplo_web.htm.txt" la extensión que detectará siempre será la del último punto, por lo tanto el sistema operativo no lo leerá como un archivo web sino como un texto del bloc de notas.

Si lo prefieres puedes utilizar editores de texto muy útiles para utilizar el lenguaje HTML como por ejemplo el Notepad++, completamente gratuito y muy cómodo de usar. Hay muchos más, así que te recomiendo que des una hojeada por Google e investigues el que más se adecúe a tus necesidades.

Una vez guardado el archivo correctamente verás que su icono es el de tu navegador preferente. Los que tengan Mozilla como preferente abriran el archivo con Mozilla, los que tengan Chrome con Chrome, etc... Es posible que te aparezca con el icono de Internet Explorer sin que sea tu preferente y que al abrir el archivo se ejecute automaticamente tu navegador (Mozilla, Chrome...): es normal.

Cómo ver el código fuente de otras páginas web

Es recomendable para aprender, como en toda disciplina, consultar cómo lo han hecho los demás (sobretodo a los que le funciona).

En todos los navegadores hay una opción para leer el código fuente (es decir, el texto de HTML y demás lenguajes con el que el webmaster ha escrito la página web) si clicas con el botón derecho del ratón sobre la misma página web.

Normalmente recibe el nombre de "Ver código fuente" o bien "Ver código fuente de la página".

Pruébalo tu mismo en esta web y en tres webs diferentes más. Venga, hazlo ahora que esta entrada no se va a desvanecer. Verás que no entiendes ni papa, no te asustes. Es normal que no entiendas nada (o solo muy poco), porque es lo mismo que encontrarte en mitad de un país que hablan una lengua que no conoces de nada. Pero verás que poco a poco empezarás a entender qué són esos elementos e irás descubriendo que no es tan difícil como parecía al principio.

Anatomía de una etiqueta de HTML

El lenguaje HTML es un lenguaje de marcado de etiquetas, y por lo tanto lo que deberás aprender es qué etiquetas hay, cómo se utilizan y cuándo se utilizan.

Pero antes de ir al turrón vamos a aclarar la estructura de una etiqueta.

Todas las etiquetas de HTML se escriben entre los símbolos "<" y ">", de manera que siempre que escribas algo entre esos dos símbolos el navegador lo interpretará como una palabra del lenguaje HTML y no como una palabra del texto a mostrar.

Cada etiqueta tiene su versión de cerrado, que se escribe entre los símbolos "</" y ">".

</ejemplo>

Ésto sirve para indicar que la función que vaya a hacer la etiqueta a terminado. Por ejemplo, nos vamos a inventar una etiqueta (no la uses cuando escribas páginas web porque no existe) que coloree el texto de color rojo (si no sabes porque no existe esta etiqueta vuelve a leer esta entrada desde el principio). La llamaremos rojo. Su etiqueta inicial sería <rojo> y su etiqueta final sería </rojo>.

Un ejemplo de su uso sería el siguiente:

Este texto <rojo> no funcionaría </rojo> en una web.

Y el resultado (hipotéticamente) sería el siguiente:

Este texto no funcionaría en una web.

Ahora vamos a ver cómo se definen las partes de una etiqueta:

Elemento: es el componente básico de una página web, por lo tanto una web se construye con un conjunto de elementos. Vendría a ser toda la etiqueta, desde su apertura, hasta el cierre, con el texto al que afecta (contenido) incluido.
Etiqueta de inicio (o de apertura): es la primera parte del elemento e indica a partir de dónde debe empieza la orden de la etiqueta en concreto.
Etiqueta final (o de cierre): es la última parte del elemento e indica donde deja de afectar la orden de la etiqueta en concreto. Algunas etiquetas no necesitan etiqueta final.
Contenido: es la información a la que está afectando la etiqueta. Algunas etiquetas no necesitan contenido.
Atributo: define alguna característica extra que el nombre de la etiqueta en sí no define. Solo se escribe en las etiquetas de inicio y dependiendo de la etiqueta es obligatorio, opcional o innecesario. Los atributas que no usan valor se les llama booleanos.
Valor: concreta las características del atributo de la etiqueta. Los atributos booleanos no usan valor.

Todo ésto está muy bien, pero yo quiero escribir HTML

Muy bien, muy bien, el ímpetu es importante. Puedes empezar a aprender a desarrollar webs en la siguiente entrada de este blog.

Prototipado web y arquitectura de la información

Si estás leyendo esto es porque la idea de crear un sitio web te emociona. Tienes ganas de ponerte a escribir páginas y páginas de código, crear miles de enlaces y ver que pasa. Pero si el objetivo es crear algo con ambición y queremos resultados eficientes debemos hacer algunos pasos antes de empezar. En esta entrada veremos cómo planificar un sitio web.

Arquitectura de la información

Abreviada como "AI", la arquitectura de la información es un concepto que apareció el año 1975, pero que ha evolucionado desde su uso en el mundo de la web.

Las páginas web en realidad son un método de comunicación para compartir información y saber organizar esa información de manera comprensible no es del todo fácil.

Actualmente la AI se conoce como "el arte y la ciencia de estructurar y clasificar sitios web e intranets con el fin de ayudar a los usuarios a encontrar y manejar la información."

Diseñar una buena AI es la base de una buena planificación antes de empezar a desarrollar ninguna web. La responsabilidad de un arquitecto de información, definida por Jesse James Garret, es:

Identificar los objetivos del proyecto y las necesidades de los usuarios
Especificar las funcionalidades y requerimientos de la aplicación web
Definir y diseñar los sistemas de navegación, organización, etiquetado y búsqueda
Realizar el prototipado de la aplicación

Son tareas que se deben ejecutar en el orden señalado y que consisten en ir especificando desde lo más amplio y general hata llegar a definir todos los detalles de una web.

Conocer para qué es la web y cómo desearian los usuarios verla es crucial para que el resto del trabajo sea fácil y sus resultados óptimos.

Las herramientas que se usan durante estos procesos reciben muchos nombres y no hay una clasifiación universalizada. Hay muchos recursos descritos por diferentes autores, y todos no son más que ideas y pautas para desarrollar la AI y conseguir un buen prototipado web. El proceso para éllo no está definido como una única manera, sino que el arquitecto de la información debe conocer las herramientas necesarias y emplearlas de la manera que más se adecúe al objetivo final de la página web.

Esta entrada es un resumen a mi manera de todos los conceptos que he aprendido de diferentes autores con diferentes métodos.

Prototipado de un sitio web

Por prototipo entendemos una representación limitada de un producto. Permite probarlo y analizarlo antes de lanzar o crear el producto final y nos ayuda a comunicar el proceso de un producto a los clientes o los mismos diseñadores del equipo para corregir a tiempo cualquier asunto.

Es frecuente que los clientes no sepan lo que quieren, pero cuando ven algo y utilizan prototipos, pronto saben lo que no quieren.

Nunca hay que prototipar nada sin antes haber definido los objetivos del cliente, las necesidades de los usuarios y los requisitos del proyecto.

Diagramación

Consiste en la representación de los contenidos que tendrá un producto digital y las relaciones entre dichos contenidos. Debe ser clara y comprensible.

Es un método estupendo para poder diseñar la arquitectura de una web, y permite corregir y evaluar sus funciones y organización mucho antes de empezar a diseñar y desarrollar la web (donde es mucho más costoso modificar nada).

Se podrian definir tres tipos de diagramas de acuerdo a las funciones de la AI: la organización, el funcionamiento y la presentación de la web. Aunque para sitios web muy grandes y elavorados habría que hacer diagramas y maquetas de cada uno de estos tres elementos, en algunos casos se podría utilizar un mismo diagrama para explicar algunos de éllos (o todos) a la vez. Todo depende del objetivo de la web.

Planos (blueprints, diagramas de contenido o flujo, mapa web, mapa de arquitectura)

Sirven para mostrar la estructura de una aplicación y su flujo de navegación. Tienen como objetivo representar las principales áreas de organización y rotulado, y están enfocados a los aspectos estructurales y de funcionamiento del producto. Parten de lo general y abstracto a lo particular y concreto.

Normalmente se usan cajas y flechas o conectores para dibujar un diagrama.

James Garret diseñó una metodología efectiva que se llama "Un vocabulario visual para describir arquitectura de información y diseño de interacción". Existen muchos otros métodos, y te animo a que los investigues por internet.

Maquetas

Son diagramas de presentación, cuyo objetivo es crear una referencia visual de la estructura, organización e interacción a nivel de página. En ningún caso se incluye el diseño gráfico de la web, que se efectúa en una etapa posterior. No se usan colores sino escalas de grises. Es importante aclarar este concepto al cliente para no crear un malentendido durante el diseño del prototipado.

Se distinguen entre prototipos de baja fidelidad (elementos estáticos) y prototipos de alta fidelidad (elementos dinámicos).

Para hacer un buen prototipado de baja fidelidad se recomienda empezar con el sketching. Son dibujos hechos a mano, en lápiz y papel, de manera rápida y formal, para transmitir una idea o concepto con rapidez y claridad.

Son útiles como primer contacto con el cliente y para las reuniones de trabajo en equipo (como un brainstormig).

Un wireframe es más elavorado y su objetivo es mostrar el contenido de las páginas. Incluye el inventario del contenido, la anotación a los componentes de su comportamiento, funciones y estructurado de los vínculos.

Los story board son una secuencia de wireframes.

Los prototipos de alta fidelidad (también llamados prototipos funcionales, maquetas o mockup) permiten detallar el proceso interactivo de una o varias tareas. Són prototipos dinámicos, normalmente en HTML, que simulan o están implementados del sistema final. Marc Retting (1994) desaconseja el uso de prototipos de alta fidelidad porque:

Necesitan mucho tiempo para crearse.
Las pruebas tienden a centrarse en aspectos superficiales.
Los desarrolladores se resisten a cambiar algo que les ha llevado horas crear.
Crea excesiva expectación.
Un error puede parar un test.

En caso de querer hacer uso de estos prototipos es muy importante comprender que es el último paso a seguir en la planificación del desarrollo de una web y nunca debe hacerse sin antes haber diseñado y completado la arquitectura de la información.

Páginas

viernes, 21 de agosto de 2015

A.html

B.html

C.html

D.html

E.html

A

B

C

D

E

Desarrollando la web

Prototipado de la web

Proyecto

Requisitos

Mis objetivos personales

Temática

Mi página web sobre mi identidad digital

martes, 18 de agosto de 2015

Los espacios en el texto

Caracteres especiales

lunes, 17 de agosto de 2015

Los enlaces

Enlaces intradocumentales

Enlaces extradocumentales

No olvides nunca

¿Algo más?

Las listas

Listas ordenadas

Disco "list-style-type:disc":

Círculo "list-style-type:circle":

Cuadrado "list-style-type:square":

Nada (vacío) "list-style-type:none":

Listas ordenadas

Números "1":

Letras mayúsculas "A":

Letras minúsculas "a":

Números romanos "I":

Números romanos (minúsculas) "i":

Listas de descripción

Listas anidadas

Pruébalo tú

Más etiquetas básicas de HTML

Etiqueta <h1>...<h6>

Etiqueta <p>

Etiqueta <strong>

Etiqueta <em>

Venga chico, a experimentar

Las etiquetas HTML

Etiqueta <html>

Etiqueta <head>

Etiqueta <title>

Etiqueta <body>

Ahora te toca a ti

Primer consejo

Introducción al HTML

Qué puedo llegar a hacer con HTML

Tipos de HTML

Qué se necesita para escribir HTML

Cómo ver el código fuente de otras páginas web

Anatomía de una etiqueta de HTML

Todo ésto está muy bien, pero yo quiero escribir HTML

Arquitectura de la información

Prototipado de un sitio web

Diagramación

Planos (blueprints, diagramas de contenido o flujo, mapa web, mapa de arquitectura)

Maquetas