Diseñador Web
El proceso de diseño web se ha convertido en un proceso multidisciplinar que engloba la codificación de documentos, programación, diseño gráfico, etc...
Diseño
Dentro de esta categoría existen algunas especializaciones:
Experiencia de usuario, Interacción, Interfaz de usuario
A veces, se piensa en el diseño en la apariencia de la página Web, pero en realidad, el primer paso en el diseño es determinar en cómo va a funcionar la página. Estos cometidos se desarrollan por distintas disciplinas: Diseño de interacción (IxD), Interfaz de Usuario (UI), y Experiencia de Usuario (UX).
El objetivo del Diseñador de Interacción es hacer que el uso del sitio sea lo más fácil, eficiente y satisfactorio posible. Estrechamente relacionado a este campo está el diseño de la Interfaz de usuario que tiende a centrarse en la organización de la página junto con las herramientas específicas (botones, enlaces, menús, y demás) que los usuarios utilizan para navegar por el sitio.
En cuanto el diseñador de la Experiencia de Usuario (UX) tiene una visión más general -asegurándose que toda la experiencia del sitio sea favorable. El diseño UX se basa en un sólido conocimiento del usuario, (sus preferencias, necesidades, etc...) para incidir en cómo va a ser percibido y utilizado el sitio, y englobando el diseño visual, la calidad y mensaje del contenido, etc.
Los documentos que pueden elaborar un IxD, UI o UX son:
Sondeo de usuarios y un informe de pruebas
Muchos diseños de páginas web comienzan con un sondeo de usuarios, incluyendo entrevistas y observaciones, para conseguir un mejor entendimiento de cómo el sitio puede resolver problemas o cómo será usado. Generalmente, se somete a prueba por parte del usuario cada fase del proceso para asegurarse la eficacia del diseño.
Diagramas "Wireframe"
Un diagrama "Wireframe" muestra la estructura de una página web. Es una guía visual que representa el esqueleto o estructura visual de un sitio web. Su principal objetivo reside en la funcionalidad, comportamiento y jerarquía de contenidos.
Esquema del sitio
El esquema del sitio indica la estructura del sitio como un entero, y como las páginas individuales se relacionan entre sí.
Storyboards
Un storyboard traza la ruta de un sitio o aplicación desde el punto de vista del usuario. Suele incluir un guión y "escenas" que contienen pantallazos o la interacción del usuario con la pantalla.
Diseño gráfico
Un diseñador gráfico crea todo el aspecto del sitio -logos, gráficos, colores, plantillas- para asegurarse que el sitio crea una buena impresión y es consistente con la marca y el mensaje que se quiere transmitir.
Desarrollo
Una gran cantidad del proceso del diseño Web engloba la creación y localización de documentos, hojas de estilo, scripts, e imágenes que conforman el sitio. Todo este proceso es llevado a cabo por el departamento de desarrollo o producción.
Un desarrollador Web se encargan principalmente de la codificación, el uso de las hojas de estillo, programación...
Codificación
La codificación es el término utilizado para el proceso de preparar contenido que se va a subir a la Web, o más específicamente hablando, codificar el texto con etiquetas HTML que describen su contenido y su función.
Hojas de estilo
La presentación del sitio está separada de la codificación a través del uso de hojas de estilo en cascada (CSS).
Programación
A medida que la Web ha evolucionado en una plataforma de aplicaciones, la programación ha ido adquiriendo mayor importancia. JavaScript es el lenguaje que hace que los elementos de las páginas web actúen. Añade comportamientos y funcionalidades a elementos en la página e incluso a la propia ventana del navegador.
También existen otros lenguajes de programación como el PHP, Phyton y ASP.NET, que opera en el servidor y procesa datos e información antes de ser enviada al usuario.
Estrategía de contenido y creación
Se trata del contenido propiamente dicho del sitio. El creador del contenido y mantenimiento del mismo se lleva a cabo por el Estratega del Contenido y el Arquitecto de la Información.
Lenguajes Web
Para el desarrollo Web existen numerosas tecnologías y lenguajes. Los lenguajes más importantes relacionados con la Web son:
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
- JavaScript y programación DOM
- Programación del lado del servidor y tratamiento de bases de datos
HTML (Hypertext Markup Language)
El HTML (Lenguaje de marcado hipertextual) es el lenguaje utilizado para crear documentos de páginas web. Existen diferentes versiones de HTML, como la versión HTML 4.01 o la más reciente HTML5. Ambas versiones tiene una implementación más estricta llamada XHTML (eXtensible HTML), que básicamente es el mismo lenguaje pero con reglas sintácticas más estrictas.
HTML no es un lenguaje de programación, sino de codificación y por tanto es un lenguaje para identificar y describir los distintos componentes que conforman un documento como encabezados, párrafos, listas..., y también para indicar la estructura interna del documento.
CSS (Cascading Style Sheets)
Mientras que HTML describe el contenido de la página web, CSS (Hojas de Estilo en Cascada) describe cómo debe mostrarse ese contenido, su presentación.
Con la nueva versión CSS3 se pueden añadir efectos especiales y animación básica a la página. También proporciona métodos para controlar la presentación de los documentos en otros contextos diferentes al navegador, como en otros dispositivos móviles.
JavaScript y DOM
JavaScript es un lenguaje de programación que se utiliza para introducir interactividad a las páginas web, como el chequeo y validación de entradas en un formulario, modificando estilos de un elemento o de toda una página, hacer que el navegador recuerde información sobre el usuario para prósimas visitas, etc...
JavaScript es utilizado para manipular los elementos de una página web, los estilos aplicados a ella o incluso al propio navegador. Junto con JavaScript se utiliza DOM (Document Objet Model), que es una interfaz de programación de aplicaciones (API) que proporciona un conjunto estándar de objetos para representar documentos HTML y XML, un módelo est´andar sobre cómo pueden combinarse dichos objetos, y una interfaz estándar para acceder a ellos y manipularlos.
Programación del lado del servidor
Muchas páginas comerciales necesitan funcionalidades avanzadas como formularios, páginas dinámicamente generadas, carritos de compra, bases de datos, etc... Estas funciones necesitan aplicaciones web que operen en el servidor. Existen numerosos lenguajes que se utilizan para la creación de aplicaciones web, como:
- PHP
- Phyton
- Ruby
- JavaScript
- Java
- ASP .NET
Programas
Para los distintos lenguajes que se requieren para crear una página web, son necesarios distintos programas o softwares.
Codificación páginas Web
Existen programas que proporcionan herramientas visuales denominados "WYSIWYG" (What You See Is What You Get), que ahorra escribir repetitivo HTML y CSS. Aunque pueden acelerar el proceso de escritura de código HTML, muchas veces requieren una supervisión para dejar el código más limpio.
Adobe Dreamweaver
Sin duda es el estándar de la industria por su código relativamente limpio y sus avanzadas herramientas.
Microsoft Expression Web
Nvu
Nvu ("New-view"), es una herramienta de código abierto que posee muchas de las características de Dreamweaver. Se puede descargar de forma gratuita en nvu.com.
Editores de HTML
Los editores de HTML, en oposición a las herramientas WYSIWYG están diseñados para acelerar el proceso de escribir HTML a mano. No permiten editar la página visualmente, así que se necesita comprobarlo con un navegador. Para realizar escritura HTML a mano, se aconseja el uso de:
TextPad (solo en Windows)
Se trata de un sencillo y económico editor de código en texto plano para Windows.
Sublime Text
Este editor de texto tiene multitud de funcionalidades, con códigos en distintos colores y visiones generales de todo el código.
TextMate (solo en Macintosh)
Este editor de texto avanzado posee herramientas de gestión de proyecto y una interfaz que está integrado con el sistema operativo de Mac. Está creciendo en popularidad porque es personalizable y económico.
Programas de edición de imágen
Si se quiere añadir imágenes a tus páginas, necesitarás un programa de edición de imagen. Los programas de creación de gráficos web más populares son:
Adobe Photosop
Indudablemente el más utilizado para la creación de imagen, tanto para impresión como para la Web
Adobe Illustrator
Debido a la necesidad de los diseñadores de crear logos, iconos e ilustraciones de distintos tamaños y resoluciones, muchos comienzan con una imagen vectorial en Illustrator para una mayor flexibilidad. Se pueden exportar gráficos directamente desde Illustrator, o llevarlos a Photoshop para algún retoque adicional.
Adobe Fireworks
Este programa de gráficos web combina un editor de imágenes con herramientas para crear ilustraciones vectoriales.
GIMP, "GNU Image Manipulation Program"
Este programa de edición de imágenes es parecido a Photoshop, pero gratuito.
Herramientas de Internet
Debido a que se está trabajando con Internet, es necesario tener algunas herramientas para específicamente ver y subir archivos a la red:
Diversos navegadores
Como los navegadores renederizan las páginas diferentamente, es bueno tener una gran cantidad de navegadores para comprobarlo, tanto en ordenadores de mesa como en dispositivos móviles. Los navegadores más utilizados son: "Internet Explorer", "Chrome", "Firefox", "Safari", "Opera"... Tampoco hay que ignorar los navegadores para móviles como el "Mobile Safari", "Android Browser", "Blackberry Browser", "Nokia Series 40", "Opera Mobile", "Internet Explorer Mobile", "Silk"...
Programa de transmisión de archivos (FTP)
Un programa FTP permite subir y bajar archivos entre tu ordenador y el servidor de tus páginas. Los programas de codificación Web tienen su propio programa FTP incorporado, aunque existen algunos programas dedicados. Los más populares son: "WS_FTP", "CuteFTP", "AceFTP", "Filezilla", "Transmit", "Fetch"...