Source: https://www.slideshare.net/marlonh0101/creacion-de-sitios-web-revista-users
Timestamp: 2017-08-19 22:47:46+00:00

Document:
Proyecto areas de_fran_cedron_webma... by fran2690 551 views
Conoce los componentes y el alcance... by Alejandro González 558 views
El diario de ana frank by Marlon Hernandez 2086 views
SEO: Manual de edición de Contenido... by Jerónimo Pérez Paz 3779 views
1er Encuentro Webmaster EvolucióN... by Jerónimo Pérez Paz 1048 views
¿COMO SE ADMINISTRA EL SITIO? by Harold Delgado 3130 views
1. Léalo antes Gratis! En nuestro sitio puede obtener, en forma gratuita, un capítulo de cada uno de nuestros libros: usershop.mpediciones.com Nuestros libros incluyen guías visuales, explicaciones paso a paso, recuadros complementarios, ejercicios, glosarios, atajos de teclado y todos los elementos necesarios para asegurar un aprendizaje exitoso y estar conectado con el mundo de la tecnología. Conéctese con nosotros! usershop.mpediciones.com o por e-mail a: lectores@mpediciones.com ARGENTINA ✆ (011)4959-5000 CHILE ✆ (2)335-74-77 / 2-335-75-45 ESPAÑA ✆ (93)635-4120 / 93-635-4121 MEXICO ✆ (55)5350-3099 55-5600-4815
2. TÍTULO: CREACIÓN DE SITIOS WEB AUTOR: Pablo Vázquez COLECCIÓN: Manuales USERS FORMATO: 17 x 24 cm PÁGINAS: 320 Copyright © MMVI, MP Ediciones S.A. Es una publicación de Gradi S.A. Hecho el depósito que marca la ley. Todos los derechos reservados. Está prohibida la reproducción parcial o total del contenido sin la previa autorización del editor. La editorial no asume responsabilidad alguna por cualquier consecuencia derivada de la fabricación, funcionamiento y/o utilización de los servicios y productos que se describen y/o analizan. Impreso en Argentina. Primera impresión realizada en Sociedad Impresora Americana, Lavardén 153/57, Buenos Aires, Argentina. Todas las marcas mencionadas en este libro son propiedad exclusiva de sus respectivos dueños. Cantone, Dante Creación de sitios web - 1a ed. - Banfield - Lomas de Zamora : Gradi S.A., 2006. 320 p.; 24 x 17 cm. (Manual Users; 98) ISBN 987-22995-9-5 ISBN 978-987-22995-9-0 1. Informática. I. Título CDD 005.3
3. CREACIÓN DE SITIOS WEB Las mejores herramientas PLANIFICACIÓN Y PRODUCCIÓN FIREWORKS | DREAMWEAVER | FLASH PUBLICACIÓN Y PROMOCIÓN CONFIGURAR UN SERVIDOR PROPIO
4. CREACIÓN DE SITIOS WEB Pablo Vázquez Es Técnico en Reparación de PC y Redes Informáticas, egresado en 2001 y especializado en áreas como Linux, diseño gráfico y de páginas web, y administración de servidores. Desde 2002 trabaja como instructor en armado y reparación de PC, redes informáticas y administración de Windows NT/2000, en FUCE (Fundación Unión de Centros Educativos). También desarrolla tareas de diseño gráfico y de páginas web en ASD (Argentina Software Design), y de administrador de redes y servidores, manejando complejos servicios en sistemas como Windows NT y Linux en sus diferentes versiones para servidor. Es una de las más recientes incorporaciones de la editorial, donde se ha desempeñado como redactor y editor en las colecciones de fascículos Mi PC y Profesional del hardware. Dedicatoria A mis padres y hermano, por el apoyo. A Lucía, por estar siempre incondicionalmente. Agradecimentos A Diego y Daniel, por sus valiosos y constantes aportes de conocimientos editoriales y por su excelente metodología de trabajo. A Pablo, por la oportunidad. A mi familia y amigos, por el apoyo y el interés en este material. 4
5. Prólogo PRÓLOGO La creación de nuestros propios sitios web resulta una tarea muy creativa y apasionante, en la que podemos aplicar todo nuestro gusto, intuición y criterio visual. Pero, además de desplegar nuestro sentido de la estética y de la didáctica, también deberemos implementar criterios de organización y planificación, para establecer objetivos y determinar el mejor modo de comunicarnos con el público objetivo (o target) de los sitios web que desarrollemos. Un seguimiento correcto de todas estas etapas iniciales nos permitirá desarrollar sitios sumamente profesionales. Quien se encargue del diseño y la publicación de sitios web debe tener en claro en todo momento la meta final del producto, ya que esto será lo que lleve a definir todos los restantes factores, como el diseño mismo (colores, logotipo, tipografías, estilos, formas, diagramación) o la elección del método de publicación (servicios de alojamiento, servidor web propio, promoción, etc.). Un diseñador web, además, debe actuar como desarrollador e implementador de todas estas soluciones, para que el cliente final y los visitantes de sus sitios queden satisfechos. El diseñador no tendrá que buscar una respuesta general a todas las problemáticas decisiones que se presenten, sino que tendrá que definir diferentes y específicos métodos para ofrecer un abanico de soluciones posibles. Para lograr óptimos resultados, no sólo debemos conocer los procesos sino que necesitaremos dominar las herramientas, servicios y complementos que Internet nos ofrece para sacarle el mayor provecho. El software de diseño web, como los editores HTML o los programas de edición de imagen digital, serán de gran ayuda para el desarrollo de nuestros sitios y sus componentes. Es fundamental, también, tener un conocimiento acabado de los servicios que hay disponibles en Internet para el registro de dominios, el alojamiento de nuestro sitio y su promoción a través del alta en buscadores o el intercambio de enlaces. Este libro propone un abanico de soluciones fundamentales para el desarrollador de sitios web profesionales. Para ello se tendrán en cuenta dos criterios a la hora de seleccionar las herramientas y definir los procedimientos: la simplicidad y el menor costo. De todas maneras, dentro de la evaluación de todos estos componentes, se ha priorizado la calidad del producto final para luego aplicar la evaluación de costo y facilidad. Es por eso que no todas las herramientas son gratuitas, ni tampoco podemos decir que todos los procedimientos y ejemplos serán sencillos de implementar. Pero desde luego, si se presta atención y se tienen en cuenta todas las alternativas ofrecidas, el recorrido por este libro será ameno, entretenido y sin mayores inconvenientes en la puesta en práctica. No resta más que desearles un seguro éxito en la creación de sus propios sitios web. Pablo Eduardo Vázquez pabloevazquez@gmail.com 5
6. CREACIÓN DE SITIOS WEB EL LIBRO DE UN VISTAZO Este libro está dirigido a quienes deseen inciarse en el desarrollo de sus sitios web, así como a aquellos usuarios intermedios que deseen adquirir una visión total del proceso de producción, conociendo y aplicando herramientas variadas. Capítulo 1 propiedades para lograr una mejor calidad y CONOCIMIENTOS PREVIOS diversos efectos. Utilizaremos Fireworks, el A modo de introducción, trataremos los temas poderoso editor gráfico de Macromedia. primarios y todos los conocimientos que, de antemano, debemos abarcar para tener claro Capítulo 4 todo lo que se refiera a Internet, que será la DREAMWEAVER BÁSICO herramienta más utilizada durante la lectura En este capítulo hemos llegado por fin al de este libro. Profundizaremos también todas diseño formal de nuestros sitios. las áreas que vinculan esta gran red al diseño Analizaremos una de las aplicaciones más y la creatividad, como la World Wide Web y los potentes para diseño web: Macromedia protocolos de comunicaciones respectivos. Dreamweaver. Conoceremos todas las características del programa y las tareas Capítulo 2 básicas de trabajo a través de los contenidos PLANIFICACIÓN Y PRODUCCIÓN DEL SITIO explicados y del análisis de un proyecto Para lograr diseños óptimos de sitios, será simple de creación de páginas web. necesario tener en cuenta una serie de factores y procesos previos al diseño mismo. Capítulo 5 Entre ellos, se destacan la planificación del DREAMWEAVER AVANZADO sitio, que incluirá puntos como la definición Para desarrollar sitios web sumamente de objetivos y la dirección artística, y, por otro profesionales, será de vital importancia la lado, el hecho de comenzar a conocer la lectura de este capítulo. Ahondaremos en las estructura básica de una página web a través opciones más avanzadas de Dreamweaver, de su costado más puro: el lenguaje HTML. analizando en primer término la alternativa de programación en HTML de cada una de las Capítulo 3 herramientas que podemos llegar a incluir en IMAGEN Y ANIMACIÓN nuestras páginas. Entre ellas, tablas, capas, Si deseamos que nuestros sitios sean marcos, imágenes, CSS, etc. visualmente atractivos y gráficamente óptimos, necesitaremos optimizarlos Capítulo 6 mediante el adecuado procesamiento de las PUBLICACIÓN DE SITIOS imágenes que incluiremos. Para ello, Al terminar la planificación y la debemos conocer todas las alternativas en implementación del diseño y de todos sus cuanto a formatos, como también una elementos, llegará la hora de verlos herramienta que nos permita modificar sus publicados en la Web. En este capítulo, 6
7. El libro de un vistazo veremos todas las opciones disponibles para analizaremos alternativas para lograr ello, incluyendo el montaje de un servidor mantener nuestros asiduos visitantes, como propio, el registro de dominios regionales, la el envío de boletines electrónicos o el contratación de servicios de alojamiento y intercambio de banners publicitarios. diferentes métodos de redirección. Apéndice A Capítulo 7 BASES DE DATOS MACROMEDIA FLASH Y OTRAS La inclusión a nuestro servidor web de un HERRAMIENTAS servidor de bases de datos puede ser una Contamos con muchas alternativas tarea muy útil y funcional para la adicionales para incluir en nuestros sitios interactividad con los usuarios de nuestros web. Mediante la lectura y puesta en práctica sitios web. Esta opción puede ofrecer una de los contenidos de este capítulo, podremos gran versatilidad en cuanto a opciones de lograr conocer más acerca de todas ellas. registro y seguridad en los datos remotos, y lo Desde la inclusión de animaciones y podemos lograr mediante MySQL Server, complejas aplicaciones mediante Flash, hasta gestor y administrador de bases de datos otros componentes extra en Java, PHP o ASP, gratuito, estable y potente. serán sencillamente explicados y Apéndice B funcionalmente aplicados. SITIOS Y PROGRAMAS RECOMENDADOS Capítulo 8 Servicios de alojamiento web, obtención de PUBLICIDAD DEL SITIO recursos, como fuentes tipográficas, templates Una correcta promoción para nuestras gráficos o iconos e imágenes para la Web. La páginas será fundamental a la hora de descarga de herramientas gratuitas para la conseguir nuevos visitantes y potenciales ejecución de diferentes tareas, como creación clientes. Contamos con muchas opciones para de animaciones o clientes FTP. Todo esto lograrlo, dentro de las cuales se destaca el podremos conseguirlo mediante el listado de indexado en los buscadores más importantes sitios recomendados que se ofrecen en este de la Web, como Google o Yahoo!. También segundo apéndice. ! INFORMACIÓN COMPLEMENTARIA A lo largo de este manual encontrará una serie de recuadros que le brindarán información complementaria: curiosidades, trucos, ideas y consejos sobre los temas tratados. Cada recuadro está identificado con uno de los siguientes iconos: ❴❵ CURIOSIDADES E IDEAS ✱ ATENCIÓN ❘❘❘ DATOS ÚTILES Y NOVEDADES SITIOS WEB 7
8. UNA NUEVA DIMENSIÓN EN LIBROS TUTORIALES Aquí encontrará diferentes tutoriales en video relacionados con el libro. Sólo deberá hacer un clic en Ver Tutorial para bajar el video a su PC. GUÍA Una completa guía con sitios web, para acceder a más información y recursos útiles que le permitirán profundizar sus conocimientos. SOFTWARE Las mejores aplicaciones y herramientas accesorias, ejemplos y listados del libro para que no tenga que invertir su tiempo en transcribirlos. OnWeb, el sitio que le permitirá aprovechar al máximo cada uno de nuestros libros, con contenido exclusivo: la mejor selección de software y los ejemplos analizados en el texto, tutoriales en video y una completa guía de sitios de Internet. > Además, un foro a través del cual podrá realizar interconsultas con otros lectores y usuarios, debatir con ellos y estar en contacto con la editorial. Como siempre, MP Ediciones, a la vanguardia en la divulgación de la tecnología. BIENVENIDO A LOS SERVICIOS EXCLUSIVOS DE ONWEB: Ingrese al sitio usershop.mpediciones.com. La primera vez que acceda, deberá registrarse con un nombre de usuario y una clave. Para completar el proceso de registro, se le hará una pregunta referida al libro y se le solicitarán sus datos personales. U S E R S H O P. M P E D I C I O N E S . C O M
9. Contenido CONTENIDO Sobre el autor 4 Formateo de textos 37 Prólogo 5 Inserción de imágenes 40 El libro de un vistazo 6 Información complementaria 6 Introducción 12 Capítulo 1 Breve historia de Internet La conexión 42 43 Actividades 44 Capítulo 3 CONOCIMIENTOS PREVIOS ¿Qué es Internet? Los enlaces Resumen IMAGEN Y ANIMACIÓN 14 Las imágenes digitales 46 14 El diseño y la Web 46 Los sitios web 16 Gráficos vectoriales 47 17 Los mapas de bits 48 19 Los formatos 49 Los colores en la Web La World Wide Web 53 La tipografía 54 Macromedia Fireworks 56 La pantalla principal 59 Filtros y comandos 62 HTML y Fireworks 65 Resumen 71 Actividades 72 Capítulo 4 El navegador 22 Transferencia de archivos: FTP 26 DREAMWEAVER BÁSICO Resumen 27 Macromedia Dreamweaver 8 Actividades 28 Obtener, instalar y ejecutar Dreamweaver Capítulo 2 La pantalla principal 74 75 78 PLANIFICACIÓN Y PRODUCCIÓN DEL SITIO Definición del sitio 30 Objetivos del sitio 30 Definir contenidos 30 La dirección artística 32 El lenguaje web: HTML 33 ¿Qué son los tags? 34 Tags básicos 34 9
10. CREACIÓN DE SITIOS WEB Las vistas 79 133 Las clases La barra de herramientas La sintaxis 135 de archivo 81 CSS: propiedades La barra Insertar 82 de las etiquetas 137 Tareas básicas 84 CSS en Dreamweaver 138 Comenzar a trabajar 87 Capas (layers) 146 Crear la estructura local del sitio 87 Las capas de Dreamweaver 148 Definición del sitio 88 Servidor remoto 92 Modificadores Nuestro primer diseño 96 Enlaces a marcos 152 Resumen 99 Insertar marcos en Dreamweaver 153 Actividades 100 Los marcos 150 151 Resumen 157 Actividades 158 Capítulo 5 Capítulo 6 DREAMWEAVER AVANZADO Inserción de imágenes 102 PUBLICACIÓN DE SITIOS Modificar una imagen 104 Conceptos teóricos previos Imágenes de sustitución 105 El protocolo TCP/IP 158 Barras de navegación 109 Resolución de nombres de dominio 163 Álbum de fotos web 110 158 Nuestro propio servidor web 165 Internet Information Server 165 Apache Server 174 Simulación de IP estática 180 Registrar dominios El alojamiento (hosting) 187 205 Hosting compartido 205 Hosting dedicado 205 Housing Elementos de texto 113 206 Resumen 209 Actividades 210 Las cabeceras de texto 114 Las listas 115 Los enlaces 119 MACROMEDIA FLASH 120 Y OTRAS HERRAMIENTAS 123 Macromedia Flash 8 Professional Los enlaces en Dreamweaver Las tablas Capítulo 7 212 Definir las filas 124 Flash Player 213 Definir las celdas 124 Instalar Flash 213 Tablas en Dreamweaver 125 Iniciar Flash 8 216 Dividir y combinar celdas 129 El escenario 218 133 Las líneas de tiempo 220 Hojas de estilo 10
11. Contenido Apéndice B Los paneles 222 La barra de herramientas 224 SITIOS Y PROGRAMAS RECOMENDADOS Tareas básicas de diseño 226 Guía de sitios 296 241 HotScripts 296 241 Recursos gratis 296 PHP 243 FatScripts 297 Java y Javascript 245 Scripts.com 297 Aplicaciones mediante scripts ASP Resumen 245 Free Webmaster Resources Actividades 246 (thefreecountry.com) 298 Creamundo 299 Font Reactor 300 101 Free Fonts 300 DaFont 301 Free Fonts 301 Free Web Templates Registro en buscadores 299 Fuentes de recursos gratis PUBLICIDAD DEL SITIO 298 LetraManía Capítulo 8 302 Templates Box 302 248 Los buscadores 249 Registrar nuestros sitios 251 Elementos para tener en cuenta 256 Herramientas adicionales 260 Otros métodos de promoción 270 Los banners 270 Boletines electrónicos 274 SmartFTP Resumen 275 CuteFTP 303 Actividades 276 FTP Explorer 304 BulletProf FTP 304 Core FTP 305 Apéndice A BASES DE DATOS Software recomendado 303 303 Swish 305 ¿Qué es una base de datos? 278 Arachnophilia 306 El servidor 278 Alleycode 306 El lenguaje SQL 279 Amaya 307 MySQL 280 GIMP 307 Manipulación de las bases de datos 289 IrfanView 308 Resumen 294 Image After 308 11
12. CREACIÓN DE SITIOS WEB INTRODUCCIÓN El objetivo de este libro es brindar, tanto al lector novicio como al usuario intermedio –que ya ha hecho sus primeras armas en esta actividad–, un amplio recorrido por el proceso de desarrollo de sitios web. Con un claro enfoque práctico, nuestra misión será que el lector adquiera los conocimientos necesarios para planear, diseñar, publicar y promocionar sitios web de manera sencilla, organizada y con el menor costo posible. En el primer capítulo, tendremos un panorama de los conceptos básicos, tanto del diseño y la creatividad en la presentación de los contenidos, como de las características técnicas de Internet, sus protocolos de comunicaciones o la World Wide Web, entre otros temas. Luego, abordaremos el proceso previo de planificación del sitio y tomaremos contacto con un aspecto esencial de nuestra actividad, el lenguaje HTML en que se codifican o construyen los sitios web. En adelante, sin embargo, usaremos mayormente las herramientas de diseño más difundidas (Dreamweaver, Fireworks y otras), que nos permiten obtener resultados de alto profesionalismo, sin necesidad de mayor dominio de programación. Muchos lectores, seguramente, ya estarán familiarizados con algunas de ellas. Como el formato HTML, con que se estructuran los sitios web, sólo despliega texto, el siguiente paso será comenzar a preparar los elementos visuales que acompañarán al texto (imagen y animación). Conoceremos las características y los formatos más convenientes para su utilización en la Web y comenzaremos a aplicar Macromedia Fireworks para la edición de esas imágenes. Entrando de lleno en la etapa práctica del armado de un sitio web, en los capítulos 4 y 5, comenzaremos a utilizar Macromedia Dreamweaver para estructurar nuestro sitio, con todos los contenidos que hemos seleccionado y organizado de manera previa. Aquí es donde empezaremos a ver los resultados prácticos de nuestro aprendizaje. De lo básico a lo avanzado, iremos viendo las diferentes herramientas y opciones que nos brinda Dreamweaver para dar forma y estilo a nuestro sitio. Una vez que el contenido ha adquirido forma, nos encontramos en el momento crucial de publicar nuestro sitio. En el capítulo 6 veremos cómo realizar esta vital tarea, resolviendo los distintos requerimientos, como el registro del dominio y el alojamiento del sitio. Acercándonos al final, abordaremos algunas herramientas importantes para la animación e interactividad del sitio, haciendo especial énfasis en la utilización de Macromedia Flash. Y, por último, aprenderemos los distintos modos de difundir y promocionar nuestros sitios, a través de distintas opciones, como la inclusión en buscadores o el intercambio de enlaces. 12
13. CREACIÓN DE SITIOS WEB Capítulo 1 Conocimientos previos En este primer capítulo empezaremos a conocer mucho más acerca de Internet y todas las características que se nos ofrecen a partir de este estupendo método de comunicación. También repasaremos los conceptos de protocolos más utilizados, los servicios y los componentes de este tipo de red. SERVICIO DE ATENCIÓN AL LECTOR: lectores@mpediciones.com ¿Qué es Internet? Breve historia de Internet La conexión La World Wide Web Los sitios web El navegador Transferencia de archivos: FTP Resumen Actividades 14 14 16 17 19 22 26 27 28
14. CREACIÓN DE SITIOS WEB ¿QUÉ ES INTERNET? Internet es un sistema mundial de computadoras en red integrado por las redes y subredes de cada país, que comparten diferentes clases de recursos y permiten comunicarse y acceder a los datos de cualquier computadora que esté conectada a ellas, e incluso establecer comunicaciones directas con los usuarios de todas estas terminales. Internet se basa en un sistema de cliente-servidor. Los clientes son los usuarios que aprovecharán los recursos y los servidores los equipos que los ofrecen y administran. Es una manera rápida, inteligente y de bajo costo, por lo que actualmente se ha convertido en el medio de comunicación y obtención de datos más utilizado en el mundo entero. El proyecto de Internet nació de la mano de ARPA (Advanced Research Projects Agency) en Estados Unidos, alrededor del año 1969. Inicialmente se la conoció con el nombre de ARPAnet, y su objetivo principal fue permitir una comunicación rápida y eficaz entre los investigadores de la agencia. Hoy en día, Internet es un sistema de comunicación público, cooperativo y autosuficiente económicamente. A nivel técnico, se distingue porque basa su funcionamiento en un protocolo de transmisión de datos veloz y seguro: el TCP/IP. Solicitud Web (HTTP) Internet Archivos (FTP) Clientes (navegador, cliente FTP , cliente de correo, etc.) Respuesta Servidores (servicios) E-mail (POP y SMTP) Figura 1. En este diagrama se muestra el funcionamiento básico del sistema cliente–servidor que utiliza Internet. Breve historia de Internet A comienzos de la década del 60, el Departamento de Defensa de los EEUU comenzó a preocuparse por el sistema utilizado en las comunicaciones internas. En 1962, un investigador del gobierno llamado Paul Baran presentó un proyecto 14
15. ¿Qué es Internet? que solucionaba satisfactoriamente todos los problemas que se presentaban con el método de comunicación utilizado. Era un sistema de computadoras conectadas entre sí por una misma red de manera descentralizada. Este proyecto fue debatido durante varios años mientras se analizaban las ventajas y desventajas que podría significar, hasta que en 1969 la ARPA del Pentágono creó la ARPAnet, el primer sistema de computación con equipos conectados en red. Este sistema funcionó satisfactoriamente durante varios años con su implementación en redes pequeñas, es decir, con pocas estaciones de trabajo conectadas a ella. El problema surgió cuando se intentó masificar el uso de este método: no existía un protocolo de comunicaciones común en todas las computadoras ya que utilizaban distintos sistemas operativos. Finalmente, en el año 1978 se creó el protocolo TCP/IP (Transmition Control Protocol/Internet Protocol). Desde ese momento se comenzó a utilizar el término Internet. Este protocolo fue inmediatamente adoptado como estándar por el Departamento de Defensa, y en 1982 su red de computadoras adoptó el nombre de MILnet. Figura 2. Existen muchos equipos que actúan como servidores web y de otros servicios de Internet sin tener grandes prestaciones. En 1987, la NSF (National Science Foundation) decidió enlazar cinco centros en distintas ciudades de los EEUU. De esa manera nació la NSFnet, que alcanzó la velocidad de transferencia de 1,5 Mbps (el máximo hasta ese momento era de 56 Kbps, la velocidad que actualmente ofrecen los módems de conexión telefónica). En la década del 90 se creó la World Wide Web mediante la utilización de tres novedosos recursos: el lenguaje HTML (Hipertext Markup Language), el HTTP (Hypertext Transfer Protocol) y un programa cliente (navegador o browser). En el año 1993, dos desarrolladores del NCSA (Nacional Center Supercomputing Aplications) elaboraron un sistema de navegación web y se alejaron de esa compañía para ❘❘❘ OTROS PROTOCOLOS Internet ofrece una gran cantidad de servicios. Cada uno de ellos se asocia con un puerto de comunicación diferente. Entre los más usados encontramos el correo electrónico (puerto POP para la entrada de datos y SMTP para la salida), la mensajería instantánea (cada mensajero utiliza el puerto sobre el que funciona su red) y el que nos importa a nosotros: la Web (comúnmente el puerto 80). 15
16. CREACIÓN DE SITIOS WEB apostar todo a la creación de una de las primeras empresas dedicadas exclusivamente a este rubro: Netscape. Éste fue uno de los primeros navegadores web del mercado. Alrededor del año 1995, el número de servidores web, es decir, supercomputadoras que alojaban sitios web, superó la cantidad de servidores FTP, por lo que creció mucho más el uso de esta tecnología, hasta que logró convertirse en lo que es actualmente: la mayor red mundial de datos del planeta. Posteriormente se creó la Internet Society, un ente regulador de contenidos y actividades para esa gran red. Según este organismo, hoy en día el tráfico de Internet se triplica cada dos meses y alcanza a más de 200 países. La conexión Aunque para poder crear nuestra propia página y montar un servidor web sería necesario que ya contáramos con una conexión a Internet y con conocimientos básicos sobre esta red y sobre informática en general, repasaremos los conceptos mínimos acerca de las diferentes clases de conexiones que existen y sus principales características. Básicamente, en el mercado contamos con dos tipos de conexiones a Internet, que son las más utilizadas hoy en día. El primer tipo es la conexión dial-up, que se realiza mediante la línea telefónica. Para ello, debemos contar con un dispositivo de hardware especial denominado módem, que puede ser de dos tipos: interno (se instala dentro del gabinete en un slot de expansión de la placa madre) o externo (queda fuera de la computadora y se conecta a algún puerto del gabinete, que últimamente es el USB). Un módem de acceso telefónico presenta dos conectores: uno para coFigura 3. Ejemplo de un módem dial-up nectar el cable de la línea telefónica (LINE) de 56 Kbps interno. y otro para enchufar el teléfono (PHONE). La palabra módem es una simplificación de los términos modulador/demodulador, lo que indica de manera resumida la funcionalidad de este componente. La operatoria de un módem se sintetiza en la codificación y decodificación de datos para transmitirlos como bits por la línea de voz del cable de teléfono. Este tipo de conexiones es uno de los más primitivos, y debido a que la línea telefónica no posee una alta tecnología, tienen una velocidad lenta en la transferencia de datos y un bajo nivel de seguridad. La velocidad máxima alcanzada en conexiones dial-up es de 56 Kbps. 16
17. La World Wide Web En una conexión telefónica, el módem utiliza el tono de marcado para establecer la conexión y se necesita contar con un nombre de usuario y contraseña, que son proporcionados por nuestro ISP (Internet Service Provider, es decir, proveedor de servicio de Internet). El segundo tipo de conexión a Internet es la conexión de banda ancha, que también utiliza un módem para establecer la comunicación (normalmente externos). Estas conexiones brindan más seguridad y una mayor velocidad de transferencia de datos. Existen diferentes variantes. La más utilizada en conexiones hogareñas se establece (al igual que las dial-up) mediante la línea telefónica y es llamada DSL (Digital Suscriber Line) o ADSL (Asymmetric Digital Subscriber Line). A diferencia de las conexiones por línea tele- Figura 4. Fotografía de un módem DSL externo. fónica tradicionales, en las conexiones ADSL se aplica a la línea telefónica un proceso de digitalización que permite estas altas velocidades. Actualmente, el estándar de velocidad de estas conexiones fluctúa entre los 256 Kbps y los 2 Mbps. LA WORLD WIDE WEB Sin dudarlo, se puede decir que el recurso más utilizado en el ámbito de Internet es la World Wide Web, comúnmente denominada Web. Se trata de un sistema de hipertexto que funciona sobre la gran red de redes. Como ya dijimos, Internet y todos sus servicios funcionan principalmente a través de un sistema de clientes y servidores. En el caso de la World Wide Web, el funcionamiento es de la misma manera. Para explicarlo de forma sencilla y resumida, los servidores web serán los que alojarán las diferentes páginas de cada sitio junto con sus componentes (imágenes, animaciones, aplica- ❘❘❘ CONEXIONES DE BANDA ANCHA Existen también otras variantes para conexiones de banda ancha, quizá más utilizadas en empresas y redes más grandes. Se trata del cablemódem y las conexiones satelitales. En el primer caso, los datos son enviados y recibidos a través del cable coaxil de TV por cable, y en el segundo, se necesita una antena para conectarse satelitalmente con el proveedor (ISP). 17
18. CREACIÓN DE SITIOS WEB ciones, etc.). El cliente web será el que consumirá todos esos recursos brindados por los servidores. Para eso, el cliente web debe contar con un software que interprete y permita visualizar las páginas web. Estos programas, denominados navegadores web o browsers, nos dan la posibilidad de recorrer las diferentes páginas de un sitio web a través de los links (también llamados vínculos o enlaces) y mediante un método de resolución de nombres (DNS) que explicaremos más adelante. Ya hemos aclarado que para que el servicio web funcione debemos contar con algunos factores imprescindibles. Ordenemos un poco estos conceptos y veamos las características y relevancia que posee cada uno. Como primer eslabón, encontramos los servidores que contienen sitios web constituidos por páginas web, imágenes y diferentes componentes adicionales que las conformarán. Como contrapunto, encontramos al cliente web, que debe contar con una conexión a Internet y un navegador para explorar las diferentes páginas de los múltiples sitios de la World Wide Web. Ahora que tenemos en claro los niveles y elementos que constituyen y con los que deben contar un cliente y un servidor web, analicemos cada uno de ellos. Figura 5. Internet Explorer es uno de los navegadores web más populares del mercado. ❘❘❘ EL E-MAIL El correo electrónico o e-mail es un servicio que se brinda a través de grandes redes y también a través de Internet. Es un sistema de envío y recepción de mensajes de texto e hipertexto pero no perteneciente a la World Wide Web, ya que utiliza protocolos diferentes para establecer las comunicaciones. En los mensajes de correo electrónico también podemos adjuntar imágenes y archivos. 18
19. La World Wide Web Los sitios web Un sitio de la Web en un conjunto de documentos electrónicos de hipertexto (páginas web) que componen y hacen referencia a un tema determinado. Normalmente están definidos por una página de bienvenida (home page), que será la que se muestre inicialmente y desde la que se podrá acceder a las demás páginas mediante enlaces (links). Los sitios web poseen un nombre de dominio particular que se conoce popularmente como dirección de Internet. Como ya debemos saber, en una red TCP/IP cada equipo es identificado por un número IP, que puede ser dinámico (cambia en cada inicio de sesión) o estático (es siempre la misma). Generalmente, en las conexiones dial-up y en las de banda ancha para usuarios hogareños la IP suele ser dinámica. En cambio, en los servicios que se brindan a empresas, estas direcciones son estáticas (o fijas) porque es más común que en este ámbito se brinden servicios y, por esa razón, es necesario que la máquina se identifique siempre de la misma manera para poder encontrarla dentro de Internet y así acceder a sus servicios (sitios web, e-mail, etc.). Siguiendo este criterio, cuando deseamos acceder a un sitio de la Web, tendríamos que indicar a nuestro navegador el número de IP del servidor que aloja a ese sitio. Aquí se nos plantea el primer inconveniente: ¿no sería demasiado complejo memorizar una enorme cantidad de datos numéricos? La solución nació a partir de la implementación de un sistema de resolución de nombres: el DNS (Domain Name System), que traduce cada nombre de dominio a la dirección IP asociada a partir de una tabla de registros. Este nombre de dominio o URL es mucho más fácil de recordar para nosotros, y es de esta manera que le indicamos a nuestro navegador el sitio al que queremos acceder. Pero si no tuviésemos una IP fija, podríamos usar otra modalidad de DNS llamada DDNS (Dynamic DNS). Este DNS dinámico se encarga de actualizar la tabla de asociaciones cada vez que la IP cambia. Generalmente, este servicio es prestado por empresas que proveen un programa que, al instalarse en la computadora, envía de forma automática la nueva dirección IP. Las direcciones de Internet están compuestas por varios elementos. Tomemos el ejemplo de http://www.google.com.ar. El prefijo http:// indica al navegador el puerto que se usará para acceder al sitio. Actualmente los navegadores reconocen automáticamente este comando, por lo que es posible obviarlo. Entonces, la dirección de Internet que- ❘❘❘ MÚLTIPLES DOMINIOS El sistema de DNS también es muy útil para asignar diferentes nombres de dominio a una misma IP, es decir, que en un mismo servidor podemos alojar varios sitios web, pero en diferentes directorios del servidor. Por ejemplo, si en nuestro servidor tenemos una carpeta que se denomina sitio principal y otra sitio secundario, podremos aplicar un nombre de dominio a cada una de ellas. 19
20. CREACIÓN DE SITIOS WEB daría como www.google.com.ar. Posteriormente encontramos la sigla www, que aclara al browser que el sitio en cuestión pertenece a la World Wide Web. Luego se indica el nombre en sí del sitio, que es a elección de su administrador. En este caso, google. Por último, encontramos los sufijos .com y .ar. El primero establece la categoría del sitio, es decir, qué tipo de usuario u organización lo posee. En el caso del .com se entiende que es una empresa comercial, pero existen otros sufijos, como .org (organizaciones sin fines de lucro), .edu (educación), .gov (entidades gubernamentales), .mil (entidades militares), etc. El último sufijo hace referencia al país donde se encuentra el servidor web que aloja al sitio. Es así que .ar representa a la Argentina, .mx a México, .br a Brasil, .es a España, .it a Italia o .cl a Chile, entre otros. Es muy posible también que encontremos sitios sin este último sufijo, como, por ejemplo, www.hotmail.com, lo que indica que este sitio no pertenece a ningún país en particular. Figura 6. Las organizaciones, como las Naciones Unidas, utilizan sufijo .org para publicar sus sitios. ❘❘❘ LAS DESCARGAS Una descarga o download es una interacción, entre el servidor web y el cliente, que nos permite extraer archivos desde aquel hasta nuestro equipo mediante el protocolo HTTP sin la necesidad de contar con el servicio de FTP (aunque éste es bastante más veloz en la descarga). Esto se realiza mediante un clic en un enlace que hace referencia a un archivo ubicado en el servidor. 20
21. La World Wide Web Las páginas web Cada página que compone un sitio web puede estar conformada por diferentes elementos que hacen de ella un documento mucho más atractivo, tanto en su aspecto visual como en sus contenidos. Dentro de Internet podemos encontrarnos con páginas con todo tipo de componentes, como imágenes, animaciones, elementos dinámicos como menús desplegables o barras de navegación y aplicaciones complementarias, como plugins y applets que realizan diferentes funciones (en capítulos posteriores analizaremos cada uno de estos elementos). Figura 7. Muchos sitios web nos ofrecen diferente calidad de servicios, como, por ejemplo, los foros de discusión. Las páginas de hipertexto convencionales son documentos electrónicos con formato HTML, que es el lenguaje básico por el cual se desarrollan (o programan) las páginas. Este formato soporta dos extensiones para sus archivos: HTML y HTM, por lo que la página de inicio de nuestro sitio quedaría nombrada, por ❘❘❘ OTROS FORMATOS Existen también otros formatos (de los que hablaremos en capítulos posteriores con mayor profundidad) que son aceptados e interpretados por los servidores web y los clientes (navegadores), como los ASP, PHP, CGI o XML. Éstos son páginas web desarrolladas con diferentes lenguajes de programación. 21
22. CREACIÓN DE SITIOS WEB ejemplo, como inicio.html. Es conveniente aclarar que la mayoría de los servicios que mantienen servidores web aceptan como nombre de página inicial los nombres de archivo index o default. Igualmente, más adelante comprenderemos más acerca de los servidores web y su contenido. Además del texto tradicional, imágenes y contenidos dinámicos, una página web suele contener lo que normalmente se llama link o hipervínculo. Estos pueden ser representados por texto o imágenes y su función es dar acceso directo a otra página del mismo sitio o a una de otro diferente. La primera clase se denomina link con vínculo interno, y tiene la referencia a una página ubicada dentro del mismo servidor que la que estamos visualizando. La segunda da acceso a un sitio externo o a alguna de sus páginas. Un link también pude hacer referencia directa a la creación de un mensaje de correo electrónico, pero esto depende del servicio de correo que esté configurado como predeterminado en el equipo cliente (en Windows, generalmente es Outlook). Lo primordial que hay que tener en cuenta con respecto a las páginas web, es su organización dentro del sitio, que será definida por el mapa del sitio que tengamos en mente. EL NAVEGADOR Técnica y prácticamente, un navegador web (también llamado browser) es una aplicación que se instala en la computadora del cliente y que, mediante una conexión a Internet, permite acceder a todos los sitios de la red mundial y así visualizar páginas de hipertexto estáticas y dinámicas. Como ya dijimos, las páginas web pueden contener contenidos de todo tipo, como texto plano, links, imágenes, animaciones, secuencias de audio y video y aplicaciones de todo tipo, y para que éstos puedan ser visualizados y ejecutados adecuadamente, el navegador web debe contar con los soportes necesarios para cada tipo de dato digital. Un factor fundamental en la navegación de sitios web son los links, ya que a través de ellos podremos acceder a otras páginas, volver a la anterior, enviar mensajes de correo electrónico, iniciar descargas y algunas tareas complementarias más. ❘❘❘ CARACTERÍSTICAS ADICIONALES Un navegador web también nos da la posibilidad de marcar páginas web para acceder de manera más fácil posteriormente. Estos accesos son denominados marcadores, bookmarks o favoritos. Otra característica de los navegadores es la de poder acceder a todas las páginas visitadas anteriormente en un período determinado de tiempo. Esta función normalmente se denomina historial. 22
23. El navegador La comunicación entre el navegador web del cliente y el servidor web de Internet se establece mediante el protocolo HTTP, aunque en la mayoría de los casos también se soportan otros protocolos adicionales, como el FTP, el Gopher y el HTTPS (versión cifrada y más segura del HTTP). Entonces, podemos decir que la función básica de un navegador es mostrar en pantalla documentos HTML (páginas web) alojados en servidores web. Actualmente, los navegadores poseen la capacidad de interpretar también la renderización de imágenes y animaciones, la reproducción de audio y video en tiempo real (streaming), y la ejecución de diversos programas y scripts en diferentes formatos y mediante diversos protocolos. Figura 8. Internet Explorer y Mozilla Firefox son las opciones más difundidas entre los navegadores. En cuanto a las diferentes opciones que se nos presentan a la hora de instalar un navegador, todo dependerá del sistema operativo que utilicemos. En este libro nos centraremos en el uso de Windows XP Profesional, y las variantes que manejamos son varias: Opera, Firefox, Amaya, etc., pero la que se presentará como ejemplo en todos los ejercicios y explicaciones es la más popular y fácil de usar de todas: Internet Explorer (ya incluido con Windows). Este programa fue producido por Microsoft en el año 1995 y su primera versión fue lanzada con la versión de Windows de ese año (Windows 95). Desde ese entonces, Windows se estableció en el mercado como el sistema operativo estándar y, junto a ello, Internet Explorer también se convirtió en el líder en popularidad. Con cada nueva versión de Windows lanzada al mercado, se incluyó también una de Internet Explorer, que llega hasta la versión 7.0 que es incluida con Windows Vista. La versión que utilizaremos en este libro es la más estable, funcional y versátil de todas: Internet Explorer 6.0 incluida con Windows XP, que más adelante conoceremos y analizaremos de forma más profunda. El protocolo HTTP y las transacciones de datos Como ya explicamos, el protocolo utilizado para el acceso, visualización y navegación web es el denominado HTTP. Su última versión es la 1.1, y su funcionamiento de conexión es simple, ya que se basa en redes cliente-servidor. Cuando el usuario ingresa una dirección de Internet (por ejemplo, http://www.mydaemon.com) en su navegador (cliente web), realiza una petición de datos. El protocolo http primero resolverá la configuración DNS establecida en Internet que corresponde a ese dominio, para poder establecer cuál es el número de IP asociado con esta dirección, por ejemplo, 64.226.24.116. Una vez resuelto esto, intentará establecer la comunicación con dicho servidor mediante el puerto pre23
24. CREACIÓN DE SITIOS WEB determinado de la Web, es decir, el puerto 80. Cuando se ha establecido esa conexión, se envía la petición al servidor para que se muestre la página solicitada en el navegador del cliente. Para eso se le indica al servidor web los datos necesarios para la transferencia de los datos, como el número de IP o la página que se desea visualizar (si el cliente no especificó ninguna en particular, se mostrará la página establecida como inicial en el servidor web de dicho sitio). Con todos los datos resueltos, el servidor web enviará la respuesta al cliente remoto, mostrando la página correspondiente en su navegador. Una característica muy importante del protocolo HTTP es que no cuenta con la posibilidad de almacenar datos sobre las conexiones, por lo que cuando una transacción de petición/envío de datos finaliza, los datos que se establecieron se perderán. La solución a este conflicto se realiza mediante las cookies. Se trata de archivos pequeños que se almacenan en la máquina del usuario cliente y en el servidor web, y guardan toda la información recopilada con respecto a los usuarios (login, contraseñas, etc.), lo que sirve para que cuando ingresemos nuevamente en ese sitio, seamos reconocidos por él. Internet Explorer Como ya vimos, para la navegación por Internet (y también para testear nuestras páginas), será necesario contar con un cliente web, es decir, un navegador. En nuestro caso utilizaremos el más popular: Internet Explorer. Esta aplicación está incluida en Windows XP y podremos acceder a ella yendo a Inicio/Todos los programas/Internet Explorer. En el caso que en nuestra instalación de Windows no hayamos incluido este programa, para instalarlo simplemente debemos ir a Inicio/Panel de control/Agregar o quitar programas. Allí seleccionamos la opción Agregar o quitar componentes de Windows y marcamos la casilla que identifica a Internet Explorer. Insertamos el CD de Windows XP y seguimos todos los pasos del proceso de instalación. Para obtener más información acerca de Internet Explorer, podemos ingresar en el sitio www.microsoft.com/spain/windows/ie/default.mspx, donde encontraremos además, sus características principales, artículos sobre su utilización y novedades sobre las nuevas versiones del navegador, entre otras cosas. ❘❘❘ FTP ANÓNIMO Es posible también que el servidor o directorio FTP sea público y no requiera un usuario y contraseña específicos. Estos servidores se denominan FTPs anónimos y cuando se nos pidan estos datos debemos establecer en ambos casos (usuario y contraseña) la palabra anonymous, tanto en el caso de los clientes FTP como en el acceso vía navegador. 24
25. El navegador ● Los elementos de Internet Explorer GUÍA VISUAL 1 Barra de estado: muestra información sobre el navegador, el sitio y los procesos entre ambos. Área de visualización: aquí se muestra el contenido de la página web. Botón Atrás: permite volver a la página anterior. Botón Adelante: si navegamos hacia atrás, permite acceder a la página siguiente. Botón Detener: detiene la carga de la página web solicitada. Botón Actualizar: recarga la página actual. Botón Inicio: se dirige a la página inicial establecida en Internet Explorer. Barra de título: muestra el título de la página web. Barra de menús: a través de los diversos menús permite acceder a todas las funciones que ofrece Internet Explorer. Favoritos: muestra una barra lateral con todos los marcadores. Historial: despliega una barra lateral con todos los sitios visitados últimamente. Barra de direcciones: nos permite escribir las direcciones web para luego acceder a ellas mediante el botón Ir o la tecla ENTER. Botones de control de la ventana: permiten cerrar minimizar, maximizar y restaurar la ventana del navegador. 25
26. CREACIÓN DE SITIOS WEB TRANSFERENCIA DE ARCHIVOS: FTP Además del servicio web y el protocolo HTTP, otra de las herramientas que usaremos durante los ejercicios y explicaciones de este libro es el FTP (File Transfer Protocol). Es fundamental aclarar que no pertenece al ámbito de la Web sino por el contrario, se trata de un protocolo de comunicaciones diferente del HTTP, que resulta mucho más eficiente y seguro en la transferencia de grandes cantidades de datos. El servicio de FTP será de vital importancia a la hora de subir contenidos a nuestro servidor web. Al igual que el protocolo HTTP, el FTP también necesita de un servidor y de un cliente. El servidor podrá instalarse paralelamente al servidor web, al igual que el cliente puede ser instalado en simultáneo con el navegador. Así como el HTTP utiliza el puerto 80, en FTP usa el puerto 21 de forma predeterminada, aunque estos valores pueden ser modificados en el momento en que configuramos nuestro servidor. Figura 9. Los sitios FTP se muestran con la misma estructura de carpetas que un directorio local. En algunos navegadores web también se nos da la posibilidad de acceder a sitios FTP, lo que hará mucho más eficaces y rápidas nuestras tareas de subida y bajada de archivos. Esto lo lograremos aclarándole al browser que en lugar de una dirección de Internet, se trata de un sitio FTP al que deseamos acceder, por lo que en lugar del prefijo http://, tendremos que colocar ftp://. El FTP cuenta también con un sistema de seguridad de usuario y contraseña. 26
27. Transferencia de archivos: FTP En el caso de un cliente específico de FTP, la configuración de estos parámetros será fácil, pero en el caso de que queramos acceder a un sitio FTP por medio de nuestro navegador, tendremos que incorporar estos dos elementos dentro de la dirección FTP que ingresamos, por lo que ésta quedaría de la siguiente manera: ftp://usuario:contraseña@servidor. Supongamos que nuestro servidor FTP fuera, por ejemplo, una empresa comercial española denominada FixServer, por lo que la dirección del servidor FTP de la misma es fixserver.com.es, y nuestro usuario y contraseña fueran usuario1 y usr1 respectivamente. Lo que deberíamos escribir en la barra de direcciones de nuestro navegador sería ftp://usuario1:usr1@fixserver.com.es. … RESUMEN Durante la lectura del capítulo transcurrido pudimos aprender y comprender todos los conceptos básicos que hay que tener en cuenta para comenzar con la planificación y el desarrollo de un sitio web profesional. En el próximo capítulo seguiremos incorporando conocimientos, pero más específicamente acerca de los criterios y objetivos que hay que decidir antes de comenzar con la creación práctica del sitio. 27
28. ✔ ACTIVIDADES TEST DE AUTOEVALUACIÓN 1 ¿Qué diferencia existe entre Internet y la World Wide Web? 2 Explique las propiedades del protocolo y el lenguaje predeterminados de la Web. ACTIVIDADES PRÁCTICAS ✔ Averigüe en Internet acerca de otras redes posteriores a ésta, como la ARPANet. ✔ Busque información acerca de los otros navegadores disponibles. Si le es posible descargue alguno, instálelo en su PC y 3 ¿Qué es un dominio? 4 Explique la función de un browser. Dé dos ejemplos. 5 ¿Para qué sirve el sistema de DNS? compárelo con Internet Explorer. ✔ Investigue sobre los restantes protocolos de Internet (además de HTTP y FTP). ✔ Averigüe alguna dirección FTP y trate de acceder a ella mediante su explorador. 6 Explique FTP. ✔ Infórmese acerca de diferentes clientes 7 Explique el método de transacción de datos entre un cliente y un servidor web. 8 ¿Qué son las cookies? 9 Nombre y explique la función de tres de los elementos que componen a Internet Explorer. 10 ¿Cuáles son las maneras de acceder a un sitio FTP? 28 FTP. Descargue alguno, instálelo y acceda a la dirección del punto 4 mediante él.
29. CREACIÓN DE SITIOS WEB Capítulo 2 Planificación y producción del sitio Durante este capítulo analizaremos cada etapa del proceso de creatividad previo a la construcción de un sitio. Esto debe realizarse para obtener un resultado de calidad y evitar malentendidos con nuestros clientes o compañeros de equipo. También empezaremos a desglosar la estructura básica de una página web y sus posibles componentes mediante la escritura del código fuente. SERVICIO DE ATENCIÓN AL LECTOR: lectores@mpediciones.com Definición del sitio Objetivos del sitio Definir contenidos La dirección artística El lenguaje web: HTML ¿Qué son los tags? Tags básicos Formateo de textos Inserción de imágenes Los enlaces Resumen Actividades 30 30 30 32 33 34 34 37 40 42 43 44
30. CREACIÓN DE SITIOS WEB DEFINICIÓN DEL SITIO Es hora de comenzar a evaluar los criterios y contenidos que incluiremos en el armado de nuestro sitio web. Este proceso previo al armado de las páginas es de vital importancia para proceder con un trabajo claro y organizado, como también para despejar dudas acerca de los potenciales clientes y consumidores si el sitio web es para una empresa u organización. Asimismo, si se tratara de un sitio personal, muchos de los conceptos que veremos nos serán de gran utilidad para ordenar nuestros procedimientos y crear normas para el desarrollo puntual del sitio. Objetivos del sitio Antes de comenzar con un proyecto web, tenemos que tener en claro muchos factores que se encierran en un solo concepto: la definición de los objetivos del sitio y la forma de cumplirlos. Lo mejor será establecer la meta central con la que debe cumplir el sitio respecto de los usuarios, y de allí en más, incorporar nuevos objetivos complementarios o secundarios. Es muy importante tener estos fines en claro y registrarlos, es decir, escribirlos. Una manera sencilla de descubrir adecuadamente los objetivos de un sitio es definir las características, visiones y necesidades particulares de la empresa o del usuario propietario y/o administrador. Una vez hecho esto, debemos tener en cuenta que el principal objetivo de cualquier sitio es tener relevancia dentro de Internet. Como no es lógico ni recomendable instalar sitios web sin ningún propósito, será importante tener cierta importancia y presencia dentro de la Web con respecto a nuestros actuales o futuros competidores o sitios similares. Esto podremos lograrlo incluyendo siempre información actualizada, una buena organización e interactividad con el usuario. Otro factor fundamental para establecer los objetivos del sitio será definir el target, es decir, la audiencia a la que se dirige su contenido. Este proceso no será sencillo, pero al lograr todos estos puntos, ya estaremos listos para centrarnos en el contenido de nuestras páginas. Definir contenidos Una vez que tengamos establecidos los objetivos y destinatarios del sitio, así como las necesidades del propietario, no nos será muy difícil definir los contenidos y la estructura de las páginas que compondrán nuestro sitio. Para esto, lo más frecuente es desarrollar un mapa de contenidos, definiendo primero factores fundamentales. Lo más lógico será realizar una serie de preguntas (que surjan de la etapa de objetivos y target) a personas que conozcan bien al propietario o patrocinador del sitio, tales como: “¿Qué significa el nombre?”, “¿Qué área le gustaría encontrar en el sitio?”, “¿Qué tipo de contenido querría ver en ca30
31. Definición del sitio da área?”. Con las respuestas obtenidas podremos realizar las modificaciones necesarias, comprobando aciertos y errores en las decisiones y planes establecidos. Dentro de los contenidos básicos de sitios de empresas e instituciones podemos encontrar secciones como mapa del sitio, formularios de contacto, información personal o institucional, novedades, buscador interno, áreas para usuarios registrados, servicios y productos, ayuda, historia, etc. Para definir el tipo de contenido que incorporaremos a nuestro sitio web, será también muy importante realizar un análisis exhaustivo y profundo sobre sitios de similares características, es decir, destinados a una audiencia semejante y con objetivos similares. La comparación e incorporación de nuevas ideas será fundamental. Finalmente, estaremos listos para pensar en estructurar nuestras ideas, es decir, darle forma y diseño a todo lo planteado. Será de vital importancia realizar un esquema en papel o de forma digital (diagrama o diseño en programas de ilustración) de la estructura de cada página y sección de nuestro sitio. Luego se puede empezar a definir el aspecto visual (colores, imagen corporativa, estilo de fuente, títulos, encabezados, botones, menús, orientación de los textos y de las imágenes, logotipo, elementos multimedia, etc.). Será también conveniente aclarar todas las interacciones y sus resultados en forma de notas y también gráficamente (como los formularios, los registros de usuarios, los links, las descargas, etc.). Una vez que tenemos desarrollados estos bocetos, contamos con las herramientas necesarias para poder iniciar la etapa de creación práctica del sitio, proceso que comenzaremos a ver a partir del siguiente capítulo. Sitio web ¿Qué es? Indice Genera Persona Noticias Preguntas frecuentes Descargas Links Contacto Figura 1. Diseño de un boceto digital de un mapa para un sitio web estándar. 31
32. CREACIÓN DE SITIOS WEB La dirección artística Para mejorar el diseño y todos los aspectos visuales de un sitio, una gran idea es comenzar por la dirección artística. Para eso, primero conoceremos los conceptos básicos de un director de arte, aprendiendo la manera en que los criterios de una correcta dirección artística pueden crear y dar forma a una experiencia e interacción muy atractiva y funcional para el usuario. En nuestra futura función de diseñador y desarrollador de sitios web, los elementos y componentes esenciales, pero individuales, formarán parte de un todo, es decir, de una página con un criterio determinado. Pero antes que nada, cumpliendo con los procedimientos de director de arte, tenemos como objetivo unificar todas estas partes para lograr los máximos resultados y los mejores efectos y percepciones del usuario. En definitiva, los conceptos que explicamos aquí no pretenden más que enseñar la técnica que utiliza un director de arte para relacionarla con el diseño web y analizar de qué manera puede influir esto en el efecto global de un sitio. El factor más importante de la dirección artística es el concepto. Y por cierto, el talento es fundamental en el momento de desarrollar ideas, que serán las que movilizarán las estructuras de un sitio y le darán vida. Las ideas son parte integrante de un proceso creativo, y será nuestro primer objetivo descubrir cuál es y de qué manera se desarrolla el nuestro. Otro punto importante es la motivación y la estimulación de esas ideas. Para comenzar, debemos decir que cualquier idea, hasta la más alocada, puede tener un gran efecto sobre la experiencia del usuario, por lo que será importantísimo exponer la totalidad de las ideas surgidas, tanto desde el entorno creativo como por parte del cliente. Un plan muy efectivo para la exposición y selección de ideas creativas es organizarlas en una hoja de papel. Normalmente se toma una hoja y se coloca el objetivo del sitio, y luego se formulan 20 ideas principales como posibles futuras soluciones. Para ello deberemos tener en cuenta algunos ítems de relevancia. Lo primero será no censurarse, ya que cualquier idea es bienvenida en este proceso. También será fundamental escribir las ideas de forma rápida y resumida pero sin olvidar sus puntos clave. También es útil utilizar recursos gráficos como ejemplo para entender mejor las ideas, pero sin ponerse a diseñar. Luego de estos pasos básicos, podemos pasar a la selección de ideas creativas, donde ❘❘❘ ESTRUCTURA Y DISEÑO A la hora de comenzar a armar los diagramas de cada área, sección o página del sitio, será importante tener en claro qué significan dos conceptos. Estructura se refiere a la forma que tendrá el sitio en sus secciones, funciones y sistemas de navegación. En cambio, el diseño implica las soluciones gráficas que se implementarán en el sitio, como los colores, las formas, viñetas, etc. 32
33. El lenguaje web: HTML debemos analizar y elegir las dos o tres ideas que más nos convencen y concuerdan con el objetivo propuesto, para trabajarlas poco a poco. Esto ya nos permitirá pensar en el diseño, los colores, las tipografías, etc. Luego llegará el momento de presentar la idea seleccionada, que deberá ser aprobada por el propietario del sitio. A partir de entonces, se comienza con la etapa de producción, en la que será necesario mantener un contacto directo con el cliente y con todo el equipo que esté trabajando con nosotros en el proyecto (creativos, diseñadores, programadores, etc.). EL LENGUAJE WEB: HTML El HTML no es un lenguaje que resulte demasiado complicado; un usuario principiante puede comprender, y hasta programar, páginas web mediante este código sin ningún tipo de inconvenientes. Bastará con contar con un editor simple de texto para desarrollar el código, como puede ser Word de la suite Office, WordPad o el simple Bloc de notas de Windows. Tomemos como ejemplo esta última aplicación, que será la que resultará más sencilla de manejar para todo tipo de nivel de usuario. Lo básico y necesario a la hora de crear una página web escribiendo manualmente su codificación será abrir la aplicación con un nuevo documento de texto, desarrollar el contenido del código y almacenar este archivo en nuestro disco duro, reemplazando el formato de texto (TXT en el bloc de notas), por un formato de hipertexto, como HTML o HTM. Una vez que hayamos guardado nuestra página con esta extensión, simplemente bastará con ejecutar el archivo en nuestro navegador para observar los resultados. Vamos a analizar una página HTML básica según su código. Tengamos en cuenta que por ahora sólo veremos los componentes fundamentales del código (texto, imágenes y enlaces). Los componentes y comandos complementarios, así como algunos más avanzados, los analizaremos en capítulos posteriores, cuando veamos el manejo de software específico para este tipo de tareas. ❘❘❘ LA FASE DE PRODUCCIÓN Un truco para la fase de producción de la etapa de dirección artística es conocer cómo aprovechar las tecnologías disponibles, es decir, saber qué se puede hacer y qué no. Para mejorar nuestro servicio, conviene asociarse con diferentes especialistas o conocedores de cada tema en particular y no trabajar solo, ya que la suma de ideas y conocimientos puede mejorar mucho el rendimiento. 33
34. CREACIÓN DE SITIOS WEB ¿Qué son los tags? Primero debemos establecer que el código HTML se maneja mediante diversos tags (también denominados etiquetas), es decir, instrucciones que corresponden a determinado elemento que se va a mostrar o ejecutar dentro de la página. Los tags tienen un nombre específico para cada acción y elemento de la página, y se encierran entre los signos < y >. Cada vez que queremos dar una instrucción, ésta comenzará con un tag y finalizará con su tag correlativo. El tag que finaliza una instrucción llevará el símbolo / dentro. Tomemos el ejemplo de un párrafo, donde el tag que le corresponde es P. Así es que, para iniciar un párrafo de texto tendremos que colocar el tag <P>, luego escribiremos el texto que deseamos que contenga ese párrafo, y una vez que está finalizado, cerramos la instrucción con el tag de cierre correspondiente, es decir </P>. También para cada tag existen diferentes modificadores que se encierran dentro de esos signos < y > del tag de inicio y que van luego del nombre del tag. Por ejemplo, un modificador del tag <P> es el comando ALIGN=alineación, donde alineación puede ser LEFT (izquierda), RIGHT (derecha), CENTER (centrado) o JUSTIFY (justificado o completo). Este modificador nos permite indicar la alineación que tendrán los caracteres del párrafo. Por ejemplo, si queremos centrar el texto del párrafo, su sintaxis quedaría de la siguiente forma: <P ALIGN=CENTER> texto del párrafo </P>. Tags básicos Con respecto a la clasificación básica de los tags, observemos lo siguiente: primero, para que el código sea interpretado correctamente por el navegador, debemos indicarle a éste en el código que el documento que está mostrando es una página web con código HTML, por lo que siempre comenzaremos el desarrollo de una página con el tag <HTML> y la finalizaremos con su tag de cierre correspondiente, o sea, </HTML> (este cierre va luego de todo el contenido de código de la página). Dentro de todo este código, podemos definir dos áreas claras que determinan los sectores más importantes de la página: el encabezado y el cuerpo. La primera sección se iniciará con el tag <HEAD> y concluirá con </HEAD>, y comprenderá elementos como el título de la página (que se mostrará en la barra de títulos de navegador) y los scripts y comandos correspondientes a los que se haga referencia en cualquier parte del cuerpo de la página. El título de la página se establecerá con los tags <TITLE> y </TITLE>, obviamente dentro de los tags <HEAD> y </HEAD>. Por otro lado, luego de finalizar con el tag <HEAD>, nos encontramos con el cuerpo de la página, que se comprenderá entre el tag de inicio <BODY> y el de cierre </BODY>. Es entre estas dos etiquetas donde desarrollaremos todo el contenido de la página insertando texto, dándole formato, incrustando imágenes, tablas, elementos multimedia, links y todos los componentes que deseamos que se muestren en el navegador, como también la configuración de sus propiedades. 34
35. El lenguaje web: HTML Veamos, entonces, un ejemplo básico de una página web estándar, con los tags que hemos visto hasta el momento, con los comentarios aclaratorios correspondientes. <HTML> <!— se inicia el código HTML —> <HEAD> <!— se inicia la cabecera de la página —> <TITLE> Página de prueba </TITLE> <! – se establece el título de la página —> </HEAD> <!— se cierra la cabecera de la página —> <BODY> <!— se inicia el cuerpo de la página —> <P ALIGN=CENTER> Esta es una página de prueba </P> <!— se incorpora un párrafo con su texto centrado —> </BODY> <!— se cierra el cuerpo de la página —> </HTML> <!— se cierra el código HTML —> Veamos ahora, paso a paso, cómo crear un nuevo documento HTML. ■ Crear un documento HTML PASO A PASO Abra un nuevo documento en el Bloc de notas de Windows (Inicio/Todos los programas/Accesorios/Bloc de notas). Escriba el código fuente anterior dentro del archivo. Cuando finalice, vaya a Archivo/Guardar como…. 35
36. CREACIÓN DE SITIOS WEB Al guardar seleccione la opción Todos los archivos y escriba el nombre que quiere darle seguido de la extensión HTML (HTML o HTM). Por ejemplo, Prueba.htm. Ahora que tenemos el documento creado, bastará con hacerle doble clic para ver el resultado en nuestro navegador. ❘❘❘ COMENTARIOS Como todo lenguaje de programación, HTML también ofrece la posibilidad de agregar comentarios al código fuente. Éstos no serán mostrados por el navegador y nos servirá a nosotros, desarrolladores, para tener más en claro la función o las secciones de la página. Los comentarios se agregan dentro del tag <!— comentario —>. 36
37. El lenguaje web: HTML Figura 2. Aquí se muestra en el navegador el resultado del código escrito en el ejemplo anterior. Formateo de textos El principal elemento de una página web es, sin dudas, el texto. A continuación enumeramos las etiquetas que más se utilizan para darle formato. <P> y </P> son los tags donde se encerrará el texto comprendido en cada párrafo. El modificador más común es ALIGN= (CENTER, LEFT, RIGHT o JUSTIFY), que establece la alineación del texto del párrafo. <Hx> y </Hx> son los comandos de inicio y de cierre para un tag que permite establecer el formato del texto según cabeceras preestablecidas por algunas normas del HTML. Es decir, son categorías de títulos que podemos utilizar fácilmente para dar jerarquías diferentes, como título, subtítulo, etc. La x del tag debe reemplazarse por valores del 1 al 6, y esto significará un aumento de tamaño en la tipografía. Por ejemplo, si escribimos <H1>Texto de testeo</H1>, la frase “Texto de testeo” se mostrará en el navegador del tamaño más grande. En cambio, si escribimos <H6>Texto de testeo</H6>, la frase se mostrará de un tamaño mucho más chico. El tag <FONT> (con su correspondiente cierre </FONT>) nos permitirá personalizar el formato del texto que se encuentre entre ellos. Sus modificadores más usados son FACE=nombre de tipografía (establece la fuente que se usa), COLOR=black (indica el color de la fuente, en este caso, negro) y SIZE=tamaño (aplica un tamaño al texto). Veamos un ejemplo. Supongamos que deseamos que el texto encerrado en este tag ❘❘❘ MODIFICAR EL CUERPO El tag <BODY> posee modificadores que cambiarán la visualización general del cuerpo de la página, como BGCOLOR=red (aplica un color de fondo a la página) o BACKGROUND=”imagen” (establece una imagen de fondo para la página). También podremos agregarle modificadores de texto como a un párrafo u oración: <BODY BGCOLOR=red TEXT=”#FFFFFF”> (letras blancas sobre el fondo rojo). 37
38. CREACIÓN DE SITIOS WEB tenga como fuente predeterminada la tipografía Arial, un tamaño de 5 píxeles y color rojo. En nuestro documento HTML deberemos escribir lo siguiente: <FONT FACE=Arial SIZE=5px COLOR=red>Texto</FONT> Dentro de un párrafo normal debemos escribir: <HTML> <HEAD> <TITLE>Página personal</TITLE> </HEAD> <BODY> <P> Deseo que <FONT FACE=Arial SIZE=5px COLOR=red>esta frase</FONT> quede resaltada </P> </BODY> </HTML> El navegador mostraría lo que se ve en la Figura 3. Figura 3. Con el tag <FONT> podremoss modificar los estilos de los textos para resaltar, titular o adecuar al diseño que elegimos. ❘❘❘ TAGS MODIFICADORES DE TEXTO Existen muchos tags que modifican el texto que encierran, por ejemplo, <B> … </B> (negrita), <I> … </I> (cursiva), <S> … </S> (tachado), <U> … </U> (subrayado), <SUP> … </SUP> (superíndice), <SUB> … </SUB> (subíndice), <CENTER> … </CENTER> (centrado), <BR> (cambia de línea, como un ENTER en un procesador de textos) o <HR> (inserta una línea horizontal). 38
39. El lenguaje web: HTML Codificación de colores El código HTML posee una norma específica para establecer los colores que podemos aplicarle a los elementos (normalmente a fondos y textos). En las explicaciones anteriores hemos visto que cada vez que se debía especificar un color, se lo denominaba con su nombre en inglés. Estos son alias de la norma de codificación de colores HTML, y son muy pocos los casos en que podremos detallar el color de esta manera. Algunos ejemplos son: rojo (red), negro (black), amarillo (yellow), azul (blue), verde (green), celeste (light blue), rosa (pink), verde oscuro (dark green), gris (gray) o naranja (orange), sólo por nombrar algunos ejemplos. Sin embargo, la forma más apropiada de denominar a los colores en el código HTML es a través de un código numérico de 6 cifras precedido por el signo #, ya que de este modo podremos utilizar una gama más amplia de colores. Este código numérico es un número en sistema hexadecimal. La paleta de colores web es bastante amplia y se denomina RGB (Red, Green y Blue), y para cada color se asigna uno de estos códigos. Es así que, por ejemplo, el color negro podrá ser especificado, además de con su nombre en inglés, con el código #000000, o el blanco con el #FFFFFF. De esta manera, por ejemplo, si deseamos aplicar un color lila claro a un texto tendríamos que escribir en el código <FONT COLOR= #CC99FF>Este texto es color lila</FONT>, y el resultado sería el observado en la Figura 4. Más adelante, cuando analicemos conceptos como el procesamiento de imágenes, la creación de páginas mediante software o el manejo de hojas de estilo, aprendemos más acerca de la codificación de colores y conoceremos todas las tonalidades existentes. Figura 4. Mediante la codificación de colores podremos incluir muchas más tonalidades a nuestras páginas web. Caracteres especiales En el lenguaje HTML contamos con varios caracteres que no se insertan de forma directa desde el teclado, sino a través de un código alfanumérico que representa al denominado carácter. La mayoría de las veces ese código comienza con el símbolo & y finaliza con ;. Por otro lado, así como no podemos insertar cierto tipo de caracteres de manera directa, tampoco podemos insertar más de un espacio seguido en39
40. CREACIÓN DE SITIOS WEB tre caracteres simplemente presionando la barra espaciadora de nuestro teclado. Para esto existe el comando &nbsp;. Veamos entonces, en la siguiente tabla, los principales caracteres especiales incluidos en la última versión del código HTML. CÓDIGO RESULTADO &aacute;, &Aacute;, &eacute;, &Eacute;, &iacute;, &Iacute;, &oacute;, &Oacute;, &uacute;, &Uacute; á, Á, é, É, í, Í, ó, Ó, ú, Ú &ntilde; y &Ntilde; ñyÑ &iquest; ¿ &iexcl; ¡ &ordm; º &ordf; ª &trade; o  ™ &copy; © &reg; ® &nbsp; espacio Tabla 1. Principales caracteres especiales codificados que pueden incluirse en un documento HTML. Inserción de imágenes El segundo componente de una página web para que ésta sea dinámica, explícita gráficamente y a la vez atractiva, será la inclusión de imágenes dentro de su cuerpo. La manera de realizar este procedimiento no es compleja, y se logra mediante el uso de un solo tag: <IMG>, al que será muy importante agregarle sus modificadores. El modificador principal es SRC=origen, donde en origen debemos especificar la ruta completa que indique dónde está ubicado el archivo. Esta ruta puede ser local si el archivo está ubicado en la carpeta del sitio o en alguna de sus subcarpetas, o también puede ser remota si se hace referencia a una dirección de Internet para este dato digital. Examinemos un ejemplo. Supongamos que deseamos incluir en el cuerpo principal de nuestra página una imagen con formato JPG llamada img1.jpg y ubicada en una subcarpeta del sitio denominada imágenes. El código que habría que ❘❘❘ HOJAS DE ESTILO Una hoja de estilo es un archivo con extensión CSS donde podemos definir estilos visuales y así evitar especificar el estilo de cada elemento cada vez que se lo inserta. Se declara su uso en el encabezado de la página con el tag <LINK REL=stylesheet> y su modificador SRC=origen. Si la hoja de estilo se llama estilos.css, el código sería <LINK REL=”stylesheet” SRC=”estilos.css” TYPE=”text/css”>. 40
41. El lenguaje web: HTML incluir en el documento HTML sería <IMG SRC=imágenes/img1.jpg>. El resultado sería el que se muestra en la siguiente figura. Figura 5. El navegador plasma en pantalla la imagen insertada. El segundo modificador relevante es el de texto alternativo, que se indica con el comando ALT=“Texto”. Este texto puede servir como nota o dato complementario a la imagen, y será el que se mostrará cuando el usuario pase el mouse sobre la imagen. Por ejemplo, para la imagen anterior, podríamos escribir lo siguiente: <IMG SRC=imágenes/img1.jpg ALT=“Juan Román Riquelme anota un gol para la selección Argentina.”>. Figura 6. Además de mostrar un recuadro cuando se pasa el mouse sobre la imagen, el navegador mostrará el texto alternativo si no puede mostrar la imagen. 41
42. CREACIÓN DE SITIOS WEB Por último, nos queda por conocer los modificadores de alineación y tamaño de una imagen en HTML. En el primer caso, como en la mayoría de los elementos, el comando utilizado será ALIGN=alineación, y los posibles valores pueden ser centrado (CENTER), alineación a la izquierda del texto (LEFT), alineación a la derecha del texto (RIGHT), con el texto en la línea más alta (TOP), con el texto en la línea más baja (BOTTOM) o con el texto en la línea media (MIDDLE). En cuanto al tamaño, contamos con dos modificadores que se aplicarán también a otros elementos, como tablas, celdas o capas. Estos son WIDTH=ancho y HEIGHT=alto. Ambos valores los debemos especificar en píxeles, por lo que si deseamos modificar el valor original de nuestra imagen a uno de 400x180 píxeles, tendríamos que definir el siguiente código <IMG SRC=imágenes/img1.jpg ALT=“Juan Román Riquelme anota un gol para la selección Argentina.” WIDHT=400 HEIGHT=180>. Figura 7. El navegador muestra la imagen con el tamaño modificado. Hay que tener cuidado con no deformar la imagen por darle valores desproporcionados. Los enlaces Finalmente, antes de comenzar a planificar la estructura y los contenidos de nuestro sitio, será de vital importancia conocer la forma de incluir links o enlaces en nuestras páginas, ya que éstos son el elemento que posibilita la navegación en el sitio. Los links son fáciles de incluir en nuestros documentos HTML, mediante la etiqueta <A> y su cierre </A>. Un factor fundamental en este tag es su modificador HREF=vínculo, que será el comando que indique la página, imagen o elemento al que se refiera el link. Todo lo que las etiquetas <A> y </A> comprendan entre sí conformará el hipervínculo, que puede ser texto o imágenes. 42
43. El lenguaje web: HTML Veamos en primer lugar cómo crear un link que incluya solamente texto. Supongamos que deseamos incluir en nuestro sitio un enlace a la página www.google.com.ar. El texto que tendremos que definir será <A HREF=http://www.google.com.ar>Ir a Google</A>. El navegador mostrará la frase Ir a Google con un link a ese sitio. Figura 8. Aquí se muestra un link simple de texto. Al pasarle por arriba con el mouse, en la barra de estado del navegador se muestra su destino. Distinto es el caso si deseamos incluir un vínculo en una imagen. El código que incluyamos primero debe abrir el tag de hipervínculo. Dentro deberemos insertar el tag de imagen con referencia al archivo de imagen que deseamos que represente al link. Finalmente, cerraremos el tag de enlace con </A>. Quedaría algo como <A HREF=http:// www.google.com.ar> <IMG SRC=logo.jpg BORDER=0> </A>. El resultado será el siguiente: Figura 9. Aquí se muestra un link de imagen. En la barra de estado del navegador también se muestra el destino del link. … RESUMEN Tener claros los conceptos sobre la preproducción y la selección de ideas para armar un sitio web no será una tarea sencilla, ya que nuestros sentidos de percepción y de estilo, la creatividad y la organización, jugarán papeles fundamentales. A pesar de que resulte difícil, esta tarea será fundamental, al igual que la incorporación de las nociones básicas sobre el lenguaje de diseño HTML. 43
44. ✔ ACTIVIDADES TEST DE AUTOEVALUACIÓN 1 ¿Qué es lo primero que hay que definir antes de comenzar con la creación de un sitio? 2 Explique para qué sirve un mapa de sitio y la mejor manera de armar su estructura. 3 Además de los objetivos, ¿qué otro factor es fundamental para comenzar a definir EJERCICIOS PRÁCTICOS ✔ Defina un sitio que quiera crear y establezca por escrito su objetivo final. ✔ Defina los contenidos y clasifíquelos en secciones. ✔ Realice un boceto en papel del mapa del sitio. contenidos? ✔ Elija el logotipo y la combinación de colo4 ¿De qué dos maneras podrán hacerse los res que identificarán a su sitio. bocetos de las páginas? ✔ Cree la primera página del sitio mediante 5 ¿Qué función básica cumple un director artístico? lenguaje HTML, incluyendo un título, una imagen, un texto informativo y un enlace a algún sitio de interés. 6 ¿En qué consiste la fase de producción? 7 ¿Cuál es el mejor método para seleccionar una idea para la dirección artística de un sitio web? 8 Enumere tres etiquetas básicas para el formateo de texto en HTML, sus propiedades y sus modificadores. 9 ¿Cuál es el tag para insertar imágenes en un documento de hipertexto? Explique sus modificadores. 10 ¿Cuál es el tag para insertar links? Explique sus modificadores. 44
45. CREACIÓN DE SITIOS WEB Capítulo 3 Imagen y animación En el presente capítulo aprenderemos acerca del tratamiento y la composición de imágenes para nuestras páginas web. También analizaremos y comenzaremos a utilizar los programas y las herramientas necesarias para realizar los componentes multimedia esenciales, como, por ejemplo, introducciones y menús interactivos. SERVICIO DE ATENCIÓN AL LECTOR: lectores@mpediciones.com Las imágenes digitales El diseño y la Web Gráficos vectoriales Los mapas de bits Los formatos Los colores en la Web La tipografía Macromedia Fireworks La pantalla principal Filtros y comandos HTML y Fireworks Resumen Actividades 46 46 47 48 49 53 54 56 59 62 65 71 72
46. CREACIÓN DE SITIOS WEB LAS IMÁGENES DIGITALES Dentro del mundo de Internet, un elemento vital para el aspecto de un sitio es incluir en ellos imágenes en diferentes formatos. Además, una imagen podrá cumplir diferentes funciones dentro de una página web, y que éstas sean cumplidas como queremos dependerá sólo de nosotros y de la aplicación de algunos de los factores que vimos en el capítulo anterior, como la clara definición de objetivos y los puntos sobresalientes de la dirección artística (colores, formato, tipografía, estética, logo, etc.). La correcta selección y edición de las imágenes digitales que vamos a incluir en nuestro sitio será fundamental para que éste posea un contenido visual acorde con el mensaje que se desea transmitir y que, a la vez, sea atractivo para el usuario final. En las páginas siguientes resolveremos algunos conceptos básicos, como el sentido esencial del diseño gráfico, su relación, diferencias y semejanzas con el diseño web. También analizaremos los principales elementos que caracterizan a las imágenes (resolución, coloración, etc.) y las diferentes clasificaciones y formatos que existen. Figura 1. A través de programas de diseño web como Fireworks, podemos optimizar nuestras imágenes y hasta crear sitios web por completo. EL DISEÑO Y LA WEB El diseño puede definirse como la tarea o el arte de seleccionar, crear, ordenar y combinar diferentes elementos dentro de un mismo espacio para lograr un objeto visual único que exprese una idea o concepto. Para que sea eficiente, el diseño debe comunicar un mensaje claro y de manera directa, a un target determi46
47. El diseño y la Web nado, siempre a través de cierto canal, que puede ser el papel (folletos, volantes, tarjetas, etc.) o un medio digital, como en nuestro caso, la Web. Para lograr esto, el diseñador deberá conocer con profundidad todos los recursos con los que cuenta o puede contar, y también ejercitar el desarrollo de nociones como el sentido común, el buen gusto y la imaginación. Estas prácticas serán las más complicadas, ya que no son procesos prácticos ni mecánicos, sino conceptuales. La teoría y práctica que ofrecemos en este capítulo podrán ayudar al lector a tener mayor dominio de estas dimensiones del diseño. Los recursos que ofrece el diseño son muchos, especialmente en el ámbito web. Algunos serán producidos por algún elemento en particular (como las fotografías, que se obtienen mediante la cámara digital o el escáner) y otros (la mayoría) los tendremos que crear nosotros mismos, como las ilustraciones o los iconos. La mayoría de ellos podrán ser modificados y personalizados con procesos como los que brindan programas como el que analizaremos y utilizaremos en este libro (Macromedia Fireworks). Todos estos recursos, más otros adicionales, podrán ser combinados para obtener esos elementos finales que cumplan un determinado objetivo dentro del sitio. Gráficos vectoriales Se denomina gráfico vectorial a toda imagen digital que esté definida por trazos computarizados, es decir, mediante elementos gráficos (líneas, puntos, figuras geométricas, etc.) creados a través de fórmulas matemáticas. Claros ejemplos son las ilustraciones o las tipografías, que se crean a partir de este tipo de método. Existen muchos programas de diseño gráfico e ilustración que permiten desarrollar esta clase de imágenes, como el CorelDRAW, Macromedia Freehand o Macromedia Flash, cuyas funcionalidades analizaremos más adelante. Un gráfico vectorial (a diferencia de su formato contrastante, el mapa de bits), puede ser escalado, rotado y deformado sin que esto dañe su definición y calidad. Esto se debe a que al realizar cualquiera de esos procedimientos, la computadora realizará nuevamente la operación matemática que define a los objetos y los representará nuevamente. Además de esta ventaja, un gráfico vectorial suele ser mucho más liviano que ❘❘❘ PROGRAMAS DE DISEÑO Existe una gran cantidad de programas para el manejo de los diferentes tipos de imágenes. Entre ellos encontramos a Adobe Photoshop, Corel PhotoPaint, PaintShop Pro y Macromedia Fireworks, dedicados a la edición y el retoque fotográfico. También encontramos programas como CorelDRAW, Macromedia Flash o Adobe Illustrator, inclinados hacia la imagen vectorial y la ilustración. 47
48. CREACIÓN DE SITIOS WEB un mapa de bits, y en algunos casos también podremos realizar animaciones con ellos, como con Macromedia Flash. Una desventaja de las imágenes vectoriales es que no pueden reproducir fotografías fielmente o desarrollar imágenes complejas. Figura 2. En los gráficos vectoriales podremos crear elementos a partir de líneas rectas, como polígonos, y también mediante curvas (mano alzada). Los mapas de bits Los mapas de bits, o gráficos rasterizados, son imágenes que están definidas por medio de milimétricos puntos (píxeles), cada uno de ellos con un valor de color y luminosidad determinada, que se ubican dentro de una cuadrícula que representa a la totalidad de la imagen. La proximidad de uno con otro refleja en la pantalla la sensación de una imagen homogénea. Mediante este método es que las imágenes fotográficas pueden digitalizarse (a través de escáneres, cámaras u otro medio digital) y mostrarse en la computadora. A diferencia de lo que sucede con un gráfico vectorial, al escalar o deformar un mapa de bits, éste perderá definición y calidad (siempre dependiendo de los valores que se modifiquen), debido a que al aumentar el valor de un píxel, éste tendrá que modificar también su tamaño y, por ende, en la pantalla se verá más grande y no será realista el efecto que produce en la continuación de uno con otro. Por eso es que los mapas de bits dependen mucho de la resolución que posea la imagen, y también de la cantidad de colores que tenga su paleta. ❘❘❘ VECTOR VS. PÍXEL Un gráfico vectorial puede estar definido por una serie de elementos gráficos que determinarán su estructura y composición, como puntos, líneas rectas, curvas o polígonos. Para crearlos, debemos establecer su posición, su color, su forma, su relleno, su contorno, etc. En cambio, en un mapa de bits estos elementos estarán definidos por una cierta cantidad de píxeles que se organizan por tono. 48
49. El diseño y la Web Figura 3. Imagen mapa de bits. Aquí notamos que al escalar un sector, los píxeles se notan más, perdiendo así su calidad original. Los formatos Existe una gran variedad de formatos o extensiones que podemos manejar para incluir en nuestras páginas web, y la mayoría posee la característica de pertenecer al grupo de los mapas de bits, desde el popular JPG hasta formatos mucho más comprimidos y avanzados como el PNG. A continuación enumeramos y explicamos los principales. BMP (Bitmap): es el formato más sencillo en cuanto a la conformación de sus estructuras y no realiza ningún tipo de compresión en sus datos, por lo que normalmente suele tener un gran tamaño, aunque no puede negarse que su calidad es buena y su velocidad de carga también. Los formatos BMP admiten cualquier tipo de resolución y profundidades, desde los 8 hasta los 24 bits. Su estructura es simple, incluyendo una cabecera que incorpora los datos básicos de la imagen, como paleta, resolución, tamaño o número de colores; luego posee la información de la imagen en sí, distribuida de izquierda a derecha y píxel a píxel. Una desventaja es que no es multiplataforma, ya que sólo es compatible con PC y MAC OS. Por eso, si los incorporamos en un sitio, solamente Internet Explorer podrá mostrarlos en pantalla. ❘❘❘ ADOBE PHOTOSHOP Adobe Photoshop es uno de los programas que podemos seleccionar para editar los gráficos para nuestra web. Aunque este programa está mucho más dedicado a desarrollos como la edición o el retoque fotográfico, también podemos utilizarlo para crear imágenes para nuestros sitios. La desventaja radica en que posee escasa compatibilidad con el lenguaje HTML. 49
50. CREACIÓN DE SITIOS WEB JPEG o JPG (Joint Photographic Experts Group): es el formato estándar por excelencia de las páginas web. Es soportado por la gran mayoría de los navegadores web, puede trabajar a escala de grises, RGB y CMYK. Su mayor característica es la compresión que provee, por lo que se puede almacenar muchas imágenes digitales de alta calidad con pesos de archivo relativamente bajos. La compresión de estos archivos se basa en la eliminación de la información que poseen las imágenes y que el ojo humano no es capaz de distinguir, por ejemplo, en la mayoría de las imágenes de 24 bits. La pérdida de calidad es casi nula, excepto que esta compresión se exagere. Cuando esto ocurre, los daños más notorios se verán en los contrastes, ya que se producen en ellos algunas zonas borrosas, entre otras cosas. No permite transparencias mediante canales alfa o la posibilidad de animación mediante fotogramas. GIF (Graphics Interchange Format): se trata también de un formato basado en mapa de bits, y sus características principales son la incorporación de transparencias y la animación. Una desventaja es que sólo soporta hasta 256 colores en 8 bits, por lo que su calidad de imagen no es demasiado buena. Pese a esto, este formato es muy utilizado en Internet debido a las dos posibilidades que ofrece. También presenta una importante rutina de compresión. PNG (Portable Network Graphics): se trata de un formato de mapa de bits simple y de alta compresión. Es una buena alternativa para los formatos GIF y JPG. Soporta la transparencia y, aunque se puede guardar un PNG con información sobre fotogramas animados, el navegador no lo reproduce como una animación. Las transparencias en PNG son de mucha mejor calidad, ya que a diferencia de los GIF, soporta una paleta de colores mucho mayor (hasta 48 bits). También permite la visualización de las imágenes de manera entrelazada, es decir, progresiva. SVG (Scalable Vector Graphics): este formato vectorial es el primero de ellos en proponer la compatibilidad con HTML, almacenando el sistema de vectores mediante un sistema de etiquetas propio. Esto resulta muy beneficioso ya que debido a ello, puede ser modificado mediante cualquier editor de texto simple (al igual que el HTML o el XML). Maneja 24 bits de profundidad de color y los sistemas de paleta estándar como el RGB, CMYK, etc. Admite también una gran cantidad de efectos, como transparencias, suavizados y tipografía editable. ❘❘❘ EL FORMATO TIFF Esta extensión (TIF) es también muy común, pero se utiliza mucho más en los ámbitos de diseño gráfico (especialmente para materiales que se imprimen), ya que su calidad de imagen es una de las mejores (mejor aún que los BMP). TIFF quiere decir Tagged Image File Format, y es también un formato de mapa de bits. Su principal desventaja es el gran tamaño que poseen sus archivos. 50
51. El diseño y la Web SWF (Shockwave Flash): es el formato de salida de gráficos y animaciones vectoriales que utiliza uno de los programas más populares para diseño web: Macromedia Flash. Estos archivos son el resultado de los archivos fuente (FLA) de esta aplicación y son compatibles con la mayor parte de los navegadores que se utilizan en la actualidad, siempre mediante el uso del plugin correspondiente. Figura 4. En este sitio web se utilizan diferentes tipos de formatos de gráficos digitales, por ejemplo, el encabezado y el menú están realizados en Flash. En cambio, los logos de abajo son JPG. La resolución Podría decirse que la resolución es el tamaño relativo de un componente visual digital. Tomemos como ejemplo la totalidad del monitor: su tamaño absoluto sería el espacio real que ocupa físicamente su pantalla, y se mide en pulgadas, por ejemplo, 14 pulgadas o 17 pulgadas. En contraste, el tamaño relativo o resolución del monitor o pantalla es la cantidad de píxeles que éste soporta, por ejemplo, 800 píxeles horizontales por 600 verticales (800x600) o 1024 píxeles horizontales por 768 píxeles verticales (1024x768). Estos son ejemplos de resoluciones de pantalla. Para las imágenes y todo documento visual que se reproduzca en una computadora, la resolución se define de igual modo: la cantidad de píxeles horizontales por la cantidad de píxeles verticales. La resolución es relevante sobre todo en los documentos de mapa de bits, ya que son los que se determinan mediante píxeles. En el contexto de las imágenes digitales, la resolución puede englobar varios conceptos, como la resolución de archivo digital, la resolución de impresión, resolución de digitalización, resolución de semitono, etc., pero el primero de estos conceptos es el más ligado a lo que normalmente se denomina resolución, y está definido por el número de píxeles diferentes con los que cuenta una imagen por unidad de longitud. 51
52. CREACIÓN DE SITIOS WEB Estos valores se miden con la medida de píxeles por pulgada (PPP o PPI en inglés, Dots Per Inch). Cuanto mayor sea esta resolución, mayor será la cantidad de datos que ésta contenga, y así se incrementan todos los demás factores (con sus ventajas y desventajas, como la calidad y el peso del archivo de imagen). Otro tipo de resolución es la resolución de muestreo, que es la que se utiliza para determinar las imágenes digitalizadas, es decir, escaneadas. Ésta se define mediante el número de muestras de que se toman por cada pulgada, y se mide en SPI (Samples Per Inch). Cuantas más muestras por pulgada ofrezca la imagen, más cercana estará a la imagen original, es decir, mayor calidad tendrá. Esta medida ya no se utiliza mucho. También encontramos la resolución de impresión como una de las principales clasificaciones dentro de este concepto. Se trata de la capacidad que tiene la impresora para la organización binaria de la imagen, es decir, los puntos de tinta o tóner por pulgada que se colocará en el papel para la impresión. Su medida son los DPI (Dots Per Inch), y a más puntos, mejor calidad de impresión. Finalmente, debemos nombrar a la resolución de semitono o trama, definida como la capacidad de impresión de tramas en escalas de grises para representar tonos continuos. Se mide en LPI (Lines Per Inch) y es más utilizada en gráfica que en Web. Por supuesto que en nuestros proyectos web debemos usar lo que más nos convenga gráficamente, por lo tanto, lo más importante será evaluar la resolución del archivo digital, ya que definirá su calidad de visualización en la pantalla y su peso en disco. Recordemos que para los sitios web, los archivos que incluyamos no deben ser demasiado pesados, para no volver la carga de la página lenta y fastidiosa. Por eso valoraremos mucho el trabajo con gráficos vectoriales y con mapas de bits no demasiado pesados. Figura 5. Una misma imagen en las resoluciones de archivo digital más frecuentes. En archivos PNG, el peso entre una resolución y la siguiente prácticamente se duplica. 52
53. El diseño y la Web Los colores en la Web A partir de aquí vamos a tratar de relacionar los conceptos teóricos y técnicos con algunos factores de personalización, es decir, pautas y elementos que den a nuestro sitio el estilo visual y las características que nosotros deseamos aplicarle. Dos componentes fundamentales para lograr estos objetivos serán los colores y la tipografía que conformen el sitio. Por ahora analizaremos el primer componente, es decir, los colores que darán personalidad y estilo a nuestras páginas. Los elementos prácticos que debemos tener en cuenta son, entre otras cosas, la correcta elección de la gama y tonalidades. Los teórico-técnicos implicarán la adecuada aplicación de la paleta de colores a cada imagen y el retoque de cada una de ellas para equilibrar su color (contraste, brillo, saturación, etc.). Estos últimos procesos los veremos más adelante, cuando analicemos Macromedia Fireworks y sus herramientas. Comencemos por entender las nociones básicas de color que determinarán las sensaciones que causan las imágenes de nuestro sitio web. Esto también podrá aplicarse a los demás elementos visuales de la página, como el texto. Será muy importante aplicar la gama de colores en todas las páginas del sitio para dar continuidad y relación a cada una de ellas y para establecer una identidad propia al sitio en general. Si diseñamos un logotipo, conviene seguir sus tonalidades en el diseño de las páginas, variando en los degradados y tonalidades que se apliquen a cada elemento. Si es necesario adicionar una o más gamas de color, debemos tener en cuenta la sensación que queremos reflejar. Podemos decir que, básicamente, las tonalidades de colores se clasifican en dos ramas: los colores fríos y los colores cálidos. Entre los primeros encontramos tonos como los azules y celestes, verdes y violetas. Los colores cálidos agrupan tonalidades como los rojizos, anaranjados, amarillos y marrones. Todas las escalas de grises actuarán como neutralizadoras de color, aunque los más oscuros son más cercanos a los cálidos y los más claros, a los fríos. También existen clasificaciones en las paletas de color que determinarán un estilo en particular, como las paletas tradicionales (colores básicos y complementarios, por ejemplo, la combinación rojo-azul-verde), las paletas formales (colores oscuros, normalmente combinados con negros y grises), las paletas moder- ❘❘❘ LAS IMÁGENES Algunos de los roles que puede cumplir una imagen dentro de una página pueden ser el de representar un botón, un menú, una barra, un enlace, o simplemente acompañar un contenido de texto, complementándolo y ampliándolo si es necesario. Este último sentido es el que se aplica también en ediciones impresas, como este libro, donde cada imagen ejemplifica o explica algo. 53
54. CREACIÓN DE SITIOS WEB nas (contrastes entre tonos complementarios en gama y/o color) o las paletas informales (colores llamativos y estridentes, sin mucho respeto por las gamas). Figura 6. Aquí vemos la paleta de colores de un programa en particular y su conformación decimal y hexadecimal. Formato del color Las computadoras manejan tres colores básicos denominados primarios y, a partir de ellos, se elaboran todas las tonalidades restantes. Este sistema es el RGB, y es el más utilizado dentro del mundo digital. RGB son las siglas de Red-GreenBlue, es decir, rojo-verde-azul, y la composición de otros tonos se realiza mediante la combinación de los píxeles que representan a cada color básico. Esta es la paleta estándar usada para la Web. Otro concepto importante en cuanto al color de las imágenes es la profundidad de color, que se determina mediante los bits que conforman la imagen. A mayor cantidad de bits por píxel, mayor cantidad de variantes de colores tendremos disponibles. La tipografía A la hora de realizar páginas web, la tipografía es otro de los factores fundamentales que hay que tener en cuenta para el diseño visual. Este elemento es el formato gráfico que tendrán las fuentes de nuestras páginas, es decir, la forma física de las letras. ❘❘❘ CODIFICACIÓN DE COLORES Hay dos maneras de definir la clasificación de los tonos: el formato decimal y el hexadecimal. En ambos, la codificación se representa según los porcentajes de cada color primario. Por ejemplo, el rojo puro (100% rojo, 0% verde y 0% azul) en formato decimal se expresa como 255,0,0 y en hexadecimal, como #FF0000. Este último se utiliza en el diseño web y siempre se inicia con el signo #. 54

References: Resolución 
 resolución 
 resolución 
in fine
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución