REPÚBLICA BOLIVARIANA DE VENEZUELA

UNIVERSIDAD RAFAEL BELLOSO CHACÍN

FACULTAD DE INGENIERIA

ESCUELA DE INFORMATICA

CÁTEDRA: PROGRAMACIÓN WEB

SITIOS WEB

Realizado Por:

Br., José A. Castillo

Maracaibo, Junio de 2015

ÍNDICE

INTRODUCCIÓN

DESARROLLO

WWW (WORLD WIDE WEB)

HTML (“HYPERTEXT MARKUP LANGUAGE”)

ASPECTOS BÁSICOS EN LA CREACIÓN DE UN SITIO WEB

METODOLOGÍA A SEGUIR PARA EL DESARROLLO DE UNA

PÁGINA WEB

USABILIDAD Y ACCESIBILIDAD

POSICIONAMIENTO WEB

CONCLUSIONES

BIBLIOGRAFÍA

INTRODUCCIÓN

Pocos pueden discutir que Internet y la World-Wide Web están cambiando

nuestras vidas. Cada día es más común que tareas tales como la lectura del

periódico, la compra de libros o discos, operaciones bancarias, reserva de

hoteles, compra de billetes de avión o tren, entre otras muchas, las

realicemos conectados con nuestro ordenador a Internet. Es así que, durante

la última década hemos asistido al crecimiento vertiginoso del desarrollo y

uso de aplicaciones y sistemas Web cada vez más complejos y sofisticados.

Las páginas Web se han convertido, con el tiempo, en excelentes

herramientas de venta y proyección de cualquier tipo de negocio. Gracias a

la constante evolución tecnológica, hoy podemos presentar un diseño Web

atractivo con fotografías, animaciones y videos, incluso música. Este tipo de

elementos han enriquecido el concepto de “diseño Web” elevando su

potencial a niveles interesantes. Un diseño Web ahora se puede valer de

todas estas herramientas visuales que, utilizadas de manera funcional, hacen

que su página sea considerada y valorada por quienes la visitan.

La manera en que creativamente se conjuguen todos los elementos de

identidad corporativa, el arte, los colores, la forma en que se presente por

primera vez ante los ojos de todos, de esto dependerá en gran medida si sus

clientes deciden quedarse un poco más a navegar entre las diversas páginas

de su sitio, para evaluar y valorar el contenido de todo lo que su negocio

puede ofrecer.

En este trabajo se habla sobre el desarrollo de sitios web y las pautas a

seguir para la creación de este, aspectos a tomar en cuenta a la hora de

diseñar el sitio, lenguajes utilizados para escribir una página web (HTML,

CSS). También se tocan algunos puntos que no son visibles para el usuario

pero son vitales a la hora de desarrollar un sitio web: como la usabilidad, la

accesibilidad y el posicionamiento, siendo este último lo que marca la

diferencia entre un sitio con muchas visitas diarias y un sitio completamente

desconocido.

DESARROLLO

WWW (WORLD WIDE WEB)

Primero, antes de hablar de sitios en internet, desarrollo y diseño web,

debemos hablar solo que es el internet y la WWW. La World Wide Web

(WWW) o Red Informática Mundial nació a principios de los años 90 en

Suiza. Su función es ordenar y distribuir la información que existe en internet.

Se basa en hipertextos, es decir, páginas en las que se pueden insertar

hipervínculos. Estos conducen al usuario de una página web a otra o a otro

punto de esa web.

Existen sistemas de escritura para las páginas llamados "Lenguaje de

marcado". El más utilizado es el HTML o "Hyper Text Markup Lenguaje"

(Lenguaje de marcas de hipertexto). Con esta escritura se dan las órdenes

para que la información se presente de uno u otro modo en las páginas web.

Las marcas ("tags" o etiquetas) permiten dar formato al texto y combinarlo

con otros elementos multimedia. Dos de los estándares más importantes que

comprende la WWW son el protocolo HTTP y lenguaje HTML, también están

los estándares URI (Identificador de Recurso Uniforme) y el Lenguaje de

Marcado Extensible (XML), los cuales se explican a continuación:

El Identificador de Recurso Uniforme (URI), que es un sistema

universal para referenciar recursos en la Web, como páginas web,

El Protocolo de Transferencia de Hipertexto (HTTP), que especifica

cómo se comunican el navegador y el servidor entre ellos,

El Lenguaje de Marcado de Hipertexto (HTML), usado para definir la

estructura y contenido de documentos de hipertexto,

El Lenguaje de Marcado Extensible (XML), usado para describir la

estructura de los documentos de texto.

HTML (“HYPERTEXT MARKUP LANGUAGE” O “LENGUAJE DE

MARCADO DE HIPERTEXTO”)

El lenguaje HTML se trata de un lenguaje de marcas que funciona como

una de las bases de la WWW y es el que se emplea para el desarrollo de

páginas de internet: este es el lenguaje que interpretan los navegadores.

Está compuesto por etiquetas con las que se da estructura al sitio y se

inserta el contenido del mismo. Existen etiquetas para colocar imágenes,

hipervínculos, listas, tablas y para hacer una infinidad de acciones para

diseñar la página de acuerdo a lo que se necesite.

Las etiquetas se representan encerradas entre los símbolos menor qué

(<) y mayor qué (>). Los documentos HTML están conformados como

documentos de texto plano, es decir, sin ningún formato especial, éste

formato se especifica mediante las etiquetas, éstas al mismo tiempo pueden

tener atributos específicos para cambiar el estilo visual predefinido de la

etiqueta, como color de fondo, borde, ancho y alto, etc.

La forma correcta de trabajar con las etiquetas es aperturándolas y

clausurándolas, la clausura se hace agregando el símbolo de división o slash

(/) antes del nombre de la etiqueta pero después del símbolo de apertura (<).

Por ejemplo.

<HTML> Etiqueta de apertura

</HTML> Etiqueta de clausura

Todo el contenido de la página web debe ir contenido dentro de las

etiquetas HTML, éstas son las que especifican que se está trabajando con

una página web. En la estructura básica de un sitio web, vemos que está

conformado por un encabezado (<HEAD>) y posteriormente el cuerpo de la

página (<BODY>). En el primero encontramos los elementos que describen

el documento, es decir, el título (que se muestra en la pestaña del

navegador) y etiquetas de metadatos que sirven, por ejemplo, para que la

página reconozca caracteres especiales como acentos o la letra “Ñ”; aquí

también se especifican los archivos que están anexos al documento HTML

como por ejemplo scripts (JavaScript) o también hojas de estilo CSS para

cambiar las características de la página.

Por otro lado, en el cuerpo del sitio (dentro de las etiquetas <BODY> y

</BODY>) se colocan todos los elementos que se quieran visualizar en la

página web, es aquí donde se escriben las tablas, hipervínculos, imágenes,

archivos flash, etc. La mayoría de estos elementos poseen una apariencia

predeterminada que, en algunos casos puede presentar alguna diferencia

dependiendo del navegador que se utilice. HTML permite establecer algunas

características como color y tamaño, sin embargo no es recomendable

utilizarlas ya que con CSS también se puede hacer y al mismo tiempo se

puede controlar que la vista sea igual en todos los navegadores.

La función de HTML es definir la estructura del documento. De acuerdo a

lo antes expuesto, aquí se muestra un ejemplo de una página web sencilla:

<HTML> <HEAD> <TITLE>Título del documento</TITLE> </HEAD> <BODY> Texto del documento </BODY></HTML>

Al abrir en el navegador un documento con el código escrito arriba,

apreciaremos que lo contenido dentro de <TITLE> no se muestra en el

documento, sino que aparece en la pestaña del navegador como título de la

página.

ASPECTOS BÁSICOS EN LA CREACIÓN DE UN SITIO WEB

Hacer un buen sitio web no es una tarea sencilla, hay muchas cosas que

se deben tener en cuenta para lograr un óptimo resultado final. Atrapar y

despertar el interés del usuario desde un primer momento, es vital para una

página web, después de todo, una página muy larga, compleja y/o aburrida

puede hacer que un usuario decida salir de ella en menos de un minuto.

Estos son algunos aspectos básicos que se deben tomar en cuenta a la hora

de diseñar un sitio web.

1. La página tiene que cargar rápido

Tan solo se tienen 10 segundos para despertar el interés del visitante

antes de que se marche. Los visitantes y probablemente ni siquiera el

desarrollador esperaría 30, 40, ni 50 segundos hasta que el sitio

cargue, en Internet el tiempo es vital, cuando se navegaen la red se

pierde la paciencia rápidamente, así que lo mejor es asegurarse que

las paginas sean gráficamente ligeras para que no convierta el sitio

web en un sitio muy “pesado”.

2. Despierta el interés del usuario.

Los visitantes no siempre disponen de ratos largos para explorar todo

el sitio en búsqueda de la información que necesitan, hay que darles

precisamente eso apenas entran al sitio: información. Pero no

cualquier información, sino contenido que no pueda conseguir en tu

competencia, es por eso que el contenido no pueden ser más de lo

mismo que tienen los demás, debes enfocarse desde un punto de

vista novedoso, que lo haga fresco y original.

3. Diseño sencillo pero elegante

Un sitio web sencillo no tiene por qué ser poco atractivo, al contrario

de lo que mucha gente piensa, los sitios web que más oportunidades

de negocios tiene y que más venden actualmente en la red son

precisamente aquellos que son sencillos pero elegantes. Al hablar de

sitios web a veces "menos" es "más". Muy importante: sin errores

gramaticales, un lugar con errores ortográficos denota poca

profesionalidad y genera rechazo y desconfianza en los usuarios. No

debe tener colores de fondo demasiado fuertes, debe ser agradable a

la vista y sus textos con un tamaño adecuado y fácil de leer para todo

el mundo.

4. Pon un mapa del sitio

Si el sitio web es muy grande lo mejor es tener un mapa del sitio para

facilitarle conseguir a los usuarios lo que están buscando.

5. Información básica

Siempre, hay que incluir el nombre, la dirección, y teléfonos en el sitio

web. Resulta asombrosa la cantidad de negocios que circulan por la

red que carecen de información básica del responsable, lo cual genera

sin duda desconfianza y poca credibilidad para el usuario.

6. Preguntas frecuentes (FAQs)

Al hacer una página con las respuestas a esas preguntas frecuentes

que los usuarios podrían tener, los visitantes solo tienen que

consultarlas para despejar rápidamente sus dudas relacionadas con

los productos o servicios ofrecidos en el sitio.

7. Ofrece un glosario de términos

Una excelente manera de que los visitantes vuelvan al sitio es poner a

su disposición, un glosario de términos con la información que

necesitan. Los usuarios al tener un módulo de ayuda son más

propensos a permanecer más tiempo en el sitio o visitarlo de nuevo.

METODOLOGÍA A SEGUIR PARA EL DESARROLLO DE UNA PÁGINA

WEB

Existen ciertas pautas que se deben seguir de manera secuencial a la

hora de crear un sitio web para tener una guía de qué debe hacerse primero

y cómo debe hacerse, anteriormente se explicaron los puntos a tener en

cuenta al momento de definir para qué será utilizado el sitio web o qué

servicio prestará. Ahora, una vez que ya se tiene claro el concepto del sitio,

hay que dividir el proceso en fases para guiar al equipo de trabajo.

Básicamente son las siguientes:

1. Estudio del proyecto: comprender el proyecto para encontrar la

solución mejor adaptada.

2. Estrategia: esta fase de análisis del contenido debe ponerse en

correlación con los objetivos. Es la fase clave de la construcción del

proyecto.

3. Planificación: se trata simplemente de planear las etapas de

realización del proyecto.

4. Requerimientos y Diseño: la fase de diseño consiste en la

transformación que el cliente desea en una solución que satisfaga los

requerimientos planteados.

5. Prueba: prueba previa y máximo aprovechamiento, validación de las

modificaciones que deben introducirse. Se realizan los diseños

gráficos definitivos, se maquetan, generan las bases de datos y se

programa las funcionalidades requeridas con el uso de herramientas y

estándares adecuados.

6. Alojamiento Web: alojamiento web en los servidores y utilizar las

herramientas necesarias para la visibilidad en Internet.

7. Puesta en línea: una vez que las últimas modificaciones y

comprobaciones se hacen, entonces conectamos el sitio web con el

nombre de dominio elegido. Nos ocupamos de los DNS del dominio

para que sea accesible a todo el mundo.

8. Buscadores: hay que someter a los principales motores de búsqueda

el sitio web para hacer referencia en una buena posición. Esta

prestación se basa en el análisis de las palabras clave hecho de

antemano y en un proceso enteramente realizado manualmente.

9. Mantenimiento: no se debe abandonar el sitio web después que esté

visible en Internet.

USABILIDAD Y ACCESIBILIDAD

La “Usabilidad” de un sitio WEB se traduce como "facilidad de uso”,

sin embargo "Accesibilidad" es un término más específico y se refiere al

requisito que debe reunir un documento web para que las personas con

discapacidades puedan alcanzar la información que contiene. También existe

el término "Navegabilidad" que alude a la definición de una estructura que

permita al usuario moverse con facilidad por un sitio web.

Las normas de accesibilidad, también hablan del acceso universal

para todos los usuarios. Velando por que éstos, tengan alguna minusvalía o

no, puedan acceder a todos los contenidos de un sitio web. Por ejemplo si un

usuario tiene una minusvalía visual, quizás utilice un lector para que le narre

la web (en este caso, dependiendo de cómo se haya diseñado la web, este

lector será capaz o no de interpretar los contenidos).

Existen varios niveles de accesibilidad, en función del grado de

accesibilidad que cumple nuestra web.

1.- Nivel de Accesibilidad A (básico)

2.- Nivel de Accesibilidad AA (medio)

3.- Nivel de Accesibilidad AAA (alto)

Por otro lado, la usabilidad trata las recomendaciones que se deben tener

en cuenta al diseñar un sitio web. Siempre, en lo referente a la facilidad de

acceso para los usuarios. Se trata de que un sitio web sea fácilmente

navegable, es decir, que un usuario no se pierda en los contenidos, que

encuentre fácilmente los menús y que llegue a cumplir los objetivos del sitio

web: comprar, descargar, subscribirse, etc.

A diferencia de la accesibilidad no existe una herramienta que nos valide

la usabilidad. Esto ha ser testeado por los propios usuarios y serán ellos los

que valoren la usabilidad de la web. Por eso es tan importante al desarrollar

un proyecto, que en su fase final, sea testeado por usuarios de diferentes

perfiles y éstos comuniquen a los desarrolladores, su experiencia como

usuario.

POSICIONAMIENTO WEB

Posicionamiento web, posicionamiento en buscadores o posicionamiento

SEO se refiere a las técnicas que buscan que una página web aparezca en

las primeras posiciones de los resultados en buscadores (Google, Yahoo,

Bing) para una serie de palabras o frases.

Posicionamiento natural se refiere a las técnicas de posicionamiento web

que tienen que ver con los contenidos de la misma (títulos, metas, palabras

clave, etc.) y/o con los enlaces dirigidos a la página web, en contraposición a

las campañas de posicionamiento web de pago por click (Google Adwords,

Yahoo! Search Marketing), en las que pagas directamente a los buscadores

para aparecer como un enlace patrocinado.

Algunas técnicas de posicionamiento web natural

Seguir los estándares: HTML semántico, CSS y Javascript no

obstructivo

Identificar las palabras clave de la página web y utilizarlas

convenientemente en los contenidos

Generar títulos únicos para cada sección de la página web acorde a

su contenido y palabras clave

Crear metas personalizadas para cada sección de la página web

Utilizar las palabras clave en los encabezados

Usar texto significativo en los enlaces tanto internos como desde otras

páginas web

Minimizar el uso de tecnologías que los buscadores no entienden:

Flash, AJAX, frames, etc.

Dar de alta manualmente la página web en buscadores

CONCLUSIONES

En la realización de este trabajo, hemos aprendido que para el

desarrollo de sitios WEB, el lenguaje HTML se utiliza para crear documentos

que muestren una estructura de hipertexto, ya que contiene información

cruzada con otros documentos, lo cual nos permite pasar de un documento

al referenciado desde la misma aplicación con la que lo estamos

visualizando.

Asimismo, se explicó la usabilidad de un sitio WEB se traduce como

"facilidad de uso”, y la "Accesibilidad" como un término más específico y se

refiere al requisito que debe reunir un documento web para que las personas

con discapacidades puedan alcanzar la información que contiene.

También se explicó el posicionamiento de un sitio WEB, donde los

navegadores crean y posicionan de forma automática todas las cajas que

forman cada página HTML y como las técnicas de posicionamiento WEB

evolucionan para contrarrestar las técnicas de posicionamientos

fraudulentas y seguir aumentando la relevancia y la eficacia de las

consultas.

BIBLIOGRAFÍA