http://www.rafatux.com PASOS PARA CREAR UNA PÁGINA WEB Con éste documento trato de orientar de una forma genérica los distintos pasos que deben de realizarse para crear una página web. PRIMER PASO: Estructura Antes de nada nos sirve de gran ayuda hacer un boceto en papel de cómo será la página web, es decir cómo irán estructurado los contenidos, los enlaces, dónde irá el logotipo etc Una web debe de estar bien estructurada para que se pueda acceder a los contenidos fácilmente. Por regla general una página web suele tener una estructura parecida a la de la imagen: Cabecera con Logotipo y una imagen Barra de navegación Contenido Menú lateral con vínculos Estructura de una página web 1
Con una estructura similar el usuario podrá acceder al los contenido de una forma muy rápida y visual ya que están bien estructurado los bloques. Tenemos una cabecera con el logotipo y una imagen. Debajo de ésta suele estar una barra de navegación para poder acceder a los distintos apartados. Dependiendo del tipo de página que estemos viendo tendrá distinto los nombres de los botones. Las web de empresas suelen tener al menos los siguientes botones: Ejemplo de barra de botones Un botón que sirve de presentación. Uno que nos muestra los productos que ofrece y a veces también otro con los servicios que prestan. Uno que muestra ejemplo de los trabajos realizados. Y por último uno que nos lleva a un formulario de contactos. Los formularios tienen una serie de campos mínimos. En la imagen se muestra un ejemplo de formulario sencillo que tiene cuatro campos: uno para el nombre, otro para tu email, uno más para una breve descripción del motivo, seguido campo mayor en el que se puede escribir varias líneas de texto, y por último un botón enviar. Ejemplo de formulario sencillo 2
Otra parte del diseño es el menú vertical con enlaces a otros apartados. Este menú puede estar o no, estar a la derecha o a la izquierda. El contenido de éste menú son enlaces que pueden estar también repetidos en la barra de botones para una mayor accesibilidad. Y por último tenemos un espacio mayor que muestra el contenido de la página. Una vez planteada la estructura en papel, pasaremos al segundo paso. SEGUNDO PASO: Diseño El segundo paso sería pasar ese primer boceto en papel a digital, es decir, s dibujar con algún programa de diseño los bloques de separación, añadir color y forma. Esto será tu boceto y es recomendable que al menos hagas tres diferentes para finalmente elegir el más adecuado. Prueba a cambiar colores, distribución, etc. Te recomiendo que desde un principio seas ordenado y guarde todos tus trabajos en una estructura de carpetas y que a los archivos les dé una nomenclatura correcta, es decir se llamarían por ejemplo: Boceto1, Boceto2 Una vez elegido el boceto ya puedes comenzar a trabajar en tu web. TERCER PASO: Maquetación Con cualquier editor de texto se puede crear páginas web, pero lo más recomendable es que uses cualquiera de los que existen en el mercado pues te ayudarán bastante. El más usado o más conocido es el Dreamweaver, a través de una interfaz gráfica muy intuitiva, mediante botones te inserta líneas de código. El uso de ésta herramienta nos ayuda, pero es necesario tener conocimientos de HTML y de CSS ya que de ésta forma podremos concretar más algún cambio. Manualmente en la forma de edición de código podemos escribir alguna etiqueta o atributo que el propio programa no lo inserta, obteniendo un resultado más exacto. Cuando creemos una página web debemos que crearlas con hojas de estilos, es decir con CSS ya que así, si luego más adelante tenemos que cambiar el color de la letra o algún atributo al realizar sólo un cambio en el CSS se modificará en todas las páginas y nos evitamos tener que cambiar el atributo en todas las páginas. Al igual que existe unas normas para escribir html también las hay para escribir el código CSS. 3
Ejemplo de código html y css Una vez maquetada la página web con los estilos CSS, debemos pensar cómo serán los textos. CUARTO PASO: Tipografía El tipo de letra de una página web debe de ser una letra legible y clara. La más usada suelen ser : verdana, Times New Roman, Arial Tenemos que tener en cuenta que cuando vemos una página web vemos el tipo de letra que tenemos instalado en nuestro ordenador, or, es decir, si pongo un tipo de letra poco conocida, corremos el riesgo de que muy pocos ordenadores tenga la fuente instalada y la página web no se verá correctamente. El tamaño del texto debe de ser homogéneo y sólo utilizar algún texto de mayor tamaño o color para resaltar un vínculo o un apartado. Podemos usar un tipo de fuente distinto en algún diseño que hayamos creado, ya que éstas letras formarían parte de una imagen y si se visualizaría, por ejemplo, si dibujamos los botones para la barra de navegación podemos dibujar las letras en el botón. Ejemplo de botón con fuente dibujada 4
QUINTO PASO: Imágenes Otra parte importante son las imágenes. Una web con muchas imágenes no significa que sea mejor, hay que utilizar el número de imágenes adecuados y con un tamaño ni muy pequeño ni muy grande ni en tamaño ni en peso, es decir el tamaño que vemos en pantalla no debe de ser mayor que el texto. La imagen hace referencia al texto. Si se quiere que la imagen aparezca a tamaño real, debes de colocar la imagen más pequeña y luego con un vínculo que se abra en una ventana nueva la imagen a tamaño completo. Es recomendable que con cada bloque de texto acompañe una imagen para hacer más atractiva la página y animar al usuario a leerla. Ejemplo de imágenes en una web La imagen también puede ser creada por nosotros. Alguna fotografía retocada con algún programa de diseño con la que obtengamos el resultado deseado. 5
En cuanto al peso, una imagen que pese mucho ralentizará el navegador y una que pese muy poco tendrá muy poca calidad y no se verá bien, por lo que se debe de tener cuidado con las imágenes que se sube. Las imágenes que vemos en internet, la mayoría de ellas tienen copyright, es decir son imágenes de un autor y no podemos usarle para beneficio propio. Existen varias páginas web que ofrecen imágenes a distinto precio, y también existen algunas web con banco de imágenes gratuitas, imágenes que podemos utilizarla libremente en nuestra web, el problema que nos podemos encontrar es que si necesitamos una imagen de algo en concreto será más difícil encontrarla en un servidor gratuito. Otro añadido más a una web puede ser una animación. SEXTO PASO: Animaciones Al igual que con las imágenes, una página que tenga muchas animaciones puede resultar cansado y algo molesto, por lo que no se debe abusar mucho. Se puede utilizar animaciones en los botones, cabeceras, o algún vínculo. Existen varios tipos de animaciones. Las más antiguas son los gifs animados. Estos son animaciones muy sencillas que tienen la ventaja de pesar poco, por lo que eran usadas con bastante frecuencia. Actualmente al disponer de una mayor velocidad de conexión gracias a la ADSL, las animaciones usadas son las creadas por flash, swish max... Este tipo de animaciones pueden ser más atractivas y complejas. Una web con alguna animación flash será más atractiva siempre y cuando no sea muy extensa. Hay páginas web que muestran como página de inicio una animación introductoria, (una intro), mostrando publicidad de sus productos o informando a que se dedican para finalmente dar paso a la web. Ésta animación tiene que tener la posibilidad de poder cerrarla por si el usuario no quiere verla y ver directamente la web. También existen páginas completas creadas con una animación. Estas páginas son más vistosas pero también tienes algunos inconvenientes. Con éstas pasos podemos hacernos una idea de cómo se crea una web, tan sólo hay que profundizar en cada apartado. 6