Manual de Crear Página Web y Tienda Online Profesional

Manual de Crear Página Web y Tienda Online Profesional

Hemos ideado en WebArt.es este Manual de Crear Página Web y Tienda Online para que puedas aprender de forma rápida, amena y eficiente todos los fundamentos, los conceptos básicos y las principales características de las últimas tecnologías de Desarrollo y Diseño de Páginas Web.

La experiencia acumulada de WebArt.es en Crear Páginas Web y las frecuentes consultas de nuestros clientes sobre aspectos concretos relacionados con la Creación y el Diseño de Páginas Web nos ha llevado poco a poco a elaborar una Guía Tutorial Manual que antes enviábamos sólo a nuestros clientes y que ahora ponemos a disposición de toda la Comunidad.

Para que sea más fácil, hemos dividido nuestra Guía Tutorial en cuatro apartados:

  • Fundamentos Básicos e Introducción al Mundo Web. En este capítulo encontrarás pequeñas explicaciones de los conceptos más básicos del Mundo de las Páginas Web: ¿Qué es una Página Web?, ¿Cómo se hace una Página Web?, ¿Qué es una URL?, ¿Qué es FTP?, ¿Qué son los Clientes de Correo Electrónico?, ¿Qué es un Blog?, etc.
  • Contenido Elemental en el Diseño de una Página Web. En esta sección podrás encontrar las respuestas a preguntas generales del tipo: ¿Qué lenguaje utiliza una Página Web?, ¿Cuántos archivos contiene?, ¿Cómo se estructuran internamente?, ¿Cuáles son las tipografías y colores elementales?, ¿Qué es el Diseño autoadaptable?, etc.
  • Etapas Principales en la Creación de una Página Web o Portal Web. En este apartado descubrirás los Pasos Básicos que se deben seguir a la hora de Crear una Página Web: la Planificación, la Estructura, la Preparación de Contenidos, las Características de una Página Web efectiva, etc., así como la forma de Promocionar nuestra Página Web en Buscadores como Google y la posterior labor de Mantenimiento de la Página Web o Portal Web.
  • Cómo Mejorar el Posicionamiento de mi Página Web en Buscadores como Google. Por último, una vez tenemos creada nuestra Página Web hemos de intentar aumentar las visitas a nuestra Página Web. Porque en definitiva el buen posicionamiento en Google se traduce en más visitas, que es lo que seguro que a todos nos importa. Si quieres aprender más sobre cómo mejorar el Posicionamiento Natural de tu Página Web, en este artículo resolverás tus dudas.

Desde el equipo de WebArt.es esperamos que nuestra Guía Tutorial Manual sobre la Creación y Diseño de Páginas Web os guste y os resulte útil, nosotros hemos disfrutado mucho creándola para ayudaros a entender mejor cómo Crear una Página Web que sea atrayente a los visitantes de vuestro Portal Web.

Aunque es muy recomendable darle una lectura rápida a todos los capítulos de esta Guía Tutorial después de contratar cualquiera de nuestros Servicios de Crear Página Web, también es posible no tener que leer todos los contenidos, simplemente cuando tengas conocimientos avanzados sobre algún tema, puedes pasar al siguiente.

Manual de Crear Página Web.jpg

Fundamentos Básicos e Introducción al Mundo Web

En este capítulo encontrarás pequeñas explicaciones de los conceptos más básicos del Mundo de las Páginas Web: ¿Qué es una Página Web?, ¿Cómo se hace una Página Web?, ¿Qué es una URL?, ¿Qué es FTP?, ¿Qué son los Clientes de Correo Electrónico?, ¿Qué es un Blog?, etc.

Páginas y Portales Web

Una página o documento Web es todo archivo electrónico con un formato apropiado para su transmisión a través de los protocolos de la Web. Su principal característica es la utilización de enlaces o hipervínculos, referencias cruzadas que sirven para interconectar unos documentos con otros a través de la Red.

La programación de una Página Web normal se realiza mediante lenguajes de programación estándar como HTML5 y XHTML y puede incluir funciones especiales desarrolladas en otros lenguajes de programación tales como JavaScript, PHP, ASP, etc.

Un Portal Web es un conjunto de Páginas Web relacionadas entre sí y agrupadas alrededor de un dominio de Internet (un fragmento de la Red identificando con diversos dispositivos o equipos conectados a Internet). La navegación a través de las distintas páginas de un Portal Web se puede contener vínculos a otros Portales Web y dominios diferentes.

En una clasificación generalista, las Páginas Web se pueden dividir en estáticas (de contenido predeterminado o dinámicas (con un contenido cambiantes generado en el momento de ser solicitadas).

Generalmente, cualquier Página Web está compuesta tanto por texto como por otros elementos multimedia tales como imágenes, sonido y vídeos o animaciones.

Cómo se hace una Página Web

Toda Página Web es un documento electrónico (un archivo) elaborado mediante un lenguaje de programación (generalmente HTML5, lenguaje de marcado de hipertexto, u otros lenguajes especializados como JavaScript para generar contenidos dinámicos) cuyo objetivo es describir la estructura, contenido y formato de dicho documento.

Estos archivos se copian o “publican” en un ordenador especial conectado a Internet (conocido como Servidor Web) donde quedan a disposición de cualquier usuario de la Red. Desde el ordenador de cualquier usuario (ordenador cliente), se puede realizar una petición de consulta de dichos archivos. Dicha petición se realiza a través de un programa especial conocido como navegador o explorador Web que, a su vez, se encargará de interpretar el código almacenado en la Página Web y de representarla en la pantalla del ordenador.

Nota: para poder acceder a cualquier Página Web, será necesario conocer su dirección URL, una dirección que representa su ubicación dentro del entramado de servidores y Páginas Web de Internet.

Los distintos elementos de una Página Web (texto, hipervínculos, imágenes, etc.) se representan, describen o formatean mediante etiquetas HTML, palabras clave del lenguaje encerradas entre corchetes angulares (<Y>).

La primera especificación del lenguaje HTML la describió Tim Berners-Lee en el año 1991 y estaba compuesta por un total de 22 elementos.

En 1995, la organización conocida como W3C (World Wide Web Consortium) desarrolló el borrador de la versión 3.0 del lenguaje HTML. Esta organización adoptó desde entonces la labor de desarrollar, mantener y hacer públicos los distintos estándares evolutivos que han ido apareciendo del lenguaje. En diciembre de 1999, el W3C publicó una versión en castellano de su recomendación sobre la especificación de HTML 4.01, que es la versión actualmente reconocida como estándar.

En la actualidad, se empiezan a llevar a cabo desarrollos Web con la versión HTML 5, entre cuyas mejoras se encuentra el manejo de códecs para contenidos Web, etiquetas para manejar grandes conjuntos de datos visores para fórmulas matemáticas y gráficos vectoriales, etc.

URL e Hipervínculos

Toda página o documento Web de Internet está representado de forma única mediante una dirección URL (uniform resource locator, localizador uniforme de recursos), similar a una dirección postal ordinaria que describe la ubicación exacta en la que se encuentra dentro Internet.

Así, para consultar una página determinada desde un navegador Web, será necesario especificar su dirección URL o utilizar un hipervínculo, un elemento HTML de otra página donde se haya especificado la dirección URL de la nueva página a la que se desea acceder.

La estructura genérica de una dirección URL es:

esquema://equipo/carpeta/archivo por ejemplo: http://www.webart.es/empresa/sobre-nosotros.php

  • Esquema: generalmente indica el protocolo de red necesario para especificar el documento o recurso especificado en la dirección URL. Normalmente, este protocolo es http (protocolo de transferencia de hipertexto) para Páginas Web, aunque también pueden utilizarse esquemas tales como https (sistema http con seguridad añadida), ftp (para transferencias de archivos), file (que representa recursos disponibles en el propio ordenador donde se encuentra el navegador), etc.
  • Equipo: es un nombre de Dominio o dirección IP de un servidor específico en Internet con el que deseamos comunicar.
  • Carpeta/archivo: es la carpeta dentro del sistema de archivos del ordenador servidor y el nombre del archivo, de manera similar a como especificamos una dirección de recurso en el explorador de archivos de un ordenador.

Cuando se especifica una URL a una Página Web o recurso de Internet dentro de otra Página Web, se utiliza el término enlace, vínculo o hipervínculo. Estos vínculos pueden asociarse a un fragmento de texto dentro de la página (especificándolo mediante un formato distinto de texto, tradicionalmente en color azul y subrayado), asociado a una imagen o, en general, sobre cualquier elemento incluido en dicha página.

Tipos de Portales Web, también llamados Sitios Web

Una agrupación de documentos o Páginas Web que se almacenan en un mismo servidor se conoce con el nombre de “Portal Web”. Algunos de los principales tipos o categorías de Portales Web que se pueden encontrar en la Red son:

  • Escaparates comerciales: son sitios donde se muestran los servicios o productos que ofrece una determinada empresa o profesional. Habitualmente, forman parte de la imagen corporativa de la propia empresa, son un componente más de una campaña publicitaria o de promoción de marca a nivel global o, incluso, disponen una plataforma de comercio electrónico desde la que se desarrolla la actividad económica de dicha empresa. Para que uno de estos Portales Web tenga éxito, deben incluir información que ayude a los visitantes a conocer la empresa y sus productos.
  • Portales Web o Sitios Web de contenidos: muestran información sobre un tema específico o sobre diferentes temas relacionados o no entre sí. Pueden ser portales horizontales con todo tipo de informaciones variopintas como el de Yahoo! o el del Consejo Superior de Deportes. Un tipo particular de portal de contenidos son los blogs.
  • Comercio Electrónico: sitios exclusivamente dedicados a la compraventa de servicios o productos como por ejemplo Amazon o eBay.
  • Comunidades: sitios donde los visitantes participan de una manera activa creando sus propios contenidos. Ejemplos de este tipo de comunidades son los foros o las redes sociales: YouTube o Facebook.
  • Buscadores: sitios específicamente diseñados para la búsqueda de información en Internet (también conocidos como motores de búsqueda). Algunos de los buscadores más conocidos son Google o Bing, aunque muchos portales como Yahoo también incluyen sus propios motores de búsqueda.

Correo Electrónico

El Correo Electrónico es uno de los servicios de Internet más importantes. Su función es la de permitir intercambiar mensajes entre usuarios de la Red de una manera rápida y sencilla. Un mensaje de correo electrónico o E-Mail es un mensaje que se transmite entre dos usuarios a través de Internet, generalmente mediante un protocolo SMTP. Estos mensajes pueden transmitir tanto texto como todo tipo de documentos digitales.

Los orígenes del correo electrónico son anteriores a los de la propia red de Internet. En el año 1961, fue presentado en el Instituto Tecnológico de Massachusetts (MIT) una primitiva herramienta similar a la del correo electrónico que permitía compartir información entre ordenadores y almacenarla en archivos en el disco de cada equipo. En el año 1965 empezó el correo electrónico propiamente dicho y en el año 1966 ya se había extendido en distintas redes de ordenadores.

Para poder enviar y recibir un mensaje de correo electrónico, tanto el remitente como el destinatario deben disponer de una dirección de correo electrónico, proporcionada por un proveedor de correo. Dicho proveedor habitualmente suele ser el mismo proveedor de acceso a Internet (la compañía con la que el usuario contrata su acceso a la Red) o bien cualquiera de los servicios gratuitos de correo electrónico disponibles en Internet.

Una dirección de correo electrónico identifica de forma única a cada uno de los usuarios del servicio y su estructura genérica es la siguiente:

Nombre_usuario@proveedor.dominio por ejemplo: info@webart.es

Donde nombre_usuario es el nombre o código que se asigna de forma única a un determinado usuario del proveedor de correo electrónico, proveedor es el nombre del proveedor del servicio y dominio es el nombre de identificación de la red a la que pertenece el proveedor.

Para crear y recibir mensajes de correo electrónico se puede utilizar un programa específico denominado “cliente de correo” en el ordenador o una interfaz Web a la que se accede a través de un navegador.

Clientes de Correo y Correo Web

Un cliente de correo es un programa que se utiliza para leer y enviar mensajes de correo electrónico. Para poder hacerlo, el usuario deberá disponer de una cuenta de correo electrónico, una dirección en la forma nombre_usuario@proveedor.dominio proporcionada generalmente por el propio proveedor de acceso a Internet.

Para que un cliente de correo electrónico funcione correctamente, será necesario configurarlo introduciendo una serie de parámetros que proporcionará el propio proveedor de correo electrónico. Entre los más importantes de estos parámetros se encuentran:

  • Dirección de correo electrónico: en la forma nombre_usuario@proveedor.dominio.
  • Tipo de cuenta del servidor de correo electrónico: generalmente POP3, IMAP o HTTP.
  • Dirección del servidor de correo entrante: por ejemplo en la forma POP3.proveedor.dominio.
  • Dirección del servidor de correo saliente: por ejemplo smtp.proveedor.dominio.
  • Nombre de usuario y contraseña.

Algunos de los clientes de correo electrónico más conocidos del mercado son: Outlook, Mozilla Thunderbird o Eudora.

Generalmente, todos los proveedores de correo electrónico, además de permitir recibir y enviar mensajes mediante un cliente de correo, también ofrecen sus propias plataformas de correo Web desde las que acceder a dicho correo.

Aparte de ello, existen otros muchos servicios de correo electrónico gratuito, donde el usuario podrá crear cuentas de correo electrónico adicionales sin gasto alguno.

Entre los más conocidos podríamos citar:

  • Gmail: http://mail.google.com/mail?hl=es
  • Hotmail: http://www.hotmail.com
  • Yahoo!: http://mail.yahoo.es/
  • Terra: https://correo.terra.es/correoseguro/logincorreo.htm
  • Topmail: http://www.topmail.com/
  • nu: http://www.correo.nu/
  • Desde Internet: http://www.desdeinter.net/

FTP

FTP son las siglas en inglés de File Transfer Protocol (protocolo de transferencia de archivos), un protocolo para la transferencia de archivos entre ordenadores conectados a una red TCP. Gracias a este servicio, desde un ordenador determinado, llamado cliente, se puede conectar con otro equipo debidamente acondicionado llamado ordenador servidor y descargar de él de manera directa archivos o bien enviarle archivos, independientemente de los sistemas operativos instalados en cada uno de estos equipos.

El servicio FTP está pensado para ofrecer una elevada velocidad en la transferencia de archivos, aunque adolece de una seguridad deficiente, ya que el único requisito de seguridad necesario para establecer una conexión FTP es la especificación de un nombre de usuario y una contraseña, sin que exista ningún tipo de cifrado.

En el año 1971 el Instituto Tecnológico de Massachusetts (MIT) planteó las primeras bases del protocolo FTP, que quedaría definitivamente establecido en 1985, en la forma en que se conoce aún hoy en día.

La comunicación entre el ordenador cliente y el ordenador servidor es independiente del sistema de archivos que se utilice en cada uno de los equipos (y por tanto, no importan que los sistemas operativos sean distintos en cada caso) y, además, la conexión que se establece es de carácter bidireccional, es decir, se pueden enviar y recibir datos en cada una de las partes de manera simultánea.

El servidor FTP es un ordenador donde se instala un programa especial que permite el intercambio de datos entre diferentes ordenadores o servidores.

Como cliente FTP se puede utilizar cualquier navegador Web con capacidad para el intercambio de datos o recurrir a programas específicos disponibles en el mercado.

Blogs

Un blog o bitácora (como “cuaderno de bitácora”) es un Portal Web donde se recopila información generalmente monográfica procedente de uno o varios autores. Dicha información se actualiza con cierta periodicidad y se organiza de manera cronológica, mostrándose el último artículo publicado en primer lugar.

Cualquier artículo de un blog puede ser objeto de discusión, donde los lectores publican sus opiniones al respecto y el autor da su réplica estableciéndose de esta manera un diálogo diferido.

Antes de la aparición de los blogs en el panorama de Internet, ya existían otras herramientas con objetivos similares, tales como USENET o las listas de correos. En la década de los 90, se desarrollaron las primeras herramientas para la creación de foros en Internet, como por ejemplo WebEx.

Los primeros blogs empezaron a popularizarse en Estados Unidos en el año 2001 y, a partir de entonces, el fenómeno del Blogging empezó a popularizarse entre los internautas. A día de hoy se trata de uno de los servicios más difundidos en Internet. Numerosos personajes de todos los ámbitos de la vida pública mantienen sus propios blogs que son seguidos por cientos de miles de aficionados.

Hoy en día, existen numerosas herramientas en el mercado que ponen al alcance de cualquier usuario la posibilidad de crear y mantener fácilmente sus propios blogs. De manera genérica, podemos clasificar estas herramientas en dos categorías diferentes: las que ofrecen soluciones integrales que incluyen alojamiento gratuito (como Live Journal o Freewebs) o las que están formadas por un paquete de software que se instala en un servidor (como WordPress). En ambos casos, suele tratarse de herramientas de carácter gratuito.

Aparte de texto, un blog puede contener otro tipo de elementos multimedia como por ejemplo fotografías o vídeos. También es muy común que los blogs contengan enlaces a otras páginas o Portales Web con información complementaria, además de enlaces para acceder directamente a un formulario donde añadir comentarios a cualquier entrada, enlaces a los perfiles de los seguidores y contribuyentes del blog, enlaces para acceder a las entradas anteriores y posteriores a la página actualmente seleccionada del blog y enlaces para la suscripción a distintos orígenes de datos como RSS o Atom, etcétera.

Un aspecto importante que diferencia a los blogs de otros servicios de Internet es su carácter interactivo y colaborativo entre distintos usuarios y la frecuencia con la que se actualizan sus contenidos. Sin embargo, existen algunos riesgos potenciales que pueden poner en peligro el correcto funcionamiento de un blog, como son el spam (mensajes o entradas no solicitadas) los troles (personas que buscan provocar para crear controversia) los leechers (usuarios que intentan aprovecharse de los demás sin proporcionar ningún aporte de valía) y los fake (usuarios que se hacen pasar por otras personas).

Otras variedades del blog tradicional son los fotologs o fotoblogs (que incluyen fotografías), los videoblogs o blogs (con vídeos), los audioblogs (con audio) y los moblogs (blogs específicos para telefonía móvil).

Redes Sociales

De forma genérica, una red social es cualquier estructura social compuesta por un grupo de individuos conectados mediante diferentes tipos de relaciones como relaciones de amistado parentesco en algún grado o bien que se mueven por intereses comunes o comparten algún tipo de conocimiento en común.

Internet ha adoptado esta idea para, aprovechando las posibilidades que ofrece este recurso para romper las barreras de la distancia, desarrollar toda una plétora de redes sociales gracias a las cuales hoy más que nunca es posible mantenernos en estrecho contacto con nuestros familiares y amigos o fomentar nuestras relaciones laborales o comerciales.

Algunas de las redes sociales con más difusión hoy en día en Internet son las siguientes:

  • Facebook: es una red social de carácter gratuito que surgió en su origen para mantener en contacto a los estudiantes de la Universidad de Hardward y que hoy en día está abierta a cualquier usuario de Internet. Dentro de esta aplicación es posible participar en diferentes redes sociales, atendiendo a distintos criterios geográficos, culturales o económicos. Esta red se caracteriza por permitir el desarrollo de aplicaciones de terceros como plataformas de negocio, aunque sus resultados económicos se han puesto en entredicho.
  • Twitter: es una red social basada en el concepto de micro-blog, la publicación de entradas de texto en miniatura (limitadas a un máximo de 140 caracteres o tweets). Estas publicaciones se pueden realizar tanto desde el propio Portal Web de Twitter como desde otros servicios de telefonía móvil (mensajes SMS), con herramientas de mensajería instantánea o empleando cualquiera de las numerosas herramientas de terceros disponibles para tal propósito.
  • Google+: es una red social joven y reciente pero que registra la mayor tasa de crecimiento, principalmente por ser una red social creada, desarrollada y potenciada por Google.
  • Otras Redes Sociales: about.me, app.net, bebo, behance, buffer, delicious, devianart, digg, diigo, disqus, dribble, evernote, flickr, forrst, foursquare, friendfeed, github, ifttt, instagram, instapaper, issuu, kippt, linkedin, livejournal, metacafe, mixx, myspace, netvibes, ohloh, pinterest, plurk, reddit, scoop.it, scriptogr.am, sett, stumbleupon, Technorati, tumblr, vbulletin, vimeo, vk.com (vkontakte), weibo, yahoo, yammer, yelp, youtube, 500px… y la lista sigue creciendo…

Contenido Elemental en el Diseño de una Página Web

Como comentamos anteriormente, en esta sección podrás encontrar las respuestas a preguntas generales del tipo: ¿Qué lenguaje utiliza una Página Web?, ¿Cuántos archivos contiene?, ¿Cómo se estructuran internamente?, ¿Cuáles son las tipografías y colores elementales?, ¿Qué es el Diseño autoadaptable?, etc

Conceptos básicos – HTML5

Cuando escuches a cualquier experto hacer referencia al término Portal Web o Sitio Web, en realidad se está refiriendo al conjunto de archivos que pueden ser de texto, de imágenes, de audio, vídeo, etc. Todos estos elementos se unifican y dan forma a una Página Web mediante un lenguaje de etiquetado que se denomina en su forma más básica HTML.

Este lenguaje ha ido evolucionando a lo largo del tiempo y ya nadie habla de HTML simplemente, sino de sus versiones más punteras como HTML5 o su versión extendida, XHTML. Sea como sea, mediante este lenguaje se crean las llamadas Páginas Web, que son archivos de texto a los que se les asocia la extensión .htm o .html.

Estas páginas se almacenan en unos ordenadores especiales conocidos como servidores Web, que se encuentran conectados de manera permanente a Internet y disponen de un software y un hardware especiales que les permite establecer comunicación con un usuario de Internet cuando éste (o su navegador Web) solicita una página que se encuentra almacenada en sus unidades de disco.

Una de las principales ventajas del lenguaje de etiquetado HTML5 es que permite mostrar varios archivos de forma simultánea, texto, vídeo, gráficos, etc. , y además, cuenta con la posibilidad de crear lo que se conoce como enlaces o hipervínculos, que son los encargados de conectar diferentes Páginas Web entre sí o un Página Web con un archivo determinado.

Esto significa que es posible realizar un salto casi inmediato de una Página Web alojada en un ordenador en España a otra, por ejemplo, almacenada en el otro extremo del planeta en un servidor de Nueva Zelanda.

Como mencionamos anteriormente, el acceso a las Páginas Web de un Portal Web se realiza a través de un explorador o navegador Web, que es una herramienta de software que instalamos en nuestro ordenador y que se encarga de presentarnos toda la información correspondiente en un formato que comprendamos fácilmente.

Recuerde los términos fundamentales para comprender cómo funciona el Diseño Web:

  • Sitio Web o Portal Web es un conjunto de archivos.
  • Página Web es un archivo en formato de texto escrito en un lenguaje como HTML5 o XHTML.
  • Hipervínculo es un objeto que se utiliza para enlazar archivos, ya sea diferentes Páginas Web o una Página Web con un archivo.
  • Servidor Web es un ordenador conectado constantemente a Internet con un software y un hardware específicos para que los usuarios de la Web puedan consultar las Páginas Web y los archivos que se encuentran almacenados en sus discos.

Programación Web

A medida que el Diseño de Páginas Web ha ido evolucionando, se han ido desarrollando también nuevos lenguajes de programación que fundamentalmente han estado orientados a permitir una mayor interacción con los Portales Web, a facilitar una navegación más rápida y a mostrar mayor diversidad de contenidos al usuario. Así por ejemplo, surge la creación de lo que se conoce como Páginas Web dinámicas, es decir, páginas cuyo contenido no es fijo, estático, sino que cambia según las necesidades o deseos del usuario. Entre los lenguajes para construir este tipo de páginas podríamos citar asp y php, que básicamente recopilan la información solicitada por un usuario, realizan una búsqueda en una base de datos y confeccionan de manera instantánea una Página Web con los resultados obtenidos.

Entre los tipos de bases de datos más utilizados en la Web se encuentran MySQL (herramientas de código abierto), Oracle, Informix o Microsoft SQL:

Otros componentes fundamentales en la evolución de la Web son CSS (actualmente en su versión 3) que tiene como objetivo realizar una separación del contenido y el formato de las Páginas Web o DHTML (HTML dinámico), que persigue la consecución de Páginas Web con una mayor interactividad con el usuario. Éstos, suelen trabajar en conjunción con JavaScript, un lenguaje más especializado que nos permite realizar tareas tales como mostrar la fecha y la hora actuales en una Página Web, hacer que un texto se desplace por la pantalla y mucho más.

También en decadencia, nos encontramos con Java, un lenguaje que sirve para crear archivos ejecutables que se instalan en el ordenador del usuario y que sirven para realizar diferentes tareas, tales como mostrar animaciones u ofrecer utilidades como calculadoras, juegos, etc.

Resumiendo, los principales lenguajes de programación que encontraremos en la Web son:

  • ASP/PHP: para crear Páginas Web dinámicas.
  • MySQL, Oracle, Informix y Microsoft SQL: como bases de datos.
  • DHTML/CSS: para mejorar la interactividad de las Páginas Web y separar su contenido de su formato.
  • Javascritpt: un lenguaje de programación completo para realizar casi cualquier tarea que se pueda imaginar en una Página Web.
  • Flash: para animaciones en la Web.
  • Java: un lenguaje de programación que genera ejecutables que se almacenan en el ordenador del usuario.

Tipografía

Si bien el diseño Web sigue básicamente sus propias reglas en cierto modo independientes de otras disciplinas del diseño gráfico, en lo tocante a las tipografías, fuentes o tipos de letra, se ciñe a la regla principal de que todo el contenido debe ser suficientemente legible. Esta es sin duda una regla de oro en cualquier tipo de diseño ya que, si algo no se puede leer, carece de todo tipo de utilidad.

Básicamente, en el diseño Web definiremos dos tipos o grupos diferenciados de textos, los títulos y el cuerpo de texto o mensaje que deseamos transmitir.

En el primero de los casos, será conveniente que utilicemos un tipo de letra grueso y bien detallado. Deberíamos buscar que las tipografías seleccionadas para nuestros títulos concuerden a la perfección con el diseño global de nuestras Páginas Web. También tendremos que prestar especial atención al color, ya que en el caso de los títulos, tiene un componente de significado de gran importancia.

Para el cuerpo de texto emplearemos tipografías conocidas como “sin Serif” (por ejemplo, Arial o Verdana), es decir, tipos de letra carentes de cuñas, salientes y rebordes que sirven para adornar las letras en otras tipografías (como Times New Roman). El tipo de letra con el que está escrito el cuerpo de texto de esta Guía Tutorial es Avenir, un tipo de letra “sin Serif”. Un ejemplo de tipo de letra “con Serif” sería el siguiente: Times New Roman (diferente de Times New Roman).

Las tipografías lisas se leen mucho mejor en la pantalla del ordenador gracias a sus formas más rectas. Por el contrario, las tipografías “con Serif” tienen muchos detalles que, a tamaños pequeños, son difíciles de distinguir en una pantalla, no así sobre el papel escrito.

De la mano de la tecnología Flash, surgieron las tipografías conocidas como Pixel Fonts, unos tipos de letra especialmente diseñados para verse bien con un determinado tamaño que encaja con el tamaño de los píxeles de un monitor. Estas fuentes han tenido gran aceptación y es recomendable utilizarlas para el desarrollo de animaciones Flash, ya que hacen que los textos resulten muy legibles. No obstante, desde WebArt.es desaconsejamos usar la tecnología Flash ya que está en deshuso por no ser posible su lectura por los principales Buscadores.

Color

Algunas de las consideraciones que debería tener en cuenta a la hora de elegir los colores de su Portal Web son las siguientes:

  • Expansión. Es recomendable utilizar un fondo claro en nuestras Páginas Web, debido al carácter expansivo de los colores. Un texto sobre fondo claro es más legible y el lector se encontrará más cómodo con su lectura y no tendrá que forzar la vista.
  • Armonía. Cree una gama de colores para su Portal Web que esté compuesto por colores de la misma gama o tono.
  • Contraste. Combine diferentes colores para crear contraste, utilizando claros y oscuros, tonos cálidos y fríos, etc.
  • Significado de los colores. Cada color tiene un significado que, aunque varía ligeramente de unas culturas a otras, generalmente es reconocido por el tipo de sentimiento o emoción que transmite. Algunos ejemplos son:
  • Blanco. Potencia los colores que le rodean. Expresa paz, luz, felicidad, actividad, pureza e inocencia.
  • Negro. Simboliza silencio, misterio y a veces, lo impuro y maligno. Cuando tiene tonos brillantes confiere nobleza y elegancia.
  • Gris. Simboliza indecisión, ausencia de energía, duda y melancolía. Si se trata de colores metálicos hacen que una imagen sea lustrosa, dan impresión de frialdad y de brillantez, de lujo y elegancia.
  • Amarillo. Es un color luminoso, cálido, ardiente. Es el color del sol, la luz y el oro. Es animado, jovial, excitante, afectivo e impulsivo.
  • Naranja. Es fuerte, activo y radiante. Tiene un carácter acogedor, cálido, estimulante y una cualidad dinámica muy positiva y enérgica.
  • Rojo. Tiene vitalidad, expresa pasión y la fuerza bruta del fuego. Está ligado a la vida, expresa sensualidad, virilidad y energía, es exultante y agresivo. Simboliza pasión ardiente, sexualidad y erotismo.
  • Azul. Indica profundidad, frío. Expresa cierta sensación de placidez distinta al de las tonalidades verdes. Expresa armonía, fidelidad, serenidad, sosiego y sugiere optimismo. No obstante, cuando más claro se hace pierde atracción y se vuelve indiferente.
  • Violeta. Es el color de la templanza, la lucidez y la reflexión. Místico, melancólico e introvertido.
  • Verde. Color tranquilo y sedante. Evoca la vegetación y el frescor de la naturaleza.
  • Marrón. Se trata de un color masculino, severo y confortable. Evoca ambientes otoñales y transmite una impresión de gravedad y equilibrio. Es un color realista que representa la tierra que pisamos.

Composición

Es importante que pensemos en la forma en que vamos a estructurar nuestra Web, qué colores vamos a utilizar en cada sitio y por qué, cómo vamos a espaciar nuestros textos, etc.

El texto no debería estar demasiado pegado a los elementos gráficos, ni tampoco tener un interlineado bajo, es decir, pegar demasiado unas líneas a otro. En caso contrario, el texto se volverá confuso para su lectura.

El espaciado entre líneas debería ser igual o superior a un 20 por ciento del tamaño de letra. Es decir, para una letra de un tamaño de 10 puntos, el interlineado debería ser de 12 puntos.

La posición de los elementos que componen nuestra página es uno de los aspectos más importantes a la hora de llevar a cabo un diseño. No es lo mismo ubicar una imagen arriba o abajo, con un texto al lado o sin él, que tenga un tamaño grande o pequeño, y un largo etcétera.

Una imagen grande servirá para mostrar algún aspecto de nuestra Página Web que deseemos destacar. Luego, podremos añadir imágenes pequeñas para embellecer y dotar de detalles las partes que tienen más texto.

La colocación de imágenes pequeñas cerca del texto cumple dos funciones: que el usuario tenga una información visual de lo que va a leer, atrayendo su atención hacia donde nosotros queramos y hacer más atractiva la página. Cualquier usuario se amedrentará ante una página llena de texto y el resultado será, con toda seguridad, que cambie de página o incluso de Portal Web.

Otras consideraciones

El éxito del diseño de un Portal Web dependerá en gran medida de nuestra pericia a la hora de manejar los criterios artísticos y estéticos genéricos de cualquier disciplina de diseño y específicos del medio concreto en el que deseamos transmitir nuestras ideas, la Web.

Aparte de lo ya mencionado, algunas consideraciones adicionales para el diseño de nuestros Portales Web serían las siguientes:

  • El peso de las páginas. Debemos mantener limitado el peso (tamaño de los archivos) de nuestras Páginas Web para que su carga no resulte demasiado lenta. ¿Cuál es el tamaño adecuado? Haga pruebas y depure su material hasta que su tiempo de carga sea el menor posible. Un usuario no esperará 30 segundos hasta que aparezca la información de una página. Realice sus pruebas con la conexión más lenta que pueda.
  • Tratamiento de imágenes. Para no aumentar artificialmente el tamaño de nuestras páginas, debemos realizar un tratamiento previo a nuestras imágenes para reducir al máximo su tamaño manteniendo a la vez una calidad aceptable. Trataremos este tema con mayor detenimiento más adelante en este libro.
  • Consistencia. Debemos lograr que nuestros Portales Web en su globalidad presenten una coherencia y un aspecto que le confiera un carácter distintivo. En esta labor, nos ayudará la utilización de hojas de estilo CSS3, de las que hablaremos más adelante en este libro. Para mantener la consistencia en un Portal Web tenga en cuenta la utilización de gráficos del mismo estilo en sus páginas, fondos y colores uniformes, familias de fuentes que representen los distintos tipos de texto que utilizaremos en cada página, enlaces y barras de navegación que tengan el mismo aspecto y se sitúen en los mismos lugares, etc.

Internet Móvil

Hoy en día, Internet ha superado sus propias fronteras. Internet Móvil significa que ahora tenemos acceso a información almacenada en cualquier punto del mundo independientemente de dónde nos encontremos. Ya no estamos limitados a estar sentados delante de nuestro ordenador de sobremesa. Los dispositivos móviles nos permiten llevar encima Internet a donde quiera que vayamos.

En enero de 2010, el porcentaje de acceso a Internet desde dispositivos móviles, apenas alcanzaba un 1,7 por ciento. En enero de 2011 este porcentaje era ya del 4,3 por ciento y en sólo un mes se duplicó alcanzando el 8,5 por ciento. En octubre de 2012 los dispositivos móviles ya se habían convertido en el medio más habitual para acceder a Internet, utilizado a diario por un 69 por ciento de usuarios según informes del Mobile Web Watch. Según este estudio, la distribución del uso de Internet desde los principales dispositivos móviles era la siguiente:

  • Teléfonos inteligentes o SmartPhones: 61 por ciento.
  • Ordenadores Portátiles y Sobremesa: 37 por ciento.
  • Tablets, Tabletas Android o iPads : 22 por ciento.

Las economías emergentes (como China, Brasil, Sudáfrica o Rusia), se encuentran a la cabeza del uso de dispositivos móviles, representando más de un 70 por ciento de media. El acceso a Internet desde teléfonos móviles también ha crecido en las economías europeas.

Estos datos ponen de manifiesto la necesidad de que nuestros Diseños de Páginas Web tengan en cuenta esta nueva diversidad de dispositivos desde los que es posible acceder a nuestros Portales Web o Sitios Web. El tamaño del monitor de un PC o de la pantalla de un ordenador portátil dista mucho del de una Tablet estándar y, no digamos del de la pantalla de un Teléfono Móvil.

De esta diversidad surge el concepto de Diseño Web Auto-Adaptable (también llamado Adaptativo, Sensible o Responsive), que se traduce en Crear los Diseños de las Páginas Web enfocados a la construcción de Portales Web que proporcionen una experiencia óptima (facilidad de lectura y de navegación) a lo largo de una amplia gama de dispositivos. Este será el tema de las dos siguientes secciones.

Elementos del Diseño Web para Móviles  Auto-Adaptables (Sensible o Responsive)

Un Portal Web construido bajo los criterios del Diseño Web Auto-Adaptable utiliza consultas media de CSS3.

Para desarrollar estas consultas en CSS3, se utiliza una extensión de la regla @media para adaptar el diseño al entorno en el que se visualizan las páginas, junto con la utilización de cuadrículas fluidas basadas en proporciones e imágenes flexibles:

  • Las consultas media de CSS3 permiten que las Páginas Web utilicen diferentes reglas de estilo CSS basadas en las características del dispositivo en el que se está mostrando el Portal Web, principalmente, en la anchura del navegador.
  • El concepto de cuadrícula fluida hace que el tamaño de los elementos de la Página Web se exprese en unidades relativas, como porcentajes o puntos em, en lugar de unidades absolutas como píxeles o puntos.
  • Las imágenes flexibles también se redimensionan con unidades relativas (hasta un máximo del 100 por ciento), evitando de esta manera que se extiendan fuera del elemento que las contiene.

Para ver un ejemplo de cómo se adapta un Diseño Web a distintos dispositivos y tamaños, visita este enlace: http://webart.es/herramientas-web/pagina-web-autoadaptable/

Otras características que debe seguir cualquier Diseño Web Auto-adaptativo son las siguientes:

  • Seguir las estrategias “primero los dispositivos móviles”, “JavaScript discreto” y “Mejoras progresivas”. Los navegadores de los teléfonos móviles más básicos no interpretan JavaScript ni las consultas media, de forma que lo recomendable es empezar por crear un Portal Web básico, para mejorarlo a continuación para SmartPhones y finalmente alcanzar el diseño para PC (en lugar de crear desde el principio un diseño complejo e ir degradándolo paulatinamente hasta adaptarlo a los teléfonos móviles más básicos).
  • Mejoras progresivas basadas en el navegador, el dispositivo o la detección de características. Cuando un Portal Web debe soportar los dispositivos móviles más básicos que no disponen de JavaScript, la detección del navegador (agente de usuario) y la detección de dispositivos móviles, son dos de las formas de deducir si determinadas características HTML y CSS serán soportadas (como base de un método progresivo de mejora). Sin embargo, estos métodos no son totalmente fiables.

El Diseño de Páginas Web Auto-Adaptables o Sensibles

Como ya hemos mencionado, en la actualidad los Diseños de las Páginas Web deben adaptarse a diferentes dispositivos con diferentes formatos de presentación de sus páginas (teléfonos móviles o SmartPhones, tablets o iPads, Ordenadores Portátiles o de Sobremesa, etc). Por esta razón, es necesario desarrollar herramientas que eviten que los diseñadores tengamos que realizar un Diseño Web diferente para cada dispositivo, de manera que un mismo diseño único se adapte perfectamente (mediante técnicas específicas de Diseño y programación) a todos los dispositivos de manera simultánea.

Diseñar un Portal Web diferente para cada plataforma, no sólo conllevaría un desperdicio excesivo de tiempo para el diseñador, sino que incurriría en unos costes prohibitivos para el proyecto de desarrollo de un Portal Web.

Un Diseño Web Auto-Adaptable, o Sensible, eliminará todos estos problemas ofreciendo una nueva capacidad de responder con un Diseño Adaptado a cada tamaño específico del Dispositivo que utilice el visitante: un diseño único que se adapte perfectamente a todos los posibles dispositivos. Esta tendencia hará mucho más sencilla la vida de todos los diseñadores.

La Importancia de la Imagen Web Corporativa

Las Páginas Web son cada vez más relevantes para el mundo de los negocios, sobre todo, para aquellos que operamos por Internet. Por lo tanto, nuestros Diseños Web deberán ir asociados a la imagen que desea transmitir nuestro cliente a sus visitantes y tendremos que buscar formas de reconocimiento de marcas a través de logotipos y otras herramientas que resalten sus bondades, personalidad y principios. Además, debemos buscar siempre la Originalidad.

Las empresas quieren que su marca sea claramente perceptible. Los visitantes deberían ser capaces de reconocer una marca en cuestión de segundos. Las nuevas tendencias en Diseño Web se esperan que se centren más en el diseño de la marca en lugar de limitarse a un Diseño Web que simplemente siga las tendencias genéricas actuales.

De hecho, los Diseñadores de Páginas Web nos centramos cada día más en la selección de los elementos que complementan a la propia marca y realzan la belleza del logotipo. Y por supuesto, también nos centramos en la representación del propio negocio a través del Diseño de sus Páginas Web.

Esta tendencia se espera que dure mucho tiempo por lo que es muy importante que exista una comunicación fluida desde los responsables de marca de las empresas hacia los diseñadores para poder desarrollar Portales Web que representen fielmente las cualidades de una firma.

Etapas Principales en la Creación de una Página Web o Portal Web

Como ya comentamos, en este apartado descubrirás los Pasos Básicos que debes seguir a la hora de Crear una Página Web o cualquier otro tipo de Portal Web como son: la Planificación, la Estructura, la Preparación de Contenidos, las Características de una Página Web efectiva, etc., así como la forma de Promocionar nuestra Página Web en Buscadores como Google y la posterior labor de Mantenimiento de la Página Web o Portal Web.

Planificación antes de Crear la Página Web

Antes de dar comienzo al trabajo de programación de las Páginas de un Portal Web (Diseño del código HTML5 o Scripts), es necesario planificar con el mayor Detalle posible las distintas etapas del proyecto. En rasgos generales, los conceptos que deberías tener en cuenta a la hora de Diseñar una Página Web o un Portal Web son los siguientes:

 1 . Definición de Objetivos de la Página Web

¿Cuál es el propósito del Portal Web o Sitio Web? En esta etapa, debes definir claramente el porqué del Portal Web: proporcionar una determinada ayuda o información al visitante, crear un escaparate comercial de una empresa, una publicación oficial, etc.

¿A quién va dirigido? A continuación, será necesario definir cuál es el público potencial del Portal Web. Por ejemplo, no es lo mismo un Portal Web dirigido a un público infantil que una herramienta de venta por catálogo.

2 . Definición de la Estructura de la Página Web

En esta etapa, resultará conveniente realizar un boceto o diseño de cuál va a ser la estructura física del sitio. Es aconsejable dividir la información por categorías independientes entre sí y ofrecer un fácil acceso a las zonas que puedan resultar de mayor interés para el visitante. Una vez definida esta estructura, podremos tener una idea aproximada del material (textos, imágenes, etc.) que será necesario para cada página del sitio.

3 . Definición del Diseño de la Página Web

En esta etapa se definirán los criterios estéticos y de diseño del Portal Web: esquemas de colores, tipografías, imágenes comunes, etc. De esta forma, se proporcionará un aspecto homogéneo y profesional al sitio.

4 . Comprobación de Requisitos de la Página Web

Finalmente, será necesario realizar un pequeño inventario de todas las herramientas, materiales y demás requisitos imprescindibles para la elaboración del Portal Web: editores HTML, programas de retoque fotográfico, imágenes y textos, autorizaciones y demás exigencias legales, etc.

Estructura del Portal Web o Sitio Web

Una vez definida la estructura global del Portal Web, será necesario definir la forma y características de cada página en particular. El objetivo es ofrecer un producto profesional y atractivo teniendo en mente el sector de público al que va dirigido.

Una buena idea inicial podría ser investigar en Internet cómo se han diseñado otros Portales Web similares o de contenido equivalente al que se desea desarrollar. No se trata, por supuesto, de duplicar su diseño sino simplemente de comprobar cómo pueden encajar nuestras propias ideas sobre colores, contenido gráfico, tipografías, etc. con la temática que pretendemos abordar. A la hora de definir un buen diseño para un Portal Web es preciso fijar como objetivo principal el conseguir un equilibrio entre el atractivo de imágenes y la importancia del contenido que se desea transmitir. Imágenes y animaciones pueden causar un impacto visual interesante al principio, pero son lentas de cargar y, si no van acompañadas de un contenido de interés para el visitante carecen de utilidad.

Con todas estas nociones, se confeccionará un esquema básico de los elementos que se desean mostrar en cada sección del Portal Web, acompañándolo preferiblemente de un boceto a mano del aspecto que debe presentar cada una de las páginas del sitio:

  • Cabeceras y títulos. Elementos visuales que proporcionen al visitante una idea rápida y clara de cuál es el contenido de la página.
  • Información de contacto. Dirección de correo electrónico u otros datos de contacto para que el visitante pueda contactar con nosotros en caso de que necesite ampliar algún tipo de información.
  • Elementos de navegación comunes. Barras de navegación que proporcionen un acceso rápido a las principales secciones de interés del sitio.
  • Composición de texto e imágenes. Estructura general de distribución del texto y elementos gráficos dentro de cada página.

Recopilación y Preparación de Contenidos

Una vez definida la estructura y los criterios de diseño de un Portal Web, comienza la etapa de recopilación de todos los elementos (imágenes, textos, animaciones, sonidos y demás elementos multimedia) que poblarán las distintas Páginas Web de nuestro Portal.

Los elementos más comunes que se deben tener preparados antes de Crear una Página Web son:

  • Texto: algunos de los formatos de texto más extendidos son texto en bruto (txt), formato de texto enriquecido (rtf) y Microsoft Word (doc o docx).
  • Imágenes: todos los navegadores reconocen de forma predeterminada los formatos de imagen JPG, PNG y GIF.
  • Sonidos: los formatos más comunes son MP3, MP4 y WAV.
  • Animaciones y Vídeo: los formatos más comunes para su utilización en Internet son: AVI y RealVideo.

La utilización de elementos gráficos en una Página Web realza y da vistosidad a su contenido. No obstante, utilizar demasiadas imágenes o escogerlas demasiado grandes (en cuanto a su tamaño de archivo, no en cuanto a dimensiones) puede aumentar de tal manera el tiempo de descarga de la página que cause un efecto contraproducente.

Los elementos gráficos más habituales que puede encontrar en cualquier Página Web son:

  • Fondos: mosaicos para utilizar como fondo de una Página Web.
  • Viñetas: son los puntos que aparecen a modo de marca a la izquierda de cada punto de una lista de viñetas.
  • Botones: sirven para que el usuario realice alguna acción sobre la Página Web haciendo clic sobre su superficie.
  • Flechas: se utilizan generalmente para representar botones que permiten navegar a través de las páginas de un sitio.
  • Iconos: elementos gráficos que generalmente representan determinadas opciones o situaciones habituales en una Página Web (enviar un E-Mail, página en construcción, novedad, tema de interés, etc.) o simplemente como elementos decorativos.
  • Líneas de división: Líneas o gráficos para realizar una separación entre dos secciones de la página.

Programación Web

Una vez definida la Estructura de nuestro Portal Web y preparados todos los materiales necesarios, podrá dar comienzo la etapa de programación propiamente dicha.

En la actualidad, las herramientas de edición de Páginas Web evitan la necesidad de conocer en profundidad lenguajes de programación como HTML5 o CSS3. Con un programa como Dreamweaver o WebMatrix, se construyen las distintas páginas utilizando la interfaz gráfica de la aplicación, que presenta todos los elementos tal como se visualizarán en el navegador.

Habitualmente sólo es necesario editar el código de forma manual para realizar pequeños retoques o para incluir determinadas rutinas o scripts personalizados.

Durante la programación de un Portal Web, se podrían distinguir las siguientes etapas:

  • Adecuación y preparación previa de los materiales. En esta etapa, se revisarán y pulirán los textos que se desean incluir en el Portal Web, se retocarán las imágenes adaptando su tamaño y calidad a las necesidades de su publicación en la Web y se prepararán los restantes elementos tales como vídeos, animaciones flash, iconos animados, etc.
  • Preparación de plantillas de trabajo. Con objeto de mantener la coherencia y homogeneidad a lo largo de todo el Portal Web, será necesario preparar las plantillas que darán forma a las distintas páginas del sitio. Se crearán las páginas de marcos que configurarán la estructura global del sitio y las páginas comunes tales como barras de navegación o cabeceras. Dependiendo del editor seleccionado, también se crearán los temas u hojas de estilo que aseguren la coherencia de formatos de diseño (colores, estilos de texto, etc.).
  • Composición de páginas. Finalmente, lo único que resta es generar el contenido de las distintas páginas: colocar texto e imágenes, establecer los vínculos entre las páginas, crear tablas, listas, formularios y demás componentes, etc.

Prototipo

Completar la programación de un Portal Web, no significa que esté listo para su publicación. Esta primera versión del Portal Web (o prototipo) debe ser analizada y probada en busca de posibles incoherencias, defectos de programación y, en general, en busca de cualquier cambio estético o funcional que se desee aplicar al diseño previo.

Algunos de los aspectos más importantes a comprobar son los siguientes:

  • Validación: este proceso consiste en comprobar que el código de nuestras Páginas Web se ajusta a los estándares de programación del lenguaje. En el Portal Web de la organización del W3C, encontrará herramientas para la validación del código HTML5, del código CSS3, de los enlaces y de la accesibilidad de sus Páginas Web.
  • Pruebas en distintos navegadores: con casi toda seguridad, sus Páginas Web se verán de manera distinta en los diferentes navegadores del mercado (y en las diferentes versiones de cada navegador). Debería asegurarse de realizar pruebas de sus Portales Web al menos en las principales versiones de los navegadores: Internet Explorer, Firefox, Chrome, Opera y Safari. Puede encontrar estadísticas de uso de los distintos navegadores escribiendo el término “ranking navegadores” en su buscador de Internet preferido.
  • Probar distintas configuraciones: es necesario tener en cuenta que distintos usuarios pueden utilizar distintas configuraciones en sus equipos y navegadores:

– Sistemas operativos: ten en cuenta, por ejemplo, que cada sistema operativo puede utilizar un conjunto de fuentes y complementos diferentes. Para probar tu Página Web en distintos sistemas operativos puedes utilizar máquinas virtuales como Virtual PC, WMware o iEmulator.

– Configuración de navegadores: ten en cuenta también que algunos navegadores pueden tener desactivadas por elección del usuario algunas características como presentación de imágenes, JavaScript, cookies, CSS3, etc.

– Otras configuraciones: ten en cuenta además otras configuraciones del sistema como las posibles resoluciones de pantalla o el número de colores.

  • Otras consideraciones: piensa en cómo se comportará tu Portal Web en redes lentas, en dispositivos móviles o en herramientas tales como lectores de pantalla.

Soluciones Tecnológicas

Cada Desarrollo de una Página Web puede requerir de una serie de soluciones tecnológicas diferentes. Todos los Desarrolladores de Páginas Web tenemos la obligación de mantenernos informados sobre cuáles son las últimas tendencias y tecnologías disponibles para el Diseño Web, aunque también es imprescindible que mantengamos en todo momento la perspectiva sobre la audiencia potencial de cada uno de nuestros desarrollos y su relación con la tecnología informática y de Internet en particular. Si desarrollamos un Portal Web altamente tecnológico orientado a usuarios con pocos conocimientos informáticos (y que probablemente utilicen equipos, sistemas operativos y navegadores anticuados) estaremos abocados al fracaso. Por el contrario, si optamos por una solución simplista y conservadora en un Portal Web orientado a usuarios altamente cualificados, estaremos perdiendo credibilidad y la confianza de nuestros clientes.

Consideremos aspectos como estos sobre el Desarrollo del Portal Web:

  • ¿El contenido del Portal Web va a ser estático o dinámico? En el primer caso, bastará con las tecnologías Web convencionales (HTML5 + CSS3). En el segundo caso, tendremos que recurrir a lenguajes de programación más avanzados como PHP, ASP o JSP.
  • ¿El Portal Web incluye Tienda Online o Comercio Electrónico? No olvides entonces un catálogo con productos y precios, la sección de soporte técnico y garantías y un software de carro de la compra junto con las herramientas de pago correspondientes (transferencias, pago online, etc.).
  • ¿Necesitas soluciones de la Web 3.0? Esto incluye herramientas tales como servicios de publicidad, de distribución de contenidos, blogs, gestión de contenidos, sindicación de contenidos (RSS, Atom, Bloglines), programación Ajax, páginas dinámicas con Ruby on Rails, vinculación con redes sociales, XML, RDF y microformatos, inteligencia artificial, Web semántica, etc.

Implementación

Una vez desarrollado un Portal Web será necesario exponerlo en Internet para que los usuarios de la Red puedan visitarlo. Esta operación se conoce con el nombre de publicación.

A la hora de publicar un Portal Web, se puede elegir entre utilizar nuestro propio equipo como servidor o contratar los servicios de una empresa externa como WebArt.es que albergue las páginas del Portal Web.

La primera opción requiere un equipo informático y unos conocimientos técnicos que quedan fuera del alcance de esta Guía Tutorial sobre la Creación y Diseño de Páginas Web.

Por lo general, la mayoría de los proveedores de Internet, disponen de servicios de Hosting o Alojamiento Web preparados para albergar los Portales Web de sus clientes. El coste de este servicio es relativamente bajo o incluso gratuito y depende, por lo general, de si el contenido del sitio está dedicado a fines comerciales o si se trata simplemente de una página personal.

A la hora de escoger un servicio de Alojamiento Web o Hosting, es conveniente tener en cuenta los siguientes requisitos:

  • Servicios y características técnicas del Servidor Web. La mayoría de los proveedores de Hosting ponen a nuestra disposición todas las herramientas necesarias para que nuestro Portal Web funciones correctamente. No obstante, antes de contratar este servicio, sería conveniente informarnos de si cumple con los requisitos técnicos necesarios como, por ejemplo, si permite la utilización de complementos y extensiones de FrontPage o si permite ejecutar cualquier otro tipo de Script que hayamos programado en el sitio.
  • Capacidad de Almacenamiento. Muchos proveedores de Internet ofrecen un servicio de alojamiento gratuito a sus clientes limitado a fines no comerciales y con restricciones de tamaño. Dichas restricciones suelen ser más que suficientes para albergar la mayoría de las necesidades. No obstante, si nuestro Portal Web tiene unas dimensiones considerables (por ejemplo, si tiene una elevada carga de imágenes o incluye vídeos de larga duración) es conveniente informarse de cuál es el tamaño máximo permitido y del coste adicional que podría representar ampliar dicho límite.
  • Herramientas Adicionales. Si pretendemos realizar un seguimiento del funcionamiento de nuestro Portal Web, el proveedor de Hosting debería proporcionarnos herramientas para el análisis de uso del sitio: contadores de visitas, estadísticas de páginas más visitadas, etc.

Características de un Portal Web efectivo

Desarrollar un Portal Web que tenga éxito no es sólo cuestión de una programación técnicamente correcta, sino que requiere que tengamos en cuenta toda una serie de cuestiones de diseño tanto genéricas como específicas del entorno Web. Entre los aspectos más destacados podríamos citar:

  • Que el contenido sea fácil de encontrar, de leer, de imprimir o de descargar. Esto se consigue con un diseño claro y limpio, un sistema de navegación claro, sencillo y coherente a lo largo de todo el Portal Web y con una elección adecuada de tipografías, colores y contrastes.
  • La mayoría del contenido tiene que llamar inmediatamente la atención del visitante, aunque es aceptable que parte de dicho contenido se encuentre parcialmente oculto.
  • El sistema de navegación debe ser sencillo e intuitivo.
  • El contenido y el formato son inseparables. El formato debe mejorar el contenido y el contenido dar sentido al formato.
  • Ofrezcer algo que no esté disponible en otros Portales Web. Ofrezcer una experiencia enriquecedora para el visitante.
  • Respetar el tiempo del usuario. Las Páginas Web deberían tener tiempos de carga bajos, de menos de 5 segundos. Evitar que la experiencia de navegación acabe por frustrar a sus visitantes.
  • Proporcionar una experiencia interactiva que anime a los visitantes a regresar nuevamente al Portal Web. Intentar establecer con ellos un diálogo y una relación a largo plazo.

Y no olvidar tampoco revisar los siguientes aspectos:

  • Integrar el diseño del Portal Web con otros elementos de diseño de la empresa u organización a la que pertenece (identidad corporativa, esquemas de colores, tipos de elementos gráficos, etc.).
  • Captar la atención del visitante a lo largo de todas las páginas del Portal Web. Asegurarse de utilizar una jerarquía de información lógica.
  • Asegurarse de cumplir con los estándares de accesibilidad para no apartar a ningún colectivo de visitantes posible.

El Diseño Modular de la Página Web

Busca una revista o un periódico. Si observas con atención, verás que los elementos de diseño de las distintas páginas de estas publicaciones (el texto, las fotografías y cualquier otro elemento gráfico) están organizados en columnas, siguiendo una composición modular, como colocados sobre una especie de cuadrícula. Una cuadrícula es una estructura de composición compuesta por bloques verticales y horizontales que dividen un documento en filas, columnas y márgenes. Y por supuesto, este mismo concepto de diseño modular se puede ampliar al diseño de Páginas Web.

Si tenemos que organizar gran cantidad de contenido en una Página Web determinada o en varias páginas a lo largo de un Portal Web, es prácticamente obligatorio que utilicemos algún tipo de estructura predefinida para asegurarnos que los visitantes sean capaces de acceder y leer fácilmente esa gran cantidad de información.

Repetir estructuras basadas en la misma cuadrícula en las diferentes páginas de un Portal Web, hace que todas las páginas (aunque tengan un contenido diferente) tengan similitud entre sí, asegurando una sensación de congruencia a lo largo de todo el Portal Web. Una cuadrícula establece un orden, define los límites de los elementos de una página y los mantiene organizados.

En cada página, podemos optar por seguir de manera estricta el diseño marcado por nuestra cuadrícula o romperla ocasionalmente de manera intencionada para aportar interés visual o variación en un momento dado. Sin embargo, si rompemos con demasiada frecuencia este esquema, perderemos el armazón estructural que proporcionan.

Generalmente, en un Portal Web de grandes dimensiones (con numerosas secciones con varias páginas en cada sección), utilizaremos varias cuadrículas diferentes.

Derechos de Autor

Una de las fuentes más utilizadas para obtener recursos (por ejemplo recursos gráficos) y nuevas tecnologías para el diseño y desarrollo de un Portal Web se encuentra en la propia red de Internet. Sin embargo, antes de copiar cualquier material, hay que tener en cuenta las derivaciones legales que esto implica.

Dado que el uso extensivo de la red de Internet es relativamente reciente, la legislación que regula su funcionamiento muestra aún numerosas lagunas. Sin embargo, al igual que en cualquier otro medio de comunicación, la información disponible en la Web se encuentra sujeta a la ley de propiedad intelectual.

Como norma general, no debe utilizarse ningún material ni para fines comerciales ni para fines personales sin la autorización de su creador original.

En la actualidad, para incluir un enlace externo en una Página Web no es necesario (desde un punto de vista legal) obtener el permiso de su creador. Sin embargo, las normas de cortesía de Internet establecen que, al menos, debería informarse de tal circunstancia a los administradores del sitio.

Para utilizar cualquier material protegido por la ley de propiedad intelectual, será necesario disponer del permiso explícito de su creador. La técnica habitual suele consistir en ponerse en contacto con el administrador del sitio a través del correo electrónico o mediante los números de teléfono o fax que puedan aparecer reflejados en sus páginas.

Tráfico

Habitualmente el Servidor donde se aloja un Portal Web dispone de un archivo de registro donde se contabiliza el número de ocasiones que se ha solicitado cada uno de sus elementos (archivos). Estas solicitudes o visitas son conocidas en el argot técnico con el nombre de hits.

Los archivos de registro introducen además diversas categorías de información que pueden resultar útiles para el análisis del tráfico de un Portal Web (fecha y hora de la solicitud, errores producidos en el acceso a una página, etc.).

La gran cantidad de información recogida en los archivos de registro puede parecer en un principio intimidante, pero es imprescindible para conocer las preferencias de los visitantes del sitio.

A la hora de contratar un servicio de Hosting o Alojamiento Web, es imprescindible averiguar si el Servidor puede ofrecer información sobre las visitas o hits recibidos por las distintas páginas o, mejor aún, si pone a disposición del usuario los propios archivos de registro. Si se dispone de esta información podrá ser tratada por un consultor o analizada mediante un software específico para extraer valiosas conclusiones sobre el mantenimiento del sitio.

En los archivos de registro queda constancia también de los errores de acceso a las distintas páginas. Estos aparecen indicados mediante el código de error “404 URL no Encontrado”.

También queda registrado el número de ocasiones en las que falló el propio servidor, generando esta vez el código de error “500 Error de Servidor”.

Consulte las direcciones Web http://www.web-analytics.es/ y http://www.weboscope.com/?language=es para obtener más información sobre el tema y software para el análisis de archivos de registro.

Promoción

Una vez publicado un Portal Web será necesario promocionarlo para que los posibles visitantes tengan conocimiento de su existencia.

Una de las primeras medidas a tomar consiste en incluir la dirección URL del sitio en todo tipo de comunicación empresarial, incluyendo una referencia en forma de firma digital en los mensajes de correo electrónico.

No obstante, el método más eficaz para dar a conocer un Portal Web es darlo de alta en alguno de los buscadores existentes en Internet. Generalmente, este proceso suele ser de carácter gratuito. Sin embargo, hay que tener en cuenta que encontrar los mejores buscadores y disponer de los mejores espacios publicitarios puede requerir gran cantidad de tiempo y recursos. Existen empresas especializadas en gestionar y mantener actualizada la información sobre un Portal Web en los principales buscadores.

A grandes rasgos, es posible distinguir entre dos tipos de buscadores diferentes:

  • Directorios: las Páginas Web son catalogadas según categorías de información.
  • Motores de Búsqueda: utilizan un software especial conocido con el nombre de robot o araña que rastrea la Web en busca de nuevas páginas.

Algunos de los buscadores de uso más frecuente son Google, Bing, Alta Vista, Yahoo! o HotBot.

Otro de los procedimientos habituales para la promoción de un Portal Web consiste contactar con otros sitios relacionados con la propia actividad y pedir la inclusión en él de un enlace o banner publicitario.

Algunas direcciones adicionales para la promoción de Portales Web son:

  • Google Adwords ( http://adwords.google.com )
  • Alta-en-buscadores.biz ( www.alta-en-buscadores.biz/index.php )
  • Mi Web funciona ( http://www.miwebfunciona.com/ )
  • Enredados ( http://http://www.enredados.com/promocion.html )
  • PubliCentral ( http://http://www.publicentral.com/ )

También es importante tener en cuenta a los buscadores en español y los de habla hispana de Latinoamércia: Lycos, Ozú, Terra, Trovator, Yaaqui, Latindex, LatinWorld, LugarLatino, etc.

Motores de búsqueda

Los motores de búsqueda recorren de forma continua la red de Internet en busca de nuevos contenidos. Para clasificar sus resultados, utilizan la información disponible en las propias páginas. Así pues, para conseguir los mejores resultados de promoción de un sitio, es aconsejable facilitar la labor de búsqueda de estos motores introduciendo en sus páginas la información más completa y detallada posible.

La utilización de meta-etiquetas contribuirá a que los motores de búsqueda cataloguen de forma correcta un Portal Web. Generalmente, se suelen utilizar tres etiquetas diferentes:

  • <TITLE>. Contiene el título que aparece en la ventana del explorador cuando se visualiza la página. Los motores de búsqueda muestran como resultado el contenido de esta etiqueta.

<TITLE> Título descriptivo de la Página Web </TITLE>

  • Description. Esta meta-etiqueta se incluye dentro de la sección de encabezado de la Página Web (entre las etiquetas <HEAD> Y </HEAD>). Debe contener una descripción lo más completa y detallada posible del sitio.

<META NAME=”description” CONTENT=”Descripción completa de la Página Web”/>

  • Keywords. También se incluye dentro de la sección de encabezado. Contendrá las palabras clave mediante las que se desea identificar la página.

<META NAME=”keywords” CONTENT=”Palabras clave de la Página Web”/>

Finalmente, otro de los procedimientos de trabajo de algunos motores de búsqueda consiste en analizar las primeras 25 palabras disponibles en el texto de la página. Conviene, pues, emplear un contenido lo más descriptivo posible.

Mantenimiento y Actualización

La labor de mantenimiento y actualización de un Portal Web resulta de crucial importancia para captar el interés de los visitantes. Esta tarea puede quedar definida gracias a la información obtenida de la medición del tráfico de las distintas Páginas Web, dado que este dato proporcionará una idea clara de cuáles son las preferencias de los usuarios.

Realizar una labor de mantenimiento significa comprobar de forma periódica que todos los Archivos, Páginas Web y Enlaces funcionan correctamente y que las páginas siguen cargándose de forma adecuada cuando se realizan cambios o actualizaciones en el sitio.

Como norma general, es aconsejable incluir un enlace suficientemente accesible para que los visitantes comuniquen mediante un mensaje de correo electrónico los errores que detecten en el funcionamiento del sitio.

Actualizar un Portal Web representa incluir nuevos contenidos de interés o mejorar el aspecto o navegabilidad del mismo para que resulte más interesante. Esto, no significa necesariamente eliminar el contenido antiguo. Numerosos Portales Web mantienen un registro histórico del material que va siendo eliminado de sus páginas principales, de forma que queda accesible para su posible análisis.

Puede resultar interesante también incluir un aviso visible para que los usuarios conozcan las distintas novedades del sitio o, incluso, mostrar un resumen de las mismas en las páginas principal.

Para planificar el trabajo de actualización de un sitio es necesario tener en cuenta los recursos técnicos y humanos disponibles y utilizarlos de forma adecuada según la información del registro de visitas proporcionada por el proveedor del Servidor Web.

WebArt.es

© WebArt.es | Crear Página Web (http://webart.es). Especialistas en Crear Páginas Web económicas de Presencia para empresas [95€], Expertos en integración de Plantillas para Blogs WordPress con WooCommerce [195€], Técnicos en Crear Tiendas Online PrestaShop Profesionales [295€], Páginas Corporativas para Facebook [50€], Optimización Web para Dispositivos Móviles [100€], Asesoramiento Web y todo tipo de Soluciones Informáticas relacionadas con el Diseño Web al mínimo coste: Renovar Páginas Web obsoletas, Rediseño de Páginas Web conservando contenidos, Actualización de Versión de WordPress ó PrestaShop, Migración de Dominios ó de Páginas Web a WordPress, Posicionamiento Web (SEO), Publicidad en Buscador Google con AdWords, Estadísticas de Google Analytics en Páginas Web, Incorporación de Anuncios en Páginas Web mediante AdSense, Diseño de Logotipos corporativos y Recursos Gratis para Páginas Web en nuestro Blog.

2 Comentarios en “Manual de Crear Página Web y Tienda Online Profesional

  1. Pep Elfos dice:

    Excelente Tutorial!!

    Estoy comenzando en este apasionante mundo del diseño web, por lo que soy un aprendiz en esto de Crear Páginas Web, pero algo tengo muy claro: ” por aquí va el camino ;)) ”

    Muchas gracias por vuestro trabajo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Captcha Anti-Spam *