miércoles, 26 de junio de 2013

Bases de Datos en Servidores Web

(database server). Un servidor de base de datos es un programa que provee servicios de base de datos a otros programas u otras computadoras, como es definido por el modelo cliente-servidor. También puede hacer referencia a aquellas computadoras (servidores) dedicadas a ejecutar esos programas, prestando el servicio. Los sistemas de administración de base de datos (SGBD) generalmente proveen funcionalidades para servidores de base de datos, en cambio otros (como por ejemplo, MySQL) solamente proveen construcción y acceso a la base de datos.
Para realizar una requisición de acceso desde el Web hasta una base de datos no sólo se necesita de un browser del Web y de un Servidor Web, sino también de un software de procesamiento (aplicación CGI), el cual es el programa que es llamado directamente desde un documento HTML en el cliente. Dicho programa lee la entrada de datos desde que provienen del cliente y toma cierta información de variables de ambiente. El método usado para el paso de datos está determinado por la llamada CGI.


Una vez se reciben los datos de entrada (sentencias SQL o piezas de ellas), el software de procesamiento los prepara para enviarlos a la interfaz en forma de SQL, y luego ésta procesa los resultados que se extraen de la base de datos.

La interfaz contiene las especificaciones de la base de datos necesarias para traducir las solicitudes enviadas desde el cliente, a un formato que sea reconocido por dicha base. Además, contiene toda la información, estructuras, variables y llamadas a funciones, necesarias para comunicarse con la base de datos.

El software de acceso usualmente es el software distribuido con la base de datos, el cual permite el acceso a la misma, a través de solicitudes con formato. Luego, el software de acceso recibe los resultados de la base de datos, aún los mensajes de error, y los pasa hacia la interfaz, y ésta a su vez, los pasa hasta el software de procesamiento.

Cualquier otro software (servidor HTTP, software de redes, etc.) agrega enlaces adicionales a este proceso de extracción de la información, ya que el software de procesamiento pasa los resultados hacia el servidor Web, y éste hasta el browser del Web (ya sea directamente o a través de una red).

Panel de Control Web

El panel de control web es un software que provee una interfaz gráfica para la gestión de usuarios y la administración de los servicios del servidor. Generalmente son en sistemas operativos tipo unix, tal como GNU/Linux y BSD, sin embargo también existen en otras plataformas como por ejemplo Windows Server.

Algunas de las funciones que contienen los paneles de control son:
  • Estadísticas de visitas.
  • Detalles sobre la cuota de ancho de banda utilizada.
  • Administración de archivos y directorios.
  • Configuración de cuentas de correo electrónico.
  • Administración de bases de datos.
  • Administración de cuentas de usuarios de servidores FTP.
  • Acceso a los archivos de registros del servidor.
  • Manejo de subdominios.

El Panel de control contiene muchas opciones para poder personalizar su ordenador. Se puede añadir nuevo hardware, agregar y quitar programas, cambiar la apariencia de la pantalla y mucho más.
Vamos a ver un resumen de las opciones más importantes.
- Agregar hardware: si enganchamos algún hardware nuevo a nuestro pc, por ejemplo, una impresora, al entrar en esta opción el ordenador nos ayuda a instalarlo.
- Agregar o quitar programas: por aqui se quita y pone el software, esto es, los programas que instalamos en el equipo, por ejemplo, el Microsoft Office, el Antivirus, el Messenger, programas diversos como enciclopedias, contabilidad, etc....
- Conexiones de red: nos permite configurar varios ordenadores en red
- Configuración regional y de idioma: es importante que el idioma esté bien configurado porque esto afecta al teclado, ya que en otros países las teclas se colocan de distinta manera.
- Cuentas de usuario: para crear nuevos usuarios, modificar los ya existentes.
- Escáneres y cámaras: si conectamos un escáner o una cámara digital al ordenador, entraremos en esta opción y seguiremos las instrucciones del asistente.
- Fecha y Hora: al empezar a trabajar con el ordenador, nos aseguraremos de que la hora y la fecha sean correctas, marcar que el cambio de hora se haga automático según el horario de verano.
- Impresoras y Faxes: Para agregar una impresora o un fax ir a Archivo-Agregar impresora y seguir el asistente.
- Mouse: da opción de cambiar la configuración de botones primario y secundario del ratón, para los zurdos. También se puede cambiar el puntero del ratón.
- Pantalla: desde aquí se puede configurar la resolución de la pantalla, la apariencia de la misma, cambiar el fondo del escritorio, etc..
- Sistema: es una de las opciones más importantes del panel de control, ya que aquí se resumen las características técnicas del software y el hardware de la máquina.
- Teclado: en esta opción puede configurarse la velocidad del teclado.


Servicios de Difusion de la Web

Algunas estrategias para difundir un sitio en la web

1- Generar/Promocionar Contenidos: El contenido es el alma de un sitio web, el mismo no sobrevive a la demanda de los usuarios si escasea de información y contenido fresco día tras día, lo primero que se debería tomar en cuenta que tipo de información estamos generando y elaborar una buena lista de artículos a redactar eh ir promocionándolos constantemente.
2- E-mail Marketing: Tenemos nuestro contenido y necesitamos promocionarlo y que mejor que hacerlo mediante campañas de e-mail marketing o envío de Newsletter con actualizaciones constantes. Esto nos dará la oportunidad de atraer nuevamente a los usuarios que ya tenían olvidado nuestra web.
3- Posicionamiento en buscadores: Al momento de crear nuestros artículos es importante optimizarlo para que el mismo genere a su vez un posicionamiento natural en los buscadoras y así atrae a nuevos visitantes.
4- Compartir en redes sociales: Las redes sociales aportan una gran ventaja en el momento de compartir información, sabiendo adaptar la misma a las circunstancias y promocionado nuestro contenido a nuestros amigos y seguidores.
5- Realizar SEM: Publicitar es algo importante, ya que así podremos captar la atención de aquellas personas que no nos conocían, y que mejor que invertir en campañas de SEM para publicitar.

Servidores Web

Un servidor web o servidor HTTP es un programa informático que procesa una aplicación del lado del servidor realizando conexiones bidireccionales y/o unidireccionales y síncronas o asíncronas con el cliente generando o cediendo una respuesta en cualquier lenguaje o Aplicación del lado del cliente. El código recibido por el cliente suele ser compilado y ejecutado por un navegador web. Para la transmisión de todos estos datos suele utilizarse algún protocolo. Generalmente se utiliza el protocolo HTTP para estas comunicaciones, perteneciente a la capa de aplicación del modelo OSI. El término también se emplea para referirse al ordenador que ejecuta el programa.

Funcionamiento


El Servidor web se ejecuta en un ordenador manteniéndose a la espera de peticiones por parte de un cliente (un navegador web) y que responde a estas peticiones adecuadamente, mediante una página web que se exhibirá en el navegador o mostrando el respectivo mensaje si se detectó algún error. A modo de ejemplo, al teclear www.wikipedia.org en nuestro navegador, éste realiza una petición HTTP al servidor de dicha dirección. El servidor responde al cliente enviando el código HTML de la página; el cliente, una vez recibido el código, lo interpreta y lo exhibe en pantalla. Como vemos con este ejemplo, el cliente es el encargado de interpretar el código HTML, es decir, de mostrar las fuentes, los colores y la disposición de los textos y objetos de la página; el servidor tan sólo se limita a transferir el código de la página sin llevar a cabo ninguna interpretación de la misma.

Además de la transferencia de código HTML, los Servidores web pueden entregar aplicaciones web. Éstas son porciones de código que se ejecutan cuando se realizan ciertas peticiones o respuestas HTTP. Hay que distinguir entre:
  • Aplicaciones en el lado del cliente: el cliente web es el encargado de ejecutarlas en la máquina del usuario. Son las aplicaciones tipo Java "applets" o Javascript: el servidor proporciona el código de las aplicaciones al cliente y éste, mediante el navegador, las ejecuta. Es necesario, por tanto, que el cliente disponga de un navegador con capacidad para ejecutar aplicaciones (también llamadas scripts). Comúnmente, los navegadores permiten ejecutar aplicaciones escritas en lenguaje javascript y java, aunque pueden añadirse más lenguajes mediante el uso de plugins.
  • Aplicaciones en el lado del servidor: el servidor web ejecuta la aplicación; ésta, una vez ejecutada, genera cierto código HTML; el servidor toma este código recién creado y lo envía al cliente por medio del protocolo HTTP.
Las aplicaciones de servidor muchas veces suelen ser la mejor opción para realizar aplicaciones web. La razón es que, al ejecutarse ésta en el servidor y no en la máquina del cliente, éste no necesita ninguna capacidad añadida, como sí ocurre en el caso de querer ejecutar aplicaciones javascript o java. Así pues, cualquier cliente dotado de un navegador web básico puede utilizar este tipo de aplicaciones.
El hecho de que HTTP y HTML estén íntimamente ligados no debe dar lugar a confundir ambos términos. HTML es un lenguaje de marcas y HTTP es un "protocolo".

Sitio Web

Un sitio web es una colección de páginas de internet relacionadas y comunes a un dominio de Internet o subdominio 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.
Algunos sitios web requieren una subscripción para acceder a algunos o todos sus contenidos. Ejemplos de sitios con subscripción incluyen algunos sitios de noticias, sitios de juegos, foros, servicios de correo electrónico basados en web, sitios que proporcionan datos de bolsa de valores e información económica en tiempo real, etc.

 

Visión general

Un sitio web es un gran espacio documental organizado que la mayoría de las veces está típicamente dedicado a algún tema particular o propósito específico. Cualquier sitio web puede contener hiperenlaces a cualquier otro sitio web, de manera que la distinción entre sitios individuales, percibido por el usuario, puede ser a veces borrosa.

No debemos confundir sitio web con página web; esta última es sólo un archivo HTML, una unidad HTML, que forma parte de algún sitio web. Al ingresar una dirección web, como por ejemplo www.wikipedia.org, siempre se está haciendo referencia a un sitio web, el que tiene una página HTML inicial, que es generalmente la primera que se visualiza. La búsqueda en Internet se realiza asociando el DNS ingresado con la dirección IP del servidor que contiene el sitio web en el cual está la página HTML buscada. Los sitios web están escritos en código HTML (Hyper Text Markup Language), o dinámicamente convertidos a éste, y se acceden aplicando un software conveniente llamado navegador web, también conocido como un cliente HTTP. Los sitios web pueden ser visualizados o accedidos desde un amplio abanico de dispositivos con conexión a Internet, como computadoras personales, portátiles, PDAs, y teléfonos móviles.

Un sitio web está alojado en una computadora conocida como servidor web, también llamada servidor HTTP, y estos términos también pueden referirse al software que se ejecuta en esta computadora y que recupera y entrega las páginas de un sitio web en respuesta a peticiones del usuario. Apache es el programa más comúnmente usado como servidor web (según las estadísticas de Netcraft) y el Internet Information Services (IIS) de Microsoft también se usa con mucha frecuencia. Un sitio web estático es uno que tiene contenido que no se espera que cambie frecuentemente y se mantiene manualmente por alguna persona o personas que usan algún tipo de programa editor. Hay dos amplias categorías de programas editores usados para este propósito que son:
  • Editores de texto como Notepad, donde el HTML se manipula directamente en el programa editor o
  • Editores WYSIWYG como por ejemplo Microsoft FrontPage y Adobe Dreamweaver, donde el sitio se edita usando una interfaz GUI y el HTML subyacente se genera automáticamente con el programa editor.
Un sitio web dinámico es uno que puede tener cambios frecuentes en la información. Cuando el servidor web recibe una petición para una determinada página de un sitio web, la página se genera automáticamente por el software, como respuesta directa a la petición de la página; Por lo tanto se puede dar así un amplio abanico de posibilidades, incluyendo por ejemplo: (a) Mostrar el estado actual de un diálogo entre usuarios, (b) Monitorizar una situación cambiante, o proporcionar información personalizada de alguna manera a los requisitos del usuario individual, etc.
Hay un amplio abanico de sistemas de software, como el lenguaje de programación PHP, Active Server Pages (ASP), y Java Server Pages (JSP) que están disponibles para generar sistemas de sitios web dinámicos. Los sitios dinámicos a menudo incluyen contenido que se recupera de una o más bases de datos o usando tecnologías basadas en XML como por ejemplo el RSS.

El contenido estático puede también ser generado periódicamente de manera dinámica, o si ocurren ciertas y determinadas condiciones; con esta estrategia se evitar la pérdida de rendimiento por causa de iniciar el motor dinámico para cada usuario o para cada conexión.

Hay plugins disponibles para navegadores, que se usan para mostrar contenido activo como Flash, Silverlight, Shockwave o applets, escritos en Java. El HTML dinámico también proporciona interactividad para los usuarios, y el elemento de actualización en tiempo real entre páginas web (i.e, las páginas no tienen que cargarse o recargarse para efectuar cualquier cambio), principalmente usando el DOM y JavaScript, el soporte de los cuales está integrado en la mayoría de navegadores web modernos.

Últimamente, dado el compromiso social de muchos gobiernos, se recomienda que los sitios web cumplan determinadas normas de accesibilidad, para que éstos, puedan ser visitados y utilizados por el mayor número de personas posibles, independientemente de sus limitaciones físicas o derivadas de su entorno. La accesibilidad web viene recogida en las Pautas de Accesibilidad al Contenido Web WCAG 1.0 del W3C.

Tipos de sitios web

Existen muchas variedades de sitios web, cada uno especializándose en un tipo particular de contenido o uso, y ellos pueden ser arbitrariamente clasificados de muchas maneras. Unas pocas clasificaciones pueden incluir:
  • Sitio archivo: usado para preservar contenido electrónico valioso amenazado con extinción. Dos ejemplos son: Internet Archive, el cual desde 1996 ha preservado billones de antiguas (y nuevas) páginas web; y Google Groups, que a principios de 2005 archivaba más de 845.000.000 mensajes expuestos en los grupos de noticias/discusión de Usenet, tras su adquisición de Deja News.
  • Sitio weblog (o blog o bitácora digital): sitio usado para registrar lecturas online o para exponer contenidos en línea con la fecha del día de ingreso; también puede incluir foros de discusión. Ejemplos: Blogger, LiveJournal, WordPress.
  • Sitio de empresa: usado para promocionar una empresa o servicio.
  • Sitio de comercio electrónico: para comprar bienes, como Amazon.com.
  • Sitio de comunidad virtual: un sitio o portal social donde las personas con intereses similares se comunican unos con otros, normalmente por chat o foros o simples mensajes. Por ejemplo: MySpace, Facebook, Hi5, Orkut, Habbo, Multiply, Quepasa.
  • Sitio de Base de datos:S un sitio donde el uso principal es la búsqueda y muestra de un contenido específico de la base de datos, como por ejemplo Internet Movie Database.
  • Sitio de desarrollo: un sitio con el propósito de proporcionar información y recursos relacionados con el desarrollo de software, diseño web, etc.
  • Sitio directorio: un sitio que contiene contenidos variados que están divididos en categorías y subcategorías, como el directorio de Yahoo!, el directorio de Google, y el Open Directory Project.
  • Sitio de descargas: estrictamente usado para descargar contenido electrónico, como software, juegos o fondos de escritorio: Download, Tucows, Softonic, Baulsoft.
  • Sitio de juego: un sitio que es propiamente un juego o un «patio de recreo» donde mucha gente viene a jugar, como MSN Games, Minijuegos.com, Pogo.com y los MMORPGs VidaJurasica, Planetarion y Kings of Chaos.
  • Sitio de información: contiene contenido que pretende informar a los visitantes, pero no necesariamente de propósitos comerciales; tales como: Free Internet Lexicon y Encyclopedia. La mayoría de los gobiernos e instituciones educacionales y sin ánimo de lucro tienen un sitio de información.
  • Sitio de noticias: Similar a un sitio de información, pero dedicada a mostrar noticias y comentarios de la actualidad.
  • Sitio pornográfico: muestra imágenes y vídeos de contenido sexual explícito.
  • Sitio de promoción web: usado para promocionar otras páginas webs por medio de publicación de artículos de opinión.
  • Sitio buscador: un sitio que proporciona información general y está pensado como entrada o búsqueda para otros sitios. Un ejemplo puro es Google, y el tipo de buscador más conocido es Yahoo!.
  • Sitio shock: incluye imágenes u otro material que tiene la intención de ser ofensivo a la mayoría de visitantes.
  • Sitio de subastas: subastas de artículos por internet, como eBay.
  • Sitio personal: Mantenido por una persona o un pequeño grupo (como por ejemplo familia) que contiene información o cualquier contenido que la persona quiere incluir: Facebook, Fotolog.
  • Sitio portal: un sitio web que proporciona un punto de inicio, entrada o portal, a otros recursos en Internet o una intranet.
  • Sitio Web 1.0: un sitio web estático. Un sitio donde el visitante sólo puede recorrer sus páginas sin posibilidad de interactuar con ellas.
  • Sitio Web 2.0: un sitio web interactivo. Un sitio donde el visitante puede hacer más cosas que recorrer sus páginas, en concreto, extraer información en la forma y criterios que estime oportuno y conveniente.
  • Sitio Web 3.0: un sitio web inteligente. Un sitio que reconoce al usuario y muestra una dinámica en función de sus gustos, preferencias, historial, el momento y el estado de ánimo en que se encuentre. Sólo está disponible en muy contadas redes privadas. Para Internet aún se está desarrollado pero se encuentra posiblemente en fases muy incipientes (fase de definición). Los sistemas de inteligencia artificial y de interacción hardware lo hacen tecnológicamente posible aunque nos encontramos todavía lejos de su implementación a gran escala.
  • Creador de sitios: es básicamente un sitio que permite crear otros sitios, utilizando herramientas de trabajo en línea, como PageCreative.
  • Sitio colaborativo o Wiki: un sitio donde los usuarios editan colaborativamente, donde los propios visitantes son los responsables de mantener la aplicación viva, usando tecnologías de última generación: pikeo, flickr, Wikipedia.
  • Sitio político: un sitio web donde la gente puede manifestar su visión política. Ejemplo: New Confederacy.
  • Sitio de rating: un sitio donde la gente puede alabar o menospreciar lo que aparece.
  • Sitios educativos: promueven cursos presenciales y a distancia, información a profesores y estudiantes, permiten ver o descargar contenidos de asignaturas o temas.
  • Sitio spam: sitio web sin contenidos de valor que ha sido creado exclusivamente para obtener beneficios y fines publicitarios, engañando o pretendiendo engañar a los motores de búsqueda.

Elementos de Diseño de una Aplicacion Web


corner head right
¿Qué es el diseño de aplicaciones web?

El diseño de aplicaciones web consiste en implementar sus necesidades, objetivos o ideas en Internet utilizando las tecnologías más idóneas según su proyecto. 

Las aplicaciones web ofrecen servicios a los usuarios de Internet que acceden utilizando un navegador web como I.Explorer, Firefox o Safari entre otros, dirigiéndose a una dirección de Internet donde obtendrán los servicios que buscan.

Las aplicaciones web pueden ser de acceso público como tiendas virtuales, diarios digitales, portales de Internet,... o de acceso restringido como son las intranets para mejorar las gestiones internas de su empresa como el reporte de horas de su personal, gestión de proyectos y tareas, control de presencia, gestores documentales,… o el uso de extranets para aumentar y mejorar el servicio con sus distribuidores, clientes, proveedores, comerciales y colaboradores externos.
Cada vez es más necesario adaptar el software y los sistemas online a la lógica de negocio de cada cliente. Por este motivo, no sólo es necesario que su empresa disponga de una web corporativa, un comercio virtual o una extranet para gestionar los pedidos de sus clientes o distribuidores, sino que es muy aconsejable una integración total con sus sistemas propietarios de facturación, nóminas, proveedores, previsiones, etc. para obtener un sistema integral y eficiente en todas las áreas de su corporación.

Gracias a la experiencia en distintos proyectos en Internet estamos en disposición de ofrecer soluciones tecnológicas adaptadas a las necesidades del cliente utilizando las tecnologías más acordes según las especificaciones de cada proyecto.

Tecnologías utilizadas en el diseño y desarrollo de aplicaciones web

Algunas de las tecnologías que se utiliza para el diseño de aplicaciones son:

Javascript, Microsoft SQL Server, Microsoft .NET, ASP, Oracle, Postgre SQL, DB2, XML, ActionScript, Java, MySQL, XHTML, CSS, Flash, PHP,...

Elementos de diseño de un Portal Web

Estas son algunas etapas que se sugieren para diseñar eficientemente un sitio; es conveniente no comenzar a escribir ninguna línea de código HTML antes de completar las primeras etapas.
El proceso de disenyo de un sitio Web

1. Delimitación del tema

 

Esta es la etapa crucial, se define de qué se va a tratar el Web, que cosas se incluirán y qué no. Tambien es el momento para definir tanto las audiencias (normalmente es mas de una) y los objetivos (intentando priorizar entre objetivos primarios y secundarios).

Si no se evalúa adecuadamente la cantidad de tiempo que se dispone contra la cantidad de tiempo requerida para elaborar un sitio de la magnitud deseada, el resultado puede ser desastroso. Muchos proyectos Web fracasan porque comienzan a crecer y crecer sus especificaciones, sin que haya detrás un trabajo ordenado de delimitación de contenidos.

Obsérvese lo siguiente: la mayoría de los sitios que son premiados con distinciones como "Lo mejor de ...", "La mejor página de la semana ...", "Top 5% del Web", son sitios que se dedican a temas muy especificos. La gente no quiere un montón de sitios que tengan referencias a otros lugares, la gente lo que busca es el contenido.
El proceso de disenyo de un sitio Web

2. Recolección de la información

 

En esta etapa se recolecta la información que se va a poner en el Web, de acuerdo a la especificación hecha en la etapa anterior. Es conveniente asociarse con alguien como un "proveedor de contenido", puesto que como mencioné antes hay mucha gente que si bien le tiene aversión a los computadores y que dispone de valiosísima e interesante información. Las organizaciones en general producen grandes cantidades de informacion, tambien en esta etapa hay que delimitar cuanta de la informacion historica, que ya no es relevante, sera incluida en el sitio web, por ejemplo, se puede definir que la informacion de mas de 3 años de antiguedad no sera incluida, etc.
El proceso de disenyo de un sitio Web

3. Agregacion y descripcion

 

Una vez que tenemos la información que irá en el sitio, comenzamos una clasificación apropiada . Aquí hay que encontrar un adecuado balance entre la linealidad y la jerarquización.
Aplicamos una clasificación de tipo lineal a fragmentos de información que requieren que la persona que los lee vaya avanzando poco a poco en el conocimiento de algo, como en un libro. Usualmente los pondremos en una misma página, usando FRAMES o una técnica similar si se estima apropiado. Aplicamos una clasificación de tipo jerárquica a trozos de información que sean complementarios o que dependan uno de otro, como secciones y subsecciones. Usualmente los pondremos en diferentes páginas.

Es importante aqui no centrarse en una unica forma de clasificar los documentos. Una serie de descriptores tienen que ser definidos. Ademas, un mismo documento puede pertenecer a varios valores de un mismo descriptotor. Si nos encontramos en esta etapa discutiendo sobre si un elemento de informacion va en una u otra parte, es que estamos cometiendo un error: debe ir en todas las partes donde un usuario razonable esperaria encontrarlo.
El proceso de disenyo de un sitio Web

4. Estructuración

 

En este punto se estructura la manera en que se unen las diferentes páginas, de acuerdo a la agregación de contenidos realizada en la etapa anterior. Se provee de ayudas para la navegacion, de enlaces que permitan la jerarquización que diseñamos y de enlaces entre elementos de una misma jerarquía si se desea.

Tambien es importante proveer de indices para cada descriptor que haya sido diseñado.
Desde este punto en adelante se puede trabajar en la implementación HTML propiamente tal.
El proceso de disenyo de un sitio Web

5. Metáfora

 

Existen muchas páginas que esperamos sean accesadas desde diferentes partes de nuestro servicio (por ejemplo: un glosario o una ayuda). Quizás en alguna parte del documento mencionamos a otra página y sería interesante que el usuario pudiera hacer click en esa referencia para ir a la página que estamos referenciando.

A esta etapa le llamamos "metáfora" pues permite referirse a una misma entidad (en este caso, una página HTML) en diferentes contextos. Estas paginas deben ser diseñadas cuidadosamente puesto que seran importantes para los usuarios al permitirles "saltar" dentro del sitio desde zonas logicamente distantes.
El proceso de disenyo de un sitio Web

6. Diseño y estilo gráfico

 

Un estilo gráfico adecuado puede ser algo importantísimo a la hora de hacer que la persona que nos visita se sienta cómoda, y como una manera de alivianar el contenido y hacerlo más digerible. Un sitio por mas contenido que tenga si no tiene un buen diseño grafico dificilmente lograra un lugar destacado entre otros sitios del mismo tipo.

En cuanto a la cantidad y tamaño de las imágenes, hay que adoptar un equilibrio. Hay sitios que se basan casi por completo en grandes y lentas imágenes GIF, otros que se ven bastante pobres pues son casi sólo texto, con lo que se desaprovechan los métodos multimediales . El esquema que se adoptará, (que se encuentra en algún lugar entre ambos extremos) varía de diseñador a diseñador y es un punto importante a considerar.

Otro punto importante en la etapa de definición de la parte gráfica, es intentar en lo posible mantener una cierta coherencia gráfica, y atreverse a innovar en cuanto a ella. Un color de fondo, un fondo o una distribución interesante de los elementos dentro de una página es algo que no se olvida con facilidad.
El proceso de disenyo de un sitio Web

7. Ensamble final

 

En este punto concretamos el diseño, con los últimos enlaces que sean necesarios e incorporamos el estilo gráfico a las páginas, se ensambla el sitio con una portada que sea capaz de presentar en una sóla página física al menos lo más relevante del sitio, se instalan links hacia la página personal del autor y/o su dirección de correo electrónico.

8. Testeo

 

Finalmente, es necesario revisar la coherencia general del sitio, que no hayan links "rotos" que no conduzcan a ninguna parte; revisar la redacción y ortografía de las páginas, hacer los ajustes necesarios para separar las páginas que sean demasiado extensas en páginas más pequeñas.
Para esta etapa, lo mejor es tratar de buscar usuarios que vayan a utilizar el sitio en la practica, y si eso no es posible, ponerse en el lugar de las personas que vean los documentos, y seguir los pasos que suponemos que ellos seguiran.

Elementos de diseño de una Pagina Web

El diseño de páginas web se trata básicamente de realizar un documento con información hiperenlazado con otros documentos y asignarle una presentación para diferentes dispositivos de salida (en una pantalla de computador, en papel, en un teléfono móvil, etc).


Estos documentos o páginas web pueden ser creadas:

  • creando archivos de texto en HTML, PHP, Asp, Aspx, JavaScript, JSP, Python, Ruby.

  • utilizando un programa WYSIWYG o WYSIWYM de creación de páginas.

  • utilizando lenguajes de programación del lado servidor, para generar la página web.

Etapas


Para el diseño de páginas web debemos tener en cuenta tres etapas: 

  • El diseño visual de la información que se desea editar. En esta etapa se trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes. Es importante que antes de trabajar sobre el computador se realice un boceto o prediseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño.
  • Estructura y relación jerárquica de las páginas del sitio web. Una vez que se tiene el boceto se pasa a 'escribir' la página web. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje de marcación de hipertexto o HTML. Los enlaces que aparecen subrayados en  documento son ejemplos de hipertexto, puesto que al pulsar sobre ellos conducen a otras páginas con información relacionada. La importancia de la estructura y arborescencia web radica en que los visitantes no siempre entran por la página principal o inicial y en ese caso el sitio debe darle la respuesta a lo que busca rápido, además permitirle navegar por el sitio.
  • Posicionamiento en buscadores o SEO. Ésta consiste en optimizar la estructura del contenido para mejorar la posición en que aparece la página en determinada búsqueda. Etapa no gustosa por los diseñadores gráficos, porque a diferencia del texto, aún para el año 2012 no se pueden tener nuevos resultados en los buscadores con sitios muy gráficos.
El HTML consta de una serie de elementos que estructuran el texto y son presentados en forma de hipertexto por agente de usuario o navegadores. Esto se puede hacer con un simple editor de textos (debe guardarse como texto plano, sin ningún tipo de formato y con extensión .html o .htm). Aprender HTML es relativamente fácil, así que es sencillo crear páginas web de este modo. Esta era la única manera de generarlas hasta que aparecieron, a mediados de 1996, algunos editores visuales de HTML, como MS FrontPage y Adobe Dreamweaver. Con estas herramientas no es necesario aprender HTML (aunque sí aconsejable), con lo cual el desarrollador se concentra en lo más importante, el diseño del documento. Todo esto teniendo en cuenta el nivel de programación en el diseño de las aplicaciones y del impacto visual que se quiere generar en el usuario.

Elementos

1.- Contenido:

La página no debe ser atractiva solamente en su parte visual, debe tener un contenido interesante que atraiga lectores. Ninguna página puede considerarse exitosa si no cuenta con un contenido apropiado y actualizado frecuentemente. El contenido da la posibilidad real de aumentar el número de visitas y hacer que los viejos visitantes consulten la pagina a menudo (porque encuentran siempre algo nuevo).

2.- Imágenes:

Deben usarse buenas fotografías, preferiblemente tomadas por un profesional. Es importante presentar imágenes que no estén pixeladas (baja resolución) o desenfocadas, esto da una idea sobre la calidad misma del sitio. También se pueden utilizar ilustraciones sencillas (imágenes vectoriales).

3.- Tipografía:

Es importante utilizar fuentes llamativas pero que conserven una fácil legibilidad. La tipografía debe llamar la atención del usuario pero debe conservar la línea de diseño del sitio. También es importante variar el tamaño de una misma fuente para resaltar secciones interesantes del texto.

 


4.- Botones e iconos:

Utilizar botones prácticos y representativos, así como iconos grandes y vistosos aumenta la facilidad de navegación en la página y se dan una guía clara a los usuarios, no es necesario colocar accesorios que no van a brindar un valor real, por ejemplo un reloj para clientes que se encuentran en el mismo uso horario.

5.- Animaciones y movimiento:

Para generar una sensación de dinamismo, es bueno utilizar elementos animados. Pero es importante no excederse con los elementos móviles, la cuota del 20% del total de la pagina es suficiente, porque pueden causar saturación, distraer la atención de las cosas importantes que se quieren decir y por ultimo sacar al usuario del sitio.

6.- Fondos claros y sencillos:

Los fondos claros o totalmente blancos facilitan la visualización, también dan un aspecto despejado a la página resaltando las imágenes, existe la tendencia a utilizar fondos negros para lecturas largas, para no cansar al lector con la luz del monitor.

7.- Enlaces a redes:

Es de gran ayuda para los usuarios incluir enlaces a redes sociales con las cuales se tiene familiaridad y se interactúa con regularidad, también a sitios de interés. Esto con el fin de generar comunidad y crear lazos de mutuo intercambio con sitios que pueden apalancar la oferta, como proveedores y clientes actuales.

8.-Sobriedad:

Una página debe permitir una fácil visualización de los contenidos (videos, imágenes, textos), saturar al cibernauta es contraproducente, si la información o contenido tarda en ser cargado es una visita menos y un potencial cliente o negocio que no conoció la oferta que se propone, tener un diseño sencillo con botones o enlaces en el lugar adecuado, genera un fácil reconocimiento y navegación que en posteriores visitas se traduce en una identificación con los usuarios.

Cada día nacen muchas páginas, por lo tanto cada vez existen más opciones en la red, no olvide que un sistema de contenido dinámico atrae y que es necesario actualizar la información de acuerdo. 
 

Fundamentos

 


Un correcto diseño web implica conocer cómo se deben utilizar cada uno de los elementos permitidos en el HTML, es decir, hacer un uso correcto de este lenguaje dentro de los estándares establecidos por la W3C y en lo referente a la web semántica. Debido a la permisibilidad de algunos navegadores web como Internet Explorer, esta premisa original se ha perdido. Por ejemplo, este navegador permite que no sea necesario cerrar las etiquetas del marcado, utiliza código propietario, etc. Esto impide que ese documento web sea universal e independiente del medio que se utilice para ser mostrado.


La web semántica, por otra parte, aboga por un uso lógico de los elementos según el significado para el que fueron concebidas. Por ejemplo se utilizará el elemento <P> para marcar párrafos, y <TABLE> para tabular datos (nunca para disponer de manera visual los diferentes elementos del documento). En su última instancia, esto ha supuesto una auténtica revolución en el diseño web puesto que apuesta por separar totalmente el contenido del documento de la visualización.


De esta forma se utiliza el documento HTML únicamente para contener, organizar y estructurar la información y las hojas de estilo CSS para indicar como se mostrará dicha información en los diferentes medios (como por ejemplo, una monitor de computadora, un teléfono móvil, impreso en papel, leída por un sintetizador de voz, etc.). Por lógica, esta metodología beneficia enormemente la accesibilidad del documento.


También existen páginas dinámicas, las cuales permiten interacción entre la web y el visitante, proporcionándole herramientas tales como buscadores, chat, foros, sistemas de encuestas, etc. y poseen de un panel de control de administración de contenidos. Este permite crear, actualizar y administrar cantidades ilimitadas de contenido en la misma.


Accesibilidad

 


El diseño web debe seguir unos requerimientos mínimos de accesibilidad web que haga que sus sitios web o aplicaciones puedan ser visitados por el mayor número de personas. Para conseguir estos objetivos de accesibilidad se han desarrollado pautas como las del W3C: Pautas de accesibilidad al contenido Web 1.0 WCAG.