CAPÍTULO IV SITIO WEB LA BLUE

Transcripción

1 CAPÍTULO IV SITIO WEB LA BLUE

2 En este capítulo se abordará el diseño del sitio web, sus características y complementos que lo personalizan, así como su definición. El sitio web para Neus (2006, p. 68) "esta formado por un conjunto de páginas, engarzadas por enlaces internos y relacionadas con el exterior por enlaces externos". Es decir un sitio es un conjunto de páginas enlazadas internamente para representar algo al exterior. Entre sus características se encuentran como dice Neus (2006, p. 68) con un "nombre propio o dominio, que lo ubique en el ciberespacio bajo una URL también conocida como Universal Resource Locator o dirección principal". Retomando lo anterior, el sitio web es definido de acuerdo a su nombre, dominio y dirección. Estas características especifican el dominio propuesto, es decir el sitio web de la revista La Blue, y se desmenuza en este último capítulo. 4.1 Dominios y subdominios Para comenzar, el dominio en el ciberespacio, se entiende como la dirección de quien se está hablando por ejemplo, la tienda de venta y renta de películas Blockbuster, cuya dirección es conocida como que a la vez también es sin importar la diferencia, ambas URL llevan al mismo sitio, la diferencia entre la primera y la segunda, es solo la sustitución de letras por números, lo cual facilita a una persona poder memorizarla con facilidad, para realizar su búsqueda en el ciberespacio posteriormente cuando se deseé. Ahora debido a la gran demanda de dominios, estos se diversificaron en diferentes ramas. Estas pueden ser comerciales, organizacionales, gubernamentales, educativas, informativas entre otros, y los cuales a su vez se pueden diversificar por zona geográfica o región a la que pertenecen físicamente hablando, tal como se muestra en la siguiente imagen. 62

3 Imagen Tabla de clasificación y zonificación para URL Tipo de dominio Abreviatura en la URL Características Comercial.com Dominio de carácter comercial, es actualmente la terminación mas utilizada en el ciberespacio. Organizacion.org Dominio sin fines de lucro, utilizado para organizaciones no gubernamentales generalmente. Gubernamental o Gobierno.gob - Mexico.gov - USA Se caracteriza por ser la terminación utilizada por el estado para sus dominios. Educativo.edu Terminación aplicada a todos los dominios de carácter o fines educativos. Network.net Una de las terminaciones pioneras en el ciberespacio, es utilizada por los dominios que lo deseen sin restricción, así como para los servicios de Internet Terminación de nivel Geográfico Abreviatura en la URL Características México.mx Terminación utilizada en los dominios y clasificarlos según su ubicación geográfica, puede ser utilizado tanto como Es decir retomando la tabla y aplicándola en el caso de se observan 3 características: 1) Blockbuster es el nombre del dominio, su importancia es esencial debido a que la utilización de un nombre fácilmente de recordar, garantiza que más gente interesada ingresará al sitio. 2) La terminación.com en este caso indica que es un dominio de interés comercial o lucrativo. 63

4 3) Por ultimo el.mx indica la región geográfica o zona a la que pertenece el dominio, en este caso a México. Por otro lado los subdominios son como su nombre lo indica subsecuentes a algo, en este caso a un dominio, fácilmente explicado, seria la pagina llamada la cual ofrece su dominio como un hogar para todo aquel que desee publicar una pagina web y no cuente con los recursos propios para invertir en el gasto de un dominio particular, en ese caso puede hacerlo por medio de Freewebs, quedando de la siguiente manera: Con lo anterior se puede observar que define a un domino y que a un subdominio, además de las diferentes categorías a las que puede pertenecer. En el siguiente punto se explicará lo que es el hospedaje en el ciberespacio y como se divide entre hospedaje gratuito y hospedaje de paga. 4.2 Hospedaje Como el nombre lo indica es el espacio donde se aloja un sitio o pagina web, pudiendo ser gratuito o de paga, tal como lo define Honeycutt (1998, p. 46) "el hospedaje web... se a convertido en un lucrativo negocio para las compañías de Internet". Es decir el acceso permitido para poder manipular el sitio como se deseé derivara sin duda de lo que se invierta económicamente hablando. Dichos hospedajes se definen a continuación Tipos de hospedaje: paga y gratuito La alta demanda que existe en Internet ha facilitado poder tener acceso tanto un servicio de paga excelente, así como a uno gratuito con beneficios, opciones y alcances limitados. 64

5 El hospedaje de paga presenta entre las características, la posibilidad de rentar un espacio por mes, año, o tamaño incluso del mismo espacio que se deseé adquirir. Mientras al gratuito, presenta su limitación en respecto al tamaño que se puede obtener sin costo alguno, tal como se observa el la siguiente imagen. Imagen 4.2 Principales características del hospedaje gratuito y de paga. Hospedaje gratuito Hospedaje de paga Precio $ 0.00 $ 4,84 dólares / mes De espacio en disco 1500 MB Sin límite de espacio en disco! Transferencia de datos 100 GB / mes Sin límite de transferencia de datos! Dominios adicionales 5 Ilimitado Sub-dominios 5 Ilimitado Direcciones de correo electrónico 5 Ilimitado Bases de datos MySQL 2 Ilimitado El tiempo de actividad 99% El 99,9% Cuentas FTP 1 Ilimitado Cuentas de correo electrónico 5 Ilimitado Autoinstalador 10 Scripts 50 Scripts (Fantastico) Fuente Entendido lo anterior, los siguientes temas, serán abordados ya con el desarrollo de la página web de la revista digital La Blue. 4.3 Mapa de contenido El mapa de contenido del sitio web se muestra en la siguiente imagen; Imagen 4.3 Mapa de contenido del sito web La Blue Inicio Home La Blue Inicio Síguenos Revista Secciones Multimedia Nosotros Precios Facebook Twitter Descarga PDF Reportaje Entrevista Youtube Fotos Quiénes somos Editorial Anuncios y costos Infografía Columna 65

6 El mapa fue diseñado con la intención de presentar al navegante en la red un sitio sencillo pero a la vez completo, sin caer en la sobrecarga de información que algunos sitios manejan actualmente. Solo lo necesario, como dice Neus (2006, p. 15) "En Internet leemos poco, la vista se cansa, y en cuanto encontramos una pista que nos lleva a la información que buscamos, allá nos vamos directos". Así que las palabras que se utilicen en el sitio Web deben ser bien seleccionadas debido a la importancia de poder decir lo que se desea con solo unas cuantas. 4.4 Diseño, composición, estructura y jerarquía del sitio web Al diseñar una página web se debe tener en cuenta, que la redacción, lectura, e interacción de los visitantes es muy diferente a lo que es en un medio impreso, de no olvidar esas importantes características, se lograra hacer un adecuado sitio Web. El texto y su redacción juegan un papel muy importante como lo dice Neus (2006, p. 76) "Una vez redactados los textos, el siguiente paso consiste en asegurar que su presencia en la pagina resulte lo mas atractiva y eficaz posible", es decir al escribir un texto en Internet es fundamental no olvidar que debe ser legible y visible en cualquier momento para el visitante, recordando que el color seleccionado también debe ser considerado de acuerdo a lo que se desee transmitir. La composición y estructura del sitio se recomienda en forma vertical, ya que la mayoría de los sitios web diseñan su contenido de esa manera, debido a que es más sencillo para el navegante la lectura en el sitio. El diseño y jerarquía del sitio web son igualmente significativos, ya que la información desplegada debe ser en orden de importancia, esto debido a que el usuario le dedica pocos segundos a una pagina web, lo que obliga a situar los 66

7 datos deseados de manera atractiva, es decir, en pocas palabras e imágenes decir lo que se desea. Las características anteriores se observan aplicadas en la siguiente imagen. Imagen 4.4 Diseño, composición, estructura y jerarquía del sitio web La Blue. Estructura: Información desplegada en forma vertical, primeramente el nombre del sitio web, seguido de la barra de navegación, después imagen central y al final los datos legales. Composición: Gif animado en parte superior. Barra de navegación en parte superior. Imagen central en formato JPG. Cuadro de texto en parte inferior Jerarquía: Nombre del sitio en la parte superior. Barra de navegación en parte superior. Imagen de revista en el centro. Información legal en parte inferior. Diseño: Se utiliza para los textos el tipografía arial. La barra de navegación en color azul debido al contraste con el negro y en relación con el nombre del sitio Diseño: Se utilizan el color negro como fondo debido a la seriedad que causa. Se utiliza el color blando en el texto debido al contraste Manejo del color El manejo del color es importante en el sitio web, tal como lo dice Fernández (1998, p. 170) "El color es un código de información visual. Tiene propiedades psicológicas que van desde tranquilizar (blanco) hasta alertar (rojo)". Esta importancia del color es tan fundamental en el mundo virtual como el impreso, es decir, el color da un contexto de lo que se este leyendo u observando. 67

8 Tomando lo anterior más lo complementado por Heller citado en el capítulo tres, se llega a la determinación de utilizar colores no alarmantes para el navegante como se explica a continuación: Textos en color azul o negro según su contraste con el color de fondo. Información legal en color blanco con un fondo negro. Fondo color negro para todas las partes vacías del sitio. Títulos de artículos en contraste al utilizado para el texto, según sea el caso. Color rojo para información importante o advertencias. Color amarillo para textos o información relevante del momento. Color azul para la barra de navegación Tipografía La tipografía seleccionada debe ser en base a la presentación que se desea dar. Una mala exposición de textos puede llevar al sitio al fracaso como lo menciona Fernández (1998, p. 217) "estos afectarán la postura psicológica con la que el usuario se enfrentara a nuestro proyecto. La ansiedad, tensión, agresividad, inestabilidad y el nerviosismo son algunos de ellos" Es decir, para obtener una apropiada reacción se debe seleccionar una adecuada tipografía, para realizar la elección se debe tener en cuenta: la longitud de los textos, sus alineados y los espacios, además de la legibilidad deseada, de esta manera se lograra dar la presentación deseada al sitio. Para ejemplificar, basta observar la siguiente imagen. Imagen 4.5 Selección de tipografía para el sito web La Blue A E I O U A E i O U A E I O U A E I O U A E I O U Algerian Forte Arial PR Celtic Narrow Harlow Solid Italic 68

9 Todo lo anterior deriva en la selección de tipografía tipo Arial regular del numero 12, en algunos casos se puede mezclar con la numero 10 para dar una variedad y el retoque de negritas según sea el caso. Esto debido a la gran aceptación que tiene el cibernauta con la letra Arial. La legibilidad clara es necesaria en el desarrollo del texto para el sitio y en este caso la tipografía Arial regular también facilita la lectura del navegante, provocando una sensación de aceptación y de fácil entendimiento, debido a la interacción que tiene con esta tipografía en el día a día de la vida cotidiana Infografía La infografía es una explicación informativa por medio de imágenes y gráficos, su principal característica es que debe lograr ser entendida por si misma con solo ser observada. Se realizo una infografía para la revista y sitio Web La Blue, con el tema, los beneficios de la publicidad, buscando fomentar la inversión. Imagen 4.6 Infografía para revista y sitio web La Blue. 69

10 4.4.4 Contenidos La importancia de los contenidos como animaciones, videos, audio e información es fundamental para tener una página completa e interactiva, por ese motivo se ha diseñado un sitio con videos, imágenes y algunos elementos interactivos como son: Un Banner con movimiento permanente localizado en la parte superior del sitio web, el cual aparece en cualquier página del portal. Imagen 4.7 Banner animado en el sitio web La Blue. Banner animado Una animación en la sección Quiénes Somos la cual gira permanentemente. Imagen 4.8 Animación en sección Quiénes Somos del sitio web La Blue. 70

11 Una galería de fotografías con movimiento realizadas por medio del programa Flash. Imagen 4.9 Galería de fotos del sitio web La Blue. 4.5 Descripción de las herramientas utilizadas Para el diseño del sitio web, se utilizaron varias herramientas como fueron los programas de Flash, PhotoShop y Dreamweaver, además de imágenes, lo cual se explica detalladamente a continuación Adobe Flash Programa utilizado para desarrollar tanto una pagina web como elementos interactivos dentro de esta, además de ser una herramienta de fácil manejo, nos permite una libertad casi completa para diseñar y colocar los elementos. Este programa fue utilizado para el desarrollo del banner el cual aparece en la parte superior con un movimiento permanente, promocionando en todo momento el nombre de la revista y logotipo. Además también fue utilizado para 71

12 realizar una galería interactiva de fotografías y hacer una portada animada para la página inicial del sitio web. Tal como se observa en la siguiente imagen. Imagen 4.10 Banner animado en Flash para el sitio web La Blue Adobe Photoshop PhotoShop es un programa utilizado para diseñar y retocar imágenes, nos permite manipular a nuestro antojo y casi en su totalidad cualquier archivo seleccionado. En este programa se editaron la mayoría de las imágenes utilizadas en el sitio y revista impresa. Imagen 4.11 Imagen editada en Photoshop para el sitio web La Blue. 72

13 Formatos y características de imágenes utilizadas; Jpg Png y Gif Los formatos y características derivados de las imágenes trabajadas en PhotoShop se clasifican en este apartado, ya sea en.jpg.png o.gif y cuyas diferencias se observan en la siguiente imagen. Imagen 4.12 Características de formatos de imagen.jpg.png y.gif.jpg.png.gif También conocido como (Joint Photographic Experts Group o.jpeg) este se puede utilizar en gráficos que exploten los 16.7 millones de colores que hay en dicha paleta, este formato es uno de los mas utilizados en la Internet, su nivel de compresión se puede controlar y funciona bajo el código de los 24 bits. Formato llamado (Portable network graphics), es un formato no tan empleado en Internet como el.jpg o.gif, puede trabajar ya sea con una profundidad de color de 8 o de 24 bits, es considerado como un formato adecuado para imágenes graficas. Formato conocido como (Graphics interchange format), es de los mas empleados en Internet por su alta compatibilidad, esta limitado a 256 colores y a la profundidad de 8 bits, es considerado como uno de los mejores formatos para imágenes graficas y animaciones. Fuente. Elaboración propia, 2011 con datos de: Creación de páginas web con HTML De acuerdo al último cuadro, se observa que el archivo.jpg es el que mayormente se utiliza en los sitios y el cual se manejara también en el diseño del sitio web La Blue. El formato facilita la transición de un programa a otro y es de fácil y elegible compresión lo cual permite el poder almacenar la imagen deseada en memorias portátiles con facilidad o el poder subirlo al ciberespacio Adobe Dreamweaver Programa utilizado para administrar un sitio web de manera sencilla, este tiene entre sus ventajas el ofrecer plantillas las cuales permiten seguir paso a paso el diseño de un sitio, de manera rápida y eficaz. El programa fue utilizado para la realización del sitio, así como para la barra de navegación. 73

14 4.6 Propuesta de sitio web La propuesta para el sitio web fue elaborada por medio de todos los puntos anteriores, dando como resultado la página cuyo concepto, se define como un sitio sencillo, entretenido, interactivo y de fácil navegación Página principal La página principal en un sitio es tan importante como la portada de una revista, esta debe ser capaz de explicar a primera vista los contenidos del sitio web así como el objetivo. Debido a estas circunstancias se decidió realizar una página principal animada con algunos efectos de movimiento por medio de Flash y colores llamativos. Imagen 4.13 Página principal del sitio web La Blue. 74

15 4.6.2 Descripción general de la propuesta. Después de todo lo analizado, se puede observar que el sitio web La Blue ha sido desarrollado con una navegación sencilla, interactiva y de fácil entendimiento al visitante desde la primera vez, además se tiene la oportunidad de ir a otra pagina por medio tanto de la barra de navegación como de la portada interactiva que aparece en la pagina de inicio. Logrando entretener, atrapar y cautivas al visitante, consiguiendo una aceptación y el gusto por volver a visitar la página en otro momento. Imagen 4.14 Sitio web La Blue. Barra de navegación. Nombre del sitio web animado en gif. Imagen principal animada del sitio web. Contenido legal del sitio web. 75