9.

10 Metodologas para la creacin de sitios web

Sin duda alguna existen diferentes metodologas para la elaboracin de sitios web pero todas
persiguen el mismo objetivo que es el lograr que los usuarios finales puedan utilizar el producto sin
dificultad y que les sea entendible. Para el desarrollo de un sitio web se deben seguir una serie de
pasos que son:

Ilustracin 1. Metodologa diseo de pginas webs.

9.10.1 Eleccin del tipo de web

Segn aportaciones del Ingeniero Luis Alvarado Cceres (2010)1 Decidir el tipo de pgina que
se quiere desarrollar, es un proceso difcil ya que debido a esa eleccin que se haga es como se
realizara el diseo, la implementacin y codificacin del sitio web ms conveniente para cada caso.
Otro punto a tratar es el tipo de temtica que seguir la pgina web esto con el fin de elegir la
metodologa ms eficiente para el desarrollo del mismo y para llevar a cabo la creacin del producto
se deben plantear los objetivos y el cronograma de actividades a seguir tomando en cuenta cada
paso del proceso y recursos a utilizar.
9.10.2 Definicin de la temtica
Es importante definir el tema a exponer en la pgina web, ya que de esta manera se puede definir
trminos clave de bsqueda y poder posicionarse en los buscadores de tal forma que sea fcil
encontrar, adems as obtener contenido e imgenes de apoyo.
1 Ing. Luis Alvarado Cceres (2010) Metodologa para creacin de Sitio Web, rescatado de
(separata9_proceso_creacion_paginas_web.pdf)

9.10.3 Plantear objetivos

Para alcanzar la meta que es la creacin del sitio web se han de plantear los objetivos que
previamente se establecieron, para posteriormente realizar estrategias funcionales para la
consecucin de dichos objetivos.
9.10.4 Fase de Anlisis
Para continuar con la creacin del sitio web por dar respuesta a un grupo muy concreto de
interrogantes, que permitirn aclarar y definir de manera bsica las expectativas existentes en torno
a la aplicacin Web e Interaccin que se va a generar.
9.10.5 Seleccin de usuarios
Siempre cuando se desarrolla un proyecto se debe tener muy claro los usuarios o la audiencia a la
que se pretende alcanzar o influir con el sitio Web; toda la informacin que se obtenga servir para
establecer parte de los criterios de diseo de contenido, lenguajes, esttica, entre otros.
9.10.6 Fase de Planificacin
Todo proyecto posee una fase de planificacin. En ella se deben definir cules son los
requerimientos tcnicos para este fin, quines sern los miembros del equipo, seleccionar la
estructura, planear un sitio bien organizado, y realizar estudios de mercadeo comparativo. 2
9.10.7 Seleccin de Software
En esta etapa de la metodologa se busca determinar los requerimientos en cuanto al software que
se utilizar para el desarrollo de la aplicacin; es decir, sistemas operativos, servidor (software),
editores para diseo Web, lenguajes de programacin, animaciones y otros componentes.
Esta definicin depender de muchos aspectos como la existencia de licencias de software o los
recursos tcnicos y hardware.
9.10.8 Seleccin del lenguaje de programacin
Sin duda alguna la parte ms importante del desarrollo de pginas web es la eleccin del lenguaje de
programacin a utilizar, segn Damin Prez Valds3 desde los inicios de internet surgieron
diferentes demandas por los usuarios y se dieron soluciones mediante lenguajes estticos y
conforme paso el tiempo se desarrollaron lenguajes de programacin para la web ms dinmicos.
Es por esta causa que seleccionar el leguaje es un punto clave, ya que algunos lenguajes simplifican
mucho el desarrollo web y la forma en que el usuario interacta con la misma.
9.10.9 Seleccin de Software

2 Metodologa de trabajo para la creacin de un sitio web. (2013) rescatado del pdf: guia-basica-para-lacreacion-de-microsite-10052013

3 Damin Prez Valds (2007) los diferentes lenguajes de programacin para la web, rescatad de la
pagina; (http://www.maestrosdelweb.com/los-diferentes-lenguajes-de-programacion-para-la-web/)

En esta etapa de la metodologa se busca determinar los requerimientos en cuanto al software que
se utilizar para el desarrollo de la aplicacin; es decir, sistemas operativos, servidor (software),
editores para diseo Web, lenguajes de programacin, animaciones y otros componentes.
Esta definicin depender de muchos aspectos como la existencia de licencias de software o los
recursos tcnicos y hardware.
Dreamweaver
Dreamweaver es un editor de cdigo HTML profesional para el diseo visual y la administracin de
sitios y pginas Web. Tan si prefiere controlar manualmente el cdigo HTML como si prefiere trabajar
en un entorno de edicin visual, Dreamweaver le permite ponerse manos a la obra rpidamente y le
facilita herramientas tiles para mejorar su experiencia en diseo Web 4.
Las funciones de edicin visual de Dreamweaver tambin le permiten aadir diseo y funcionalidad
rpidamente sin escribir una sola lnea de cdigo. Puede ver todos los elementos o activos del sitio y
arrastrarlos desde un panel fcil de usar directamente hasta un documento.

Web Creator 6
Web Creator Pro 6 es una aplicacin potente que permite a los usuarios que conocen poco la
informtica o no la conocen, crear sitios Web en poco tiempo, con un aspecto profesional. Es tan
rpido que puede contarlo en minutos.
Web Creator est diseado para cumplir con las necesidades de los usuarios de una herramienta de
creacin de sitios Web sencilla y potente. Si se piensa en un usuario con conocimientos medios, le
permitimos que su creatividad fluya, sin tener que utilizar la programacin tediosa y los lenguajes de
marcado complicados.
La creacin de un sitio Web es tentadoramente sencilla; puede crear un sitio Web desde el principio
o utilizar una de las plantillas completas si necesita ayuda para empezar. Una vez realizado el sitio
Web5.
Flash CS5
Flash CS5 es una aplicacin que permite crear animaciones para pginas web con alto contenido
interactivo y multimedia. Flash dispone de mltiples herramientas con las que podemos crear
4 Macromedia (2000) Macromedia Dreamweaver, rescatado del pdf: (Manual de Dreamweaver)
pag.11
5 Web creator () gua de inicio rpido del usuario, rescatado del pdf: (manual) pag.5

pelculas a base de animaciones, botones estticos o dinmicos, sonidos y msica, vdeo, etc. y
dotar de acciones a las distintas animaciones6.
Caractersticas:
1.- Flash utiliza el lenguaje de programacin ActionScript
2.- Animaciones, vdeo y sonido
2.- Trabaja fundamentalmente con grficos vectoriales en lugar de manejar bitmaps, lo que posibilita
que la resolucin de la imagen sea fija y no se distorsione una vez ampliada o reducida.

9.11 Lenguajes de programacin web

Sin duda alguna la parte ms importante del desarrollo de pginas web es la eleccin del lenguaje de
programacin a utilizar, segn Damin Prez Valds7 desde los inicios de internet surgieron diferentes
demandas por los usuarios y se dieron soluciones mediante lenguajes estticos y conforme paso el tiempo se
desarrollaron lenguajes de programacin para la web ms dinmicos. Es por esta causa que seleccionar el
leguaje es un punto clave, ya que algunos lenguajes simplifican mucho el desarrollo web y la forma en que el
usuario interacta con la misma.

6 Adobe Flash (2009) Manual de CS5, rescatado del pdf: (manual-de-flash-cs5)

7 Damin Prez Valds (2007) los diferentes lenguajes de programacin para la web, rescatad de la
pagina; (http://www.maestrosdelweb.com/los-diferentes-lenguajes-de-programacion-para-la-web/)

Ilustracin 2. Lenguajes de Programacin

9.11.1 Lenguaje HTML

Este es un lenguaje esttico para el desarrollo de sitios desarrollado por el World Wide Web
Consortium (W3C). Los ficheros HTML son ficheros de texto puramente ASCII, que pueden ser
escritos con cualquier editor bsico, tal como Notepad en Windows o vi en Unix. Tambin se pueden
utilizar procesadores de texto ms complicados como Microsoft Word, pero en este caso hay que
asegurarse que el fichero es guardado en disco como "text only" 8.
Ventajas:

Sencillo que permite describir hipertexto.

Texto presentado de forma estructurada y agradable.

No necesita de grandes conocimientos cuando se cuenta con un editor de pginas web o

WYSIWYG.

Archivos pequeos.

Despliegue rpido.

Lenguaje de fcil aprendizaje.

Lo admiten todos los exploradores.

Desventajas:

Lenguaje esttico.

La interpretacin de cada navegador puede ser diferente.

8 Marlene Flores (2013) Lenguaje HTML, rescatado del pdf: (HTML)

Guarda muchas etiquetas que pueden convertirse en basura y dificultan la correccin.

El diseo es ms lento.

Las etiquetas son muy limitadas.

9.11.2 Lenguaje Javascript

Este es un lenguaje interpretado, no requiere compilacin. Fue creado por Brendan Eich en la
empresa Netscape Communications. El cdigo Javascript puede ser integrado dentro de nuestras
pginas web. Para evitar incompatibilidades el World Wide Web Consortium (W3C) diseo un
estndar denominado DOM (en ingls Document Object Model, en su traduccin al espaol Modelo
de Objetos del Documento)9.
Ventajas:

Lenguaje de scripting seguro y fiable.

Los script tienen capacidades limitadas, por razones de seguridad.

El cdigo Javascript se ejecuta en el cliente.

Desventajas:

Cdigo visible por cualquier usuario.

El cdigo debe descargarse completamente.

Puede poner en riesgo la seguridad del sitio, con el actual problema llamado XSS (significa en
ingls Cross Site Scripting renombrado a XSS por su similitud con las hojas de estilo CSS).

9.11.3 Lenguaje PHP

PHP es un acrnimo recursivo que significa PHP Hypertext Pre-processor, Surgi en 1995, desarrollado por
PHP Group. PHP es utilizado para la generacin de pginas web dinmicas, embebidas en pginas HTML y
ejecutadas en el servidor. Para su funcionamiento necesita tener instalado Apache o IIS con las libreras de
PHP. La mayor parte de su sintaxis ha sido tomada de C, Java y Perl con algunas caractersticas
especficas10.

Ventajas:

Muy fcil de aprender.

9 Toni navarrete (2006) El lenguaje Javascript, rescatado del pdf: (javascript) pag.6
10 Juan Pavn Mestras (2012) PHP (aplicaciones web / sistemas web), rescatado del pdf: (33PHP)

Se caracteriza por ser un lenguaje muy rpido.

Soporta en cierta medida la orientacin a objeto. Clases y herencia.

Es un lenguaje multiplataforma: Linux, Windows, entre otros.

Capacidad de conexin con la mayora de los manejadores de base de datos: MysSQL,

PostgreSQL, Oracle, MS SQL Server, entre otras.

Capacidad de expandir su potencial utilizando mdulos.

Posee documentacin en su pgina oficial la cual incluye descripcin y ejemplos de cada una
de sus funciones.

Es libre, por lo que se presenta como una alternativa de fcil acceso para todos.

Incluye gran cantidad de funciones.

No requiere definicin de tipos de variables ni manejo detallado del bajo nivel.

Desventajas:

Se necesita instalar un servidor web.

Todo el trabajo lo realiza el servidor y no delega al cliente. Por tanto puede ser ms ineficiente
a medida que las solicitudes aumenten de nmero.

La legibilidad del cdigo puede verse afectada al mezclar sentencias HTML y PHP.

La programacin orientada a objetos es an muy deficiente para aplicaciones grandes.

Dificulta la modularizacin.

Dificulta la organizacin por capas de la aplicacin.

9.11.4. Lenguaje Python

Es un lenguaje de programacin creado en el ao 1990 por Guido van Rossum, los usuarios lo
consideran como un lenguaje ms limpio para programar. Permite la creacin de todo tipo de
programas incluyendo los sitios web11.
Su cdigo no necesita ser compilado, por lo que se llama que el cdigo es interpretado. Es un
lenguaje de programacin multiparadigma, lo cual fuerza a que los programadores adopten por un
estilo de programacin particular:

Programacin orientada a objetos.

11 Andres Marzal, Isabel Garcia (2008) introduccin a la programacin con python, rescatado
del pdf: (ippython.pdf)

Programacin estructurada.

Programacin funcional.

Programacin orientada a aspectos.

Ventajas:

Libre y fuente abierta.

Lenguaje de propsito general.

Gran cantidad de funciones y libreras.

Sencillo y rpido de programar.

Multiplataforma.

Licencia de cdigo abierto (Opensource).

Orientado a Objetos.

Portable.

Desventajas:

Lentitud por ser un lenguaje interpretado.

9.11.5 Lenguajes RUBY

Es un lenguaje interpretado de muy alto nivel y orientado a objetos. Desarrollado en el 1993 por el
programador japons Yukihiro Matz Matsumoto. Su sintaxis est inspirada en Phyton, Perl. Es
distribuido bajo licencia de software libre (Opensource). Ruby es un lenguaje dinmico para una
programacin orientada a objetos rpida y sencilla 12.
Caractersticas:

Existe diferencia entre maysculas y minsculas.

Mltiples expresiones por lneas, separadas por punto y coma ;.

Dispone de manejo de excepciones.

12 Dr. Diego Lz. de Ipia Gz. de Artaza (2006) Introduccin a Ruby on Rails, rescatado del pdf:
(RubyOnRailsDeusto.pdf)

Ruby puede cargar libreras de extensiones dinmicamente si el (Sistema Operativo) lo

permite.

Porttil.

Ventajas:

Permite desarrollar soluciones a bajo Costo.

Software libre.

Multiplataforma.

9.11.6 Lenguaje css

El estndar CSS13 define una forma de especificar todos los aspectos de presentacin de
un documento HTML utilizando una hoja de estilos externa, en la que se especifican los
detalles de presentacin de cada elemento HTML. De esta manera, en el HTML
nicamente se incluira el documento en s, junto con metadatos que determinan su
estructura. A la hora de visualizar el documento, el navegador aplicara la hoja de estilos
correspondiente para formatear el documento de cara a su visualizacin. Adems de la
versatilidad que proporciona el uso de CSS en lo que respecta a la visualizacin del
documento, tambin hace ms fcil el mantenimiento de un sitio web, ya que mediante
la modificacin de la hoja de estilos es posible cambiar completamente el aspecto de
una web sin necesidad de revisar cada documento HTML.

Archivo HTML

Archivo CSS

...
<p>Prrafo normal</p>
<p id="especial">Prrafo
especial</p>
<p class="c1">De la clase</p>
<p class="c1">Otro de la clase</p>
...

p{
text-align: left;
font-family: Times;
}
.c1 {
color: red;
}
#especial {
font-weight: bold;
}

Tabla 1. Diferencia entre HTML Y CSS

13 Jess Jimnez Herranz (2009) Desarrollo para navegadores web, rescatado del pdf: (Desenvolupament
per a navegadors web. HTML, DHTML, CSS, DOM, Javascript i objectes incrustats.pdf) pag.5

9.12

Seleccin de personal

Se sugiere una lista de miembros que podran ser parte de este equipo, de esta lista se extrajeron
los siguientes14:
Rol
Jefe de
proyecto
Productor
Editor

Escritor

Diseador de
bases de
datos
Diseador de

Realiza
Encargado de la supervisin y control del resto del equipo.
Acta como enlace entre el usuario y los dems miembros.
Este se encarga de establecer el aspecto, percepcin y
funcionalidad del sitio.
Ayuda a establecer y mantener el estilo, adems de la
integridad del sitio. Tiene la responsabilidad de controlar la
correccin y el flujo de texto y en algunos casos el contenido
multimedia del sitio.
Los escritores deben interesarse por los detalles tcnicos y la
incorporacin al desarrollo de estndares con ro al sitio,
utilizacin de las palabras apropiadas, ortografa y gramtica.
Es necesario que el escritor tenga conocimiento de HTML, o de
herramientas con FrontPage u otra aplicacin.
Desarrolla las bases de datos que gestiona el sitio Web, se
ocupa de definir sus relaciones.
Trabajar en conjunto con el diseador de base de datos.

14 Gabriel Zambrano Lpez (2006) Metodologa para la creacin de sitios Web, rescatado del
pdf: (Metodologa para el desarrollo de sitios web)

scripts
Diseador
grfico

Tcnico de
hardware
Tcnico de
pruebas

Desarrolla y depura los scripts, los componentes Activex y otros

elementos interactivos en la Web.
Se encarga de crear los archivos visuales del sitio, tambin
puede encargarse de la creacin de los archivos de sonido y de
pelcula. Trabaja con imgenes y pequeas labores de
programacin
Configura, prueba, opera y mantiene las computadoras,
impresoras y mquinas necesarias para la ejecucin y
mantenimiento del sitio.
Si se dispone de un sitio grande o complejo puede resultar
provechoso la incorporacin de un Tcnico de prueba al equipo.
Su labor consiste en garantizar que todo funcione como
debera, se encarga de probar los elementos de todas las
pginas.
Tabla 6 Roles del persona

Aunque estas funciones podran tomarse como esenciales, la estructura siempre vendr
determinada por el alcance del proyecto.

Diseo
Ya que se ha establecido el tipo de sitio web a desarrollar y en conjunto con los objetivos planeados
el siguiente paso a definir es el diseo de la pagina esto se puede realizar desde un prototipo en
papel hasta simulacin con las herramientas CASE adecuadas en ello se debe tomar en cuenta las
diferentes paginas a utilizar, los links, formularios y dems aplicaciones a implementar en el
producto, sin duda alguna el diseo visual es lo mas llamativo de la pagina por lo que con ello
atraers a ms personas a visitarla, pero no solo es lo visual lo que ms importa sino tambin la
facilidad que tendr el usuario final para navegar en l lo que la ara mucho ms eficiente.
Aplicaciones web
En este punto de a de establecer las aplicaciones que contendrn nuestros sitios web como lo son
encuestas, foros, soporte, pedidos, etc. Todo esto se debe realizar con programacin especfica y
creacin de base de datos en donde se respalde y almacene la informacin que se es necesario
utilizar
10.9 Estructura de la navegacin metodologa
10.9.1 Estructura lineal
Esta estructura consiste en una lnea recta que recorre el sitio desde la pgina de inicio hasta la
pgina final como se muestra en la ilustracin 19.

Ilustracin 19 Estructura lineal

Es muy til cuando se desea que el lector siga un camino fijo y guiado, adems el de impedir que se
distraiga con enlaces a otras pginas. Por otra parte se puede causar al lector la sensacin de estar
encerrado si el camino es muy largo o poco interesante. Este tipo de estructura sera vlido para
tutoriales de aprendizaje o tours de visita guiada.

10.9.2 Estructura Jerrquica

La estructura jerrquica, como se observa en la siguiente figura:

Ilustracin 20. Estructura jerrquica

Es la tpica estructura de rbol, en el que la raz es la pgina de bienvenida, sta se puede tambin
sustituir por la de contenido, en la que se exponen las diferentes secciones que contiene el sitio.
La ventaja de esta estructura es que el usuario siempre est ubicado y puede moverse fcilmente
por el sitio. Gracias a que la mayora de las pginas secundarias permiten regresar a la pgina de
inicio, los visitantes controlan completamente la navegacin.

10.9.3 Estructura Radial

En este modelo las pginas secundarias no se conectan entre s, y se debe navegar por la pgina
principal para ir de una secundaria a otra, es decir, la principal contiene enlaces a todas las
secundarias, pero las secundarias slo contienen un entorno a la principal, tal cual se aprecia en la
ilustracin 21.

Ilustracin 21 Estructura radical.

La ventaja de esta estructura es que facilita la navegacin, los visitantes slo tendrn que efectuar
uno o dos clics para retornar a la pgina principal; sin embargo, esto podra tambin ser un
inconveniente porque obliga al usuario a regresar siempre a la pgina de inicio.

10.9.4 Estructura de Red

En ella se plantea un modelo en el que todas las pginas estn relacionadas entre s. Es una
estructura ideal para sitios especializados en un tema, en la que se le permite al usuario una
navegacin libre y sin limitaciones como la que vemos a continuacin en la ilustracin 22.

Ilustracin 22. Estructura de red