Diseño Web

Diseño Web

Sitio WEB

Un sitio web o ciberespacio es una colección de páginas de Internet relacionadas y comunes a un dominio de Internet o subdominante en la World Wide Web en Internet Una página web es un documento HTML/XHTML que es accesible generalmente mediante el protocolo HTTP de Internet.

Todos los sitios web públicamente accesibles constituyen una gigantesca World Wide Web de información (un gigantesco entramado de recursos de alcance mundial).

A las páginas de un sitio web se accede frecuentemente a través de un URL raíz común llamado portada, que normalmente reside en el mismo servidor físico. Los URL organizan las páginas en una jerarquía, aunque los hiperenlaces entre ellas controlan más particularmente cómo el lector percibe la estructura general y cómo el tráfico web fluye entre las diferentes partes de los sitios.

Pagina WEB

Una página web, página electrónica o ciberpágina,1 2 es un documento o información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces, imágenes, y muchas otras cosas, adaptada para la llamada World Wide Web (WWW) y que puede ser accedida mediante un navegador. Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar navegación (acceso) a otras páginas web mediante enlaces de hipertexto. Las páginas web frecuentemente también incluyen otros recursos como ser hojas de estilo en cascada, guiones (scripts), imágenes digitales, entre otros.

Las páginas web pueden estar almacenadas en un equipo local o en un servidor web remoto. El servidor web puede restringir el acceso únicamente a redes privadas, por ejemplo, en una intranet corporativa, o puede publicar las páginas en la World Wide Web. El acceso a las páginas web es realizado mediante una transferencia desde servidores, utilizando el protocolo de transferencia de hipertexto (HTTP)

HTML

HTML, siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, entre otros. Es un estándar a cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web. Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.1

HIPERVINCULO

El hipervínculo es en la computación aquella referencia o elemento de navegación que permite pasar de un documento electrónico a otro o a diferentes partes del mismo documento. El hipervínculo es conocido como una de las partes más importantes y esenciales de la red de Internet. Sin embargo, son muchos los medios y los soportes electrónicos que pueden utilizarlo por fuera de ella.

Las dosibilidades del hipervínculo son el acceso a la información como agente de navegación, la exposición del material como una referencia y la posibilidad de guardar la información o el documento en la computadora local. Claramente, para poder funcionar, un hipervínculo requiere dos extremos. Aquel extremo de donde se parte se llama ancla origen, mientras que el extremo al cual se puede llegar a través del hipervínculo se denomina ancla destino.

EDITOR WEB

Desde CoffeeCup HTML Editor, el primer editor HTML del mercado allá por 1994, mucho ha crecido la web, y con ella los editores web. 

En aquella época las webs eran muy sencillas, construidas básicamente con HTML, y se podían crear usando cualquier editor de texto, como el Bloc de Notas, o el Vi.

Eran tiempos de frames, imágenes animadas horribles, y sin ningún tipo de diseño.Hoy día no sólo se usa HTML para crear una web, que incluso se usa una variante de éste, XHTML . Ahora tienen la misma importancia (X)HTML, CSS, Javascript/ECMAScript, o lenguajes de servidor como PHP, Java o .NET/ASP. Aún es posible crear una web con Bloc de Notas o vi, pero, a riesgo de ser un poco menos geek, los principales editores web del mercado nos harán la vida mucho más fácil.

Como en cualquier aspecto de la informática, no existe una única aplicación que sirva para todo, y el amplio mundo del desarrollo web no es una excepción. Cada cual utilizará la aplicación que mejor se adapte a sus necesidades. Hay que tener en cuenta si se necesita control de versiones (CVS, Subversion), cliente FTP o WebDAV, documentación en línea, lenguajes soportados, autocompletado de código, WYSIWYG (What You See Is What You Get), depuración de código, etc.Pero una herramienta común para todos los desarrolladores web, es sin duda alguna Firefox.

Servidor o Hosting

Un servidor es una aplicación en ejecución (software) capaz de atender las peticiones de un cliente y devolverle una respuesta en concordancia. Los servidores se pueden ejecutar en cualquier tipo de computadora, incluso en computadoras dedicadas a las cuales se les conoce individualmente como "el servidor". En la mayoría de los casos una misma computadora puede proveer múltiples servicios y tener varios servidores en funcionamiento. La ventaja de montar un servidor en computadoras dedicadas es la seguridad. Por esta razón la mayoría de los servidores son procesos daemon diseñados de forma que puedan funcionar en computadoras de propósito específico.

FTP

FTP (siglas en inglés de File Transfer Protocol, 'Protocolo de Transferencia de Archivos') en informática, es un protocolo de red para la transferencia de archivos entre sistemas conectados a una red TCP (Transmission Control Protocol), basado en la arquitectura cliente-servidor. Desde un equipo cliente se puede conectar a un servidor para descargar archivos desde él o para enviarle archivos, independientemente del sistema operativo utilizado en cada equipo.

El servicio FTP es ofrecido por la capa de aplicación del modelo de capas de red TCP/IP al usuario, utilizando normalmente el puerto de red 20 y el 21. Un problema básico de FTP es que está pensado para ofrecer la máxima velocidad en la conexión, pero no la máxima seguridad, ya que todo el intercambio de información, desde el login y password del usuario en el servidor hasta la transferencia de cualquier archivo, se realiza en texto plano sin ningún tipo de cifrado, con lo que un posible atacante puede capturar este tráfico, acceder al servidor y/o apropiarse de los archivos transferidos.

Para solucionar este problema son de gran utilidad aplicaciones como SCP y SFTP, incluidas en el paquete SSH, que permiten transferir archivos pero cifrando todo el tráfico.

ISP

Un proveedor de acceso a Internet (ISP) es una compañía que ofrece acceso a Internet, normalmente por una cuota. Normalmente, la conexión con el ISP tiene lugar a través de una conexión de acceso telefónico (línea telefónica) o una conexión de banda ancha (cable o ADSL). Muchos ISP ofrecen servicios adicionales, como cuentas de correo electrónico, exploradores web y espacio para crear un sitio web propio.

URL

Un localizador de recursos uniforme (conocido por la sigla URL, del inglés Uniform Resource Locator) es un identificador de recursos uniforme (Uniform Resource Identifier, URI) cuyos recursos referidos pueden cambiar, esto es, la dirección puede apuntar a recursos variables en el tiempo.1 Están formados por una secuencia de caracteres, de acuerdo a un formato modélico y estándar, que designa recursos en una red, como Internet.

Los URL fueron una innovación en la historia de la Internet. Fueron usadas por primera vez por Tim Berners-Lee en 1991, para permitir a los autores de documentos establecer hiperenlaces en la World Wide Web (WWW). Desde 1994, en los estándares de Internet, el concepto de "URL" ha sido incorporado dentro del más general de URI, pero el término URL todavía se utiliza ampliamente.

Aunque nunca fueron mencionadas como tal en ningún estándar, mucha gente cree que las iniciales URL significan universal -en lugar de 'uniform'- resource locator (localizador universal de recursos). Esta se debe a que en 1990 era así, pero al unirse las normas "Functional Recommendations for Internet Resource Locators" (RFC 1736) y "Functional Requirements for Uniform Resource Names" (RFC 1737) pasó a denominarse "Identificador Uniforme de Recursos" (RFC 2396). Sin embargo, la letra "U" en URL siempre ha significado "uniforme".

WEBMáster

Un webmaster (contracción de las palabras inglesas web y máster) es también conocido con las denominaciones de arquitecto web, desarrollador web, autor de sitio digital, administrador de sitio digital, y coordinador de sitio digital, es la persona responsable de mantenimiento y/o programación de un sitio web. La definición específica de este cargo puede variar según el ámbito en el que se presente a la persona: en ciertos casos es el responsable de los contenidos del sitio,1 mientras que en otros es el encargado de la operatividad, programación y mantenimiento de la disponibilidad de un sitio web sin que necesariamente intervenga en la creación de contenidos.2

De acuerdo a la definición del Diccionario de Oxford, el webmaster es la persona responsable por un servidor de Internet,3 sin embargo en la jerga informática se puede indicar que el webmaster es el dueño del sitio web o el encargado de mantener el sitio web habilitado.

Estructura de una pagina  web

<html>
<head>
</head>
<body>
</body>
</html>

Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo que esté en medio será la página web. Dentro de <html></html> se encuentran 2 partes diferenciadas.

La primera <head></head> es la cabecera de la página. Aquí irán cierta información que no es directamente el contenido de la página. Aquí se pone el título de la página, los metadatos, estilos, código javascript (todo esto se estudiará en capítulos venideros). La primera que se suele estudiar es <title></title>, que indica el título de la página (lo que el navegador pone en la parte superior izquierda).

La segunda parte es <body></body>. Aquí va propiamente el contenido de la página: fotos, párrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de la página anterior, el siguiente código

<html><head><title>Esto es el t&iacute;tulo de la p&aacute;gina.</title></head><body>Hola mundo!<br><b>Esto es negrita.</b><br><i>Y esto it&aacute;lica.</i><br></body></html>

generará el siguiente resultado (abre la página en otra ventana, dale al botón derecho => ver código fuente, y verás así el código HTML de la página):

Ver ejemplo en una página aparte.

Observad el título en la parte superior izquierda de la página. Además, dentro de <body></body> distinguimos varias etiquetas:

<br> => Indica salto de línea. En HTML un salto de línea normal (púlsando la tecla Enter) no produce un salto de línea en el resultado. Es necesario escribir <br> (u otra etiqueta similar).

<b></b> => Indica comienzo y fin de negrita.

<i></b> => Itálica.

También observamos el código &iaacute; => Esto indica que queremos poner una "i" con acento, es decir, "í". Esto se explicará en un capítulo posterior.

Es importante mencionar que las etiquetas se pueden escribir indistintamente en mayúsculas o minúsculas, es decir <b>Esto es negrita.</b> y <B>Esto es negrita.</B> produce el mismo resultado. Por otro lado, toda etiqueta que se abre (es decir, se pone la etiqueta sin la barra /) debe cerrarse (es decir, poner su equivalente con el símbolo /), si no, el navegador podría dar resultados inesperados. Excepciones a esto son algunas etiquetas que no lo necesitan, como <br> o <hr>.

CSS

Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML o XML2 (y por extensión en XHTML). El World Wide Web Consortium (W3C) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

La información de estilo puede ser definida en un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales con el elemento «style» o en cada etiqueta particular mediante el atributo «style».

Contenido WEB

Los sitios web están creados para brindar información a sus visitantes. El contenido es el rey, dicen ellos. Todo lo demás (diseño, sistema) es solo el empaque. El contenido es por lo que normalmente los visitantes andan buscando. Por eso la clave para crear un buen sitio web es dar un contenido consciso e interesante — texto, imágenes, audio o vídeo.

Proceso de Desarrollo de un Sitio Web

El proceso del diseño web no siempre debe seguir unos pasos específicos y rígidos, ya que cada proyecto tiene sus particularidades y habrá que adaptarse a ellas como corresponda.

A pesar de ello, y para facilitar las cosas en esta tarea, sí que podemos decir que existen algunos pasos ya definidos que en general te pueden ser de utilidad si los sigues en la construcción de cualquier sitio web. Vamos a verlos en detalle:

Planeación

Para comenzar debes determinar a qué público se dirige el sitio web. Esto es esencial, porque mucho diseños y contenidos dependen de esto. Estás son algunas preguntas que nos podemos hacer antes de comenzar: ¿Está dirigido a niños o adultos? ¿Accede su público la red desde el trabajo, desde la escuela o desde la casa? ¿Qué tan rápida es su conexión a la Internet? ¿Quieren ellos estar informados o entretenerse? Asegúrate de responder estas preguntas desde el inicio.

Arquitectura del sitio web

El sitio web debe estar bien organizado, tanto para el beneficio de los visitantes como para el fácil mantenimiento. Planifica el sitio web en un tablero o de forma esquemática, tipo diaframa de flujo. En este paso es donde vas a realizar el mapa del sitio y la agenda de desarrollo.

No olvides que debes planear el sitio web de manera que realizar algún cambio sea sencillo ya que la mayoría de los sitios Web cambian continuamente y un sitio web bien planeado simplifica este proceso.

Diseño Gráfico

En este paso con la información ya recaudada en los pasos anteriores vas a diseñar el aspecto del sitio web, es importante no confundir el diseño gráfico para sitios web que el que se utiliza para impresos y otras áreas porque las limitaciones técnicas (y la oportunidades) de las páginas web son extrañas para la mayoría de los diseñadores entrenados en otros medios. Los requisitos de tamaño de archivo, limitaciones de color y resoluciones de pantalla son muy diferentes a aquéllos que se imprimen.

Programación del sitio web

En este paso el proyecto ya ha sido bien definido y el proceso de diseño gráfico ya está. Ahora se programa la aplicación y la base de datos para juntarlo con el diseño de la interfase previamente definida.

Control de calidad

Todo profesional de diseño web debe tener este paso en su proceso, es muy importante probar exahustivamente la aplicación diseñada para estar seguros que no contiene errores. Siempre es mejor deterctar los errores del sitio web antes de que los detecte tu cliente.

Hosting y mantenimiento

                                                       

Este paso muchas veces depende del tipo de proyecto, pero para un proyecto completo debes elegir un buen proveedor de hosting que incluya lo último en velocidad y estabilidad, por ejemplo: Unix/FreeBSD, PHP, Apache, y MySQL.

Todo sitio Web necesita un mantenimiento constante. No cometas el error de asumir que una vez está en línea, todo ya está hecho. Si quieres que las personas regresen a tu sitio, deberás añadir material nuevo a su sitio web, correo electrónico que responder, enlaces que actualizar y quizá estadísticas de uso que seguir. Para un sitio pequeño, esto puede tomarle un tiempo tan breve como dos o tres horas al mes.

El mantenimiento en un sitio grande puede ser un trabajo de tiempo completo, por eso debes tener en cuenta el costo de un mantenimiento constante dentro de tu presupuesto. Trabajar con las mismas personas asegura la consistencia; una nueva compañía o persona no tendrá el mismo conocimiento de trabajo de tu sitio web.

Planificación de un sitio web

Antes de construir un sitio web, tómese el tiempo necesario para analizar, planificar y diseñar todo el sistema que da soporte al sitio web. No sólo debe planificar el sitio web, sino el sistema de contenido web que gestiona el sitio web y la infraestructura necesaria para del sistema. También tiene que definir de antemano los roles y los usuarios implicados en la creación de sitios web e instalación de la infraestructura.

Definición del proyecto

Es importante entender los objetivos, los productos a entregar y el ámbito de un sistema de contenido web. La definición del proyecto esquematiza el qué, el por qué y el quién del proyecto y se utiliza a través de la vida de su sistema de contenido web.

Planificación de recursos humanos

Estos roles son ejemplos del tipo de trabajo realizado por las personas que crean y gestionan un sitio web. Una sola persona puede ser responsable de más de uno de los roles descritos en esta sección. Los roles que implementa en su organización para dar soporte a su sitio web se determinan según el tamaño y complejidad del sistema que se está desplegando. No todos los roles siguientes son necesarios para cada sitio web, pero todos los aspectos de estos roles se deben tener en cuenta durante cualquier despliegue del sistema.

Creación de un documento de análisis

Un documento de análisis sirve para registrar la información recopilada de los participantes afectados y que determina el diseño del sitio web, su contenido y sus características.

Diseño de un prototipo de sitio web mediante HTML

Antes de crear un documento de diseño para su sistema de contenido web, puede ser útil crear un prototipo de su sitio mediante HTML. Este prototipo se debería basar en un esquema definido en su plan del proyecto y en los datos recogidos en su documento de análisis. La estructura del sitio, el diseño y el código HTML que desarrolle para el prototipo se puede utilizar como base para muchos elementos definidos en su documento de diseño.

Creación de un documento de diseño

Después de definir el proyecto y crear un documento de análisis, se definen los requisitos de su sistema de contenido web en un documento de diseño. El documento de diseño esquematiza los tipos de contenidos que se necesitarán para el sitio, la forma en que estarán estructurados, la forma en que se creará el contenido y el aspecto que tendrá el sitio web final.

Hoja de ruta para la creación de un sistema de contenido web

Para construir un sistema de contenido web necesita desplegar hardware, configurar servidores, diseñar un sistema de creación, configurar un entorno de entregas y habilitar la sindicación. Obtenga una visión general de los pasos necesarios para construir un sistema de contenido web. Tenga en cuenta los documentos de diseño y de análisis desarrollados durante la fase de planificación de un proyecto a medida que se desarrollaba la hoja de ruta.

Arquitectura de la Información

La arquitectura de la Información (AI) es la disciplina y arte encargada del estudio, análisis, organización, disposición y estructuración de la información en espacios de información, y de la selección y presentación de los datos en los sistemas de información interactivos y no interactivos.

En relación con la World Wide Web, el Information Architecture Institute define la Arquitectura de la Información como:

1. El diseño estructural en entornos de información compartida.

2. El arte y la ciencia de organizar y rotular sitios web, intranets, comunidades en línea y software para promover la usabilidad y la ubicabilidad (la característica de ser encontrado a través de las búsquedas en Internet).

3. Una comunidad emergente orientada a aplicar al entorno digital los principios del diseño y la arquitectura.

La Arquitectura de la Información trata indistintamente del diseño de: sitios web, interfaces de dispositivos móviles o gadgets (como los lectores de mp3), CD interactivos, videoclips digitales, relojes, tableros de instrumentos de aviones de combate o civiles, interfaces de máquinas dispensadoras, interfaces de juegos electrónicos, etc. (Laverde, A. 2005)

Su principal objetivo es facilitar al máximo los procesos de comprensión y asimilación de la información, así como las tareas que ejecutan los usuarios en un espacio de información definido.

Diseño

El diseño se define como el proceso previo de configuración mental, "pre-figuración", en la búsqueda de una solución en cualquier campo. Utilizado habitualmente en el contexto de la industria, ingeniería, arquitectura, comunicación y otras disciplinas creativas.

Etimológicamente deriva del término italiano disegno dibujo, designio, signare, signado "lo por venir", el porvenir visión representada gráficamente del futuro, lo hecho es la obra, lo por hacer es el proyecto, el acto de diseñar como prefiguración es el proceso previo en la búsqueda de una solución o conjunto de las mismas. Plasmar el pensamiento de la solución o las alternativas mediante esbozos, dibujos, bocetos o esquemas trazados en cualquiera de los soportes, durante o posteriores a un proceso de observación de alternativas o investigación. El acto intuitivo de diseñar podría llamarse creatividad como acto de creación o innovación si el objeto no existe o se modifica algo existente.

Desarrollo

La palabra desarrollo presenta acepciones diversas. En primer lugar, se puede entender como el proceso de evolución, cambio y crecimiento relacionado con un objeto, una persona o una situación determinada. Por otra parte, el término desarrollo se puede aplicar a situaciones que afectan a un conjunto de aspectos, por ejemplo el des

arrollo humano de una nación. A pesar de los distintos sentidos, el concepto que analizamos tiene normalmente un sentido positivo en sus diferentes usos.

Lanzamiento

Un lanzamiento puede ser la presentación de un nuevo producto en un mercado. Los lanzamientos suelen estar acompañados por campañas de marketing y publicidades para que los consumidores se enteren de la novedad. Por ejemplo: “Adidas anunció el lanzamiento de una nueva línea de zapatillas para el mes de mayo”, “El lanzamiento de la nueva bebida cola ha sido un fracaso”, “Con la presencia de varias figuras del ambiente artístico, la compañía alemana realizó el acto de lanzamiento de su vehículo de cuatro puertas”.

Corrección

La Revisión del Contenido de su Sitio Web es una tarea que puede hacerse rápidamente y que le dará mucha tranquilidad sobre lo que usted está comunicando a través de Internet. Si ya dispone de un sitio web con contenidos, pero piensa que es posible que los textos tengan errores gramaticales u ortográficos, e incluso errores de tipeo, entonces necesita de un servicio de revisión de contenido. 

Prueba

Las actividades de esta etapa consisten en hacer revisiones precisas de la forma en que se despliegan las páginas del sitio y ver si cumplen con los Términos de Referencia en estos temas y, además, si cumplen con los estándares mínimos definidos y la normativa vigente. (ver mas sobre Normativas y Estándares Web).

Las acciones de prueba sugeridas para realizar en esta etapa son las siguientes:

Verificación de Contenidos:

es una prueba básica para revisar si el Sitio Web desarrollado incluye todos los contenidos que se han especificado en los Términos de Referencia o los que se hayan definido en el marco del plan de desarrollo. Se puede hacer en forma manual o automática, de acuerdo a las siguientes orientaciones:

Sistema Manual:

se refiere a hacer una revisión manual de los contenidos del Sitio Web a través de la navegación de sus páginas. Para ello se recomienda primero construir un índice de contenidos y luego verificar la existencia de cada uno de los ítemes que contiene, a través de hacer un recorrido exhaustivo del sitio. Los elementos que deben probarse obligatoriamente son:

• Verificación de ortografía y redacción.
• Verificación de enlaces principales.
• Verificación de imágenes en páginas.
• Verificación de existencia de archivos adjuntos.
• Verificación de Lista de Chequeo de Accesibilidad.