Capítulo III. Desarrollo del sistema
3.2 Desarrollo de página Web
Uno de los objetivos particulares planteados al inicio de esta tesis, es el diseño de una página Web como interfaz gráfica para el control del sistema. En el transcurso de la elaboración de la misma, se acordó, por sugerencia del asesor técnico, que el sitio Web también abarcara, todo lo referente al negocio en sí. Como se trata de una empresa comercial con el giro de cafetería y restaurante, se agregaron otras secciones al sitio, como fueron el menú, contacto, eventos, por mencionar algunas, además de la parte del administrador, que era la que se había previsto desde el principio.
Utilizar programas pertenecientes a una misma suite nos facilita mucho la realización de un proyecto, ya que no hay problemas de compatibilidad y automáticamente se
puede exportar y manipular
,
información de un programa a otro, y de hecho están diseñados con esa versatilidad de, si así lo requiere el usuario, complementarse entre ellos para lograr un mejor trabajo, como veremos en esta sección. De ahí que se haya elegido la Creative Suite de Adobe Systems para diseñar, maquetar y programar la página Web propuesta para este proyecto.Las páginas Web que visitamos diariamente, tienen una parte muy importante creativa o artística, se debe cuidar mucho la armonía entre la parte estética y la parte funcional; al ser un medio interactivo, hay que tener en cuenta la participación directa del usuario, hay que facilitarle la búsqueda de la información, que sea fácil de encontrar y que sea coherente. A la hora de diseñar una página Web, resulta muy cómodo hacer las pruebas de creatividad utilizando un programa de diseño gráfico, en lugar de realizar la maquetación directamente en HTML.
Uno de los programas más útiles para realizar el diseño de la página
,
es Adobe Photoshop, que ofrece muchas utilidades para el retoque fotográfico, pero también para el diseño gráfico en general. Las últimas versiones del programa además disponen de ayudas muy interesantes,
para diseñar las páginas Web, como los sectores o la opción Guardar para Web.Adobe Photoshop
,
trata esencialmente de una aplicación informática en forma de taller de pintura y fotografía plugins que trabaja sobre un "lienzo" y que está destinadopara la edición, retoque fotográfico y pintura a base de imágenes de mapa de bits (o gráficos rasterizados). A medida que ha ido evolucionando el software
,
ha incluido diversas mejoras fundamentales, como la incorporación de un espacio de trabajo multicapa, inclusión de elementos vectoriales, gestión avanzada de color, tratamiento extensivo de tipografías, control y retoque de color, efectos creativos, posibilidad de incorporar plugins6 de terceras compañías, exportación para sitiosWeb entre otros.
La gran virtud de esta última característica es la creación de nuestra propia plantilla para el sitio Web, ya que no sólo el diseño es libre, también se pueden incorporar otros elementos de Adobe Flash plugins como gráficos vectoriales, contenido interactivo,
videos y animaciones. Se puede agregar una galería fotográfica creada en Adobe Bridge o, por otro lado, puede exportarse a Adobe Fireworks y manipular la plantilla
plugins con su manejo híbrido de gráficos vectoriales y gráficos en mapa de bits, cuya
aplicación permite crear menús emergentes, rollover7 o imágenes de sustitución para
Web. Y finalmente enviarse a Adobe Dreamweaver (editor del que ya se habló en la sección 2.6.3)
,
y manipular el código, volverlo una hoja de estilos, o simplemente enlazar varias páginas, crear formularios y todo lo que nuestro sitio Web requiera, desplegando así un menú de opciones inmenso. Lo que no se podría hacer si simplemente se escogiese una plantilla determinada en Adobe Dreamweaver, o
6Plug-in es un módulo que se incluye opcionalmente en una aplicación. Programa que puede anexarse a
otro para aumentar sus funcionalidades.
7 Rollover es el efecto que ocurre cuando una imagen existente en la página web es sustituida por otra,
cualquier otro editor, o en sistemas como Drupal8 o Joomla9, que también cuentan con
plantillas predeterminadas pero no tenemos acceso al código ni al diseño estético. Por todo lo anterior, se llegó a la conclusión de que trabajar con la Creative Suite de Adobe Systems, cumplía con todas las expectativas y funcionalidades necesarias para la elaboración del sitio Web.
3.2.1 Creación del sitio Web
Una vez decidida la paquetería a utilizar, lo primero que se analizó fueron las necesidades generales del sitio, es decir, las secciones en que se iba a dividir, la información que se pretendía dar a conocer, la funcionalidad básica, el apartado que direccionaría a las cámaras IP, y la línea estética a seguir.
El siguiente paso fue la selección de fondos e imágenes, algunos fueron creados, pero otros se tomaron del Internet, cuidando siempre, que no estuvieran protegidas por autor con marca de agua, y otorgando los créditos necesarios, ya sea al autor o a la fuente, de donde fueron sustraídas.
Una vez que se tenía el material, se procedió a crear las plantillas en Adobe Photoshop (Figura 26).
Figura 26. Proceso de diseño de una página Web en Adobe Photoshop
Una vez terminadas todas las páginas del sitio, se marcan los sectores, y se exportó directamente a Adobe Dreamweaver, donde se generó el código HTML para manipularlo (Figura 27). Una vez en este apartado, se insertó el código necesario para un formulario y otro para contraseñas (en PHP) y redireccionamiento, en las páginas de nombre “contactános” y “administrador”, respectivamente.
8Drupal es un sistema dinámico: en lugar de almacenar sus contenidos en archivos estáticos en el sistema
de ficheros del servidor de forma fija, el contenido textual de las páginas y otras configuraciones son almacenados en una base de datos y se editan utilizando un entorno Web.
9Joomla es un sistema de gestión de contenidos que puede ser utilizado independientemente. Entre sus
Figura 27. Muestra la generación de código HTML en Adobe Dreamweaver
En este apartado, se agregó también, una galería fotográfica creada en Adobe Bridge, para la página denominada “galería”.
Para finalizar la página se realizaron, varias pruebas, en distintos navegadores y se reajustaron la resolución de imagen, tamaño de letra y algunas otras cuestiones estéticas, mediante código HTML.
En el Anexo 3, se encuentran con más detalle los componentes y características de todos los programas, que forman parte de la Creative Suite de Adobe Systems.