OBJETIVOS
- CONOCER LAS PRINCIPALES FASES EN EL DESARROLLO DE UN SITIO O APLICACIÓN WEB.
- CONOCER LA ESTRUCTURA BÁSICA DE UNA PAGINA WEB.
- APRENDER A CREAR PAGINAS WEB SENCILLAS CON ENCABEZADOS, PÁRRAFOS Y LISTAS.
- APRENDER A CREAR ENLACES ENTRE LAS DISTINTAS PAGINAS QUE FORMAN UN SITIO WEB.
- CONOCER ALGUNOS EDITORES DE CÓDIGO HTML.
ADEMAS DE ESTO NUESTRO CONSEJO ES EL SIGUIENTE: PRACTICA, PRACTICA Y MAS PRACTICA.
Las paginas web son documentos electrónicos escritos con un lenguaje de marcado o etiquetado llamado HTML, el cual es un lenguaje y como todo lenguaje necesita tiempo, esfuerzo y practica para aprenderlo; HTML tiene su vocabulario y su gramática, el vocabulario son las etiquetas que se pueden emplear y la gramática son las reglas que establecen como debemos emplear las etiquetas para escribir un documento.
EL DESARROLLO WEB
No debemos confundir desarrollo web con diseño web, son actividades muy distintas y en un proyecto web estas dos actividades deben ser desarrolladas por personas distintas, sin embargo en pequeños proyectos el diseño y el desarrollo web lo realice la misma persona.
DIFERENCIAS
DISEÑO WEB
Se refiere al diseño visual de una pagina web (look and feel) con frecuencia implica el diseño de los elementos gráficos de la pagina; se deben tener en cuenta elementos gráficos como la tipografía, los colores, los tamaños y las proporciones, el diseño suele realizarse con herramientas gráficas como adobe photoshop o GIMP, el producto final del diseño web no suele contener código simplemente puede ser una imagen la provee el diseñador y persona encargada del diseño de un sitio web.
DESARROLLO WEB
Se refiere a la programación necesario para construir una aplicación o sitio web, se divide en dos partes que pueden estar conectadas la parte cliente y la parte servidor las cuales funcionan de forma independiente y emplean tecnologías distintas, aunque muchas veces también interactuan por lo que se les suele llamar programación cliente-servidor.
Para el desarrollo de la parte cliente se necesita tener conocimiento de HTML Y CSS (para la creación de la pagina web) y por otro lado JavaScript y DOM (Para la programación de la parte cliente).
El desarrollo de la parte servidor se refiere a la programación necesario para construir el back and (parte de sitio web que los visitantes del mismo no pueden ver) de un sitio web, el cual es necesario para poder presentar la información correcta en el formato correcto a los visitantes, para este desarrollo se emplean lenguajes de Scrip (PHP, ASP, ASP.NET, JSP, Perl y Coldfusion) para poder acceder a una base de datos y recuperar la información necesaria de una pagina web, también debemos tener en cuenta una buena seguridad del producto final, la persona dedicada a desarrollar paginas web se le llama desarrollador.
En el siguiente vídeo profundizaremos acerca de todo lo anterior.
LAS PRINCIPALES FASES PARA EL DESARROLLO DE UN SITIO WEB SON LAS SIGUIENTES:
- CONTACTO INICIAL
- PLANIFICACIÓN
- CONTENIDO
- DISEÑO
- DESARROLLO Y LANZAMIENTO
VÍDEO 1 STEVE BALLMER
VÍDEO 2 STEVE BALLMER
PROTOTIPADO: WIREFRAMES, MOCKUPS Y PROTOTIPOS
En el anterior vídeo de Ides Web nos mostraban las principales fases en el desarrollo de un sitio web; en la segunda fase "Planificación" aparecían los hitos "Wireframes" y "Revisión de Wireframes"
WIREFRAMES: También conocido como esquema de pagina o plano de pantalla, es una guía visual que representa el esqueleto o estructura visual de un sitio web (un conjunto de paginas web) o de una pagina web concreta. El wireframe suele carecer de aspectos visuales como estilo tipográfico, colores e imágenes, ya que su propósito es servir de apoyo para discutir el contenido, funcionalidad y comportamiento de una pagina web o un sitio web.
PROTOTIPADO.
La importancia de Prototipar una aplicación web antes de comenzar a implementarla es muy importante, así como la utilización correcta de los recursos apropiados que nos ayuden a implementar con éxito nuestro proyecto.
Las responsabilidades de un arquitecto de información son las siguientes:
- Identificar los objetivos del proyecto
- Identificar las necesidades de los usuarios
- Especifica las funciones y requerimientos de la aplicación Web
- Define y diseña los sistemas de navegación, organización, etiquetado y búsqueda
- realizar el prototipado de la aplicación
De la misma manera que un arquitecto realiza la maqueta de un edificio antes de construirse, los arquitectos de la información se valen de la diagramacion y el prototipado para especificar cual sera la organización, estructura, navegación y funcionamiento de la aplicación Web, al igual que un arquitecto común, los arquitectos de la información realizan planos y maquetas del sitio antes de que este comience a construirse; los Planos son diagramas de organización y funcionamiento, se suelen llamar blueprint, diagramas de contenido, flujo o mapa web, esta terminología sera constante durante el desarrollo del curso para referirnos en conclusión a los planos, lo anterior debido a que diferentes autores le dan estos diferentes nombres.
A la hora de realizar la diagramacion de una aplicación Web es muy importante que sea comprensible y refleje con claridad la estructura, el flujo de navegación y la relación entre los elementos, es muy importante y recomendable incluir una leyenda con los símbolos utilizados, existen diferentes propuestas para la realización de diagramacion en paginas web un vocabulario muy recomendado es el "Vocabulario visual para describir arquitectura de información y diseño de interacción" de James Garrett, destacado arquitecto de información, también es recomendable el articulo "La diagramacion en la arquitectura de Información" de Ronda León, donde se recopilan diferentes propuestas de arquitectura de información.
A la hora de realizar la diagramacion de una aplicación Web es muy importante que sea comprensible y refleje con claridad la estructura, el flujo de navegación y la relación entre los elementos, es muy importante y recomendable incluir una leyenda con los símbolos utilizados, existen diferentes propuestas para la realización de diagramacion en paginas web un vocabulario muy recomendado es el "Vocabulario visual para describir arquitectura de información y diseño de interacción" de James Garrett, destacado arquitecto de información, también es recomendable el articulo "La diagramacion en la arquitectura de Información" de Ronda León, donde se recopilan diferentes propuestas de arquitectura de información.
MAQUETAS
Son diagramas de presentación, cuyo objetivo es crear una referencia visual de la estructura, organización, a nivel de pagina; hay diferentes tipos y debemos distinguir entre prototipos de baja fidelidad y prototipos de alta fidelidad, en ningún caso se debe incluir diseño gráfico en ningún prototipo, lo cual es importante aclararle al cliente (El diseño es de etapas posteriores) al momento de presentar el prototipo, no se utilizan colores por ello se usa la gama de grises; los prototipos de baja fidelidad o Sketching son dibujos estáticos, es decir bocetos de forma rápida e informal, con lápiz y papel, para transmitir una idea o concepto con rapidez y claridad, esta es una técnica muy útil en entrevistas iniciales con el cliente para comunicar conceptos, proponer alternativas a un problema, durante una tormenta de ideas (brainstorming) o en reuniones internas con el equipo de trabajo, es importante siempre antes de iniciar un prototipo mas elaborado iniciar con este tipo de bocetos.
WIREFRAMES
Es mas elaborado e incluye el inventario del contenido, es decir lo que debe estar presente en cada pagina cabeceras, enlaces, listas, formularios, el etiquetado de los vínculos o de los títulos, el loyuot es decir, la ubicación, colocación y agrupación de los elementos de la pagina, así como la estrategia de navegación y la priorizacion de contenidos, así mismo wireframe debe incluir el comportamiento mediante notas asociadas a los elementos para indicar como deben mostrarse o para definir su comportamiento funcional. Cuando tenemos una secuencia de wireframes hablamos de un storyboard.
