CREACIÓN DE SITIOS WEB
El presente capítulo tiene por objetivo dar un tratamiento introductorio al tema de elaboración o diseño de Sitios Web (formados por Páginas Web) dentro de nuestro esquema de Estudiar Internet; además se ven tópicos relacionados con el manejo del color y de las imágenes con editores como Photoshop, Gimp, y Picasa de Google. El contenido del capítulo es el siguiente:
I. Introducción
II. Ejemplo de creación de una página web usando HTML
1.) Primera parte
2.) Segunda parte
3.) Tercera parte
III. Color en la página web
1.) Los nombres de los colores
2.) El contraste de los colores
3.) Seleccionando los colores
IV. Diseño de páginas web con editor WYSIWYG
1.) Editor Composer de Mozilla
2.) Editor Dreamweaver de Macromedia
V. Editores de imágenes para sitios web
1.) Photoshop de Adobe Systems
2.) El Gimp
3.) Picasa
VI. Ejercicio para poner una página en internet
I.) Introducción
A veces en la vida llega la necesidad urgente de comunicar nuestros pensamientos al mundo. Antiguamente, en la era pre-internet, lo indicado era escribir cartas y enviarlas a la sección "Los Lectores Opinan" del periódico local, y esperar a que la suerte nos ayudara para que el editor del periódico diera su aprobación a la publicación de nuestros mensajes, que a veces eran publicados, y otras muchas veces no.
Todo esto esto ha cambiada con la aparición de internet y las páginas web. Ahora de manera democrática, y gracias a la gran Red (WWW), cualquier persona puede enviar sus mensajes directamente a todo el planeta.
Las páginas web son elaboradas por medio de un lenguaje de programación llamado HTML (Hyper Text Markup Language). La base de este lenguaje es un código formado por unas pequeñas etiquetas (markup tags) que forman el documento de una página web.
Son las etiquetas las que le dicen al navegador como va a lucir y lo que va a contener nuestra página. Los documentos de HTML deben archivarse con una terminación o extensión: htm o html.
Las páginas web pueden ser creadas por medio de dos métodos:
1.) Efectuando la programación HTML, o sea escribiendo el código en un editor de texto; y
2.) Empleando un editor del tipo WYSIWYG (What You See Is What You Get), o sea "Lo que se ve es lo que se obtiene", en donde se usa un programa sofisticado, por medio del cual el usuario no necesita trabajar directamente en el lenguaje de programación HTML.
Un listado de editores para elaborar sitios web se encuentra en WYSIWYG-Wikipedia.
En este capítulo vamos a iniciar con la primera alternativa, o sea conociendo los aspectos muy básicos de la programación en HTML.
El código de las páginas web se escribe en un editor de texto, que puede ser tan sencillo como el "notepad" que viene en Windows o en otros que tienen más herramientas. El autor recomienda usar un editor gratuito y con varias funciones útiles llamado "Crimson Editor" que puede ser obtenido en este enlace. A modo de ilustración, en las siguientes dos figuras se muestra el sitio de este editor de texto (de donde se puede obtener), y la vista de como luce el editor Crimson ya listo para su uso.
II.) Ejemplo de creación de una página web usando HTML.
1.) Primera parte
En este ejemplo que trata de diseñar una página web, vamos a emplear al editor Crimson. El lector puede decidir emplear otro editor como notepad o wordpad. Conviene recordar que un sitio web puede estar conformado por una o más páginas web, o sea que nuestra unidad de creación de un sitio es la página, y depende de la naturaleza y volumen del contenido del sitio, lo que decide la cantidad de páginas a crear.
Vamos a escribir un código básico inicial para nuestra primera página web. El lector si lo desea puede hacer la práctica de este ejemplo. El código HTML se muestra en la siguiente imagen:
Guardar este documento con el nombre de: "primero.html"
El siguiente paso es ir al menú que se encuentra en la parte superior de la ventana del editor Crimson, seleccionar "Tools", y luego en el desplegado que aparece, hacer clic en "View in Browser", según se puede apreciar en la siguiente imagen:
La acción anterior provoca que nuestra primer página aparezca en el navegador, como se puede ver en la siguiente imagen, en donde puede apreciarse, como se aplican los diferentes componentes del código html a la apariencia de la ventana del navegador.
Esta es la semilla inicial de la Creación de Sitios Web que trata este capítulo.
Explicación del código HTML:
♦ La primera etiqueta en el documento es <html>. La etiqueta le dice al navegador que éste es el inicio del documento HTML. Al término del documento se ha escrito < ⁄ html> que significa que es el final del documento.
♦ El texto entre las etiquetas <head> y < ⁄ head> es la información de inicio del código (header) y no aparece en la ventana del navegador.
♦ El texto entre las etiquetas <title> es el título del documento, que en nuestro caso dice: "Mi primer ejercicio", que es mostrado en la parte superior del navegador.
♦ El texto entre las etiquetas <body> es el contenido que será expuesto en el navegador, o sea todo el mensaje del autor hacia el público.
♦ El texto entre <b> y < ⁄ b> es mostrado en negrita.
♦ Las etiquetas <p> y < ⁄ p> son las que indican el inicio y el final de un párrafo.
2.) Segunda Parte
El tamaño de las letras del texto se puede variar usando etiquetas (tags) para títulos y sub títulos. Estas etiquetas llevan los símbolos: h1 al h6, en donde <h1> produce las letras más grandes, y < h6> las más pequeñas.
La etiqueta <hr ⁄> produce una línea horizontal.
Se tienen etiquetas para ubicar el texto en la página, por ejemplo, para poner un título al centro, se emplea: align="center".
Veamos en la siguiente imagen, el código anterior con los siguientes cambios.
De acuerdo al código anterior, y seleccionando en el menú a "Tools", y luego a "View in Browser", se llega a producir la segunda versión de la página del Ejercicio, según podemos ver en la siguiente imagen.
Aquí podemos observar que el título ha aumentado tamaño y se encuentra localizado al centro de la página, y también puede notarse la línea horizontal en la parte inferior.
3.) Tercera parte
Ahora pasamos al tema de agregar una imagen y una dirección de sitio (URL) a la página del ejemplo.
Vamos a colocar la fotografía "LibrodonQui320x240opt.jpg", que tiene las dimensiones siguientes: ancho (width) de 320 pixels, y alto (height) de 240 pixels. Esta imagen tendrá un ancho de borde o perímetro de 3 pixels, y vamos a escribir un título alterno (alt) que diga: "Imagen del libro de Don Quijote".
Para escribir el código, vamos a colocar el nombre de la foto y sus dimensiones dentro de la etiqueta: < img src=".........">.
Ahora vamos a mostrar en la siguiente gráfica como luce el código html, en donde también colocamos un enlace al sitio del Instituto Cervantes.
El código para hacer el enlace a determinado sitio, en este caso el Instituto Cervantes, se verifica colocando la dirección o URL en la siguiente etiqueta: < a href=".....URL........"> Nombre del sitio< ⁄ a >, como se ha podido apreciar en la imagen de arriba.
Ahora veamos como luce nuestra página web en este tercera parte del ejemplo:
Como este tema es tan abundante de posibilidades de embellecer a las páginas, se tienen muchas más etiquetas de html y procedimientos, que se pueden ir aprendiendo en varios sitios gratuitos como los selecionados a continuación.
Primeros veamos algunos enlaces en idioma Español:
Aprenda HTML paso a paso, Manual de Html Básico, Tutorial html básico, y Manual Básico de HTML
En idioma Inglés recomendamos conocer las varias partes del sitio W3 Schools, que tienen tutoriales para la construcción completa de páginas web desde lo básico a lo avanzado. Este sitio ha sido una de las fuentes principales de información para el presente capítulo.
Se tienen enlaces seleccionados de este tema en la sección Web Pages Design de nuestro sitio Some Interesting and Useful Web Links.
Por el momento dejamos hasta aquí el este tema, que lo retomaremos mas adelante en este mismo capítulo, en el numeral VI.
III.) Color en la página web
El color le da vida y funcionabilidad a los sitios web, por lo que es importante su adecuado manejo.
El color es el efecto producido en el ojo y sus nervios asociados, por las ondas de luz de diferente longitud o frecuencia. La luz transmitida por un objeto al ojo, estimula a los diferentes conos de color de la retina, haciendo así posible la percepción de los varios colores de dicho objeto.
El cerebro puede distinguir los colores básicos, rojo, verde, y azul. El resto de los colores son una mezcla de estos colores. Por otra parte, la luz del sol es una combinación de varios colores, en forma de luz blanca, que se puede descomponer mediante una lente prismática, o en el fenómeno del arco iris, en luces de varios colores de acuerdo a sus longitudes de onda. La luz roja tiene la mayor longitud de onda, y la azul tiene la menor.
1.) Los nombres de los colores
Desde 1996 el consorcio internacional W3C ha establecido los estándares para darle nombre a los colores en HTML. Se reconocen los tres colores primarios como RGB por sus siglas en Inglés de Red (rojo), Green (verde), y Blue (azul). El valor mas bajo que se le puede dar a una fuente de luz es 0 (cero), y el valor mas alto es 255.
Los colores en HTML se definen usando seis números en serie: dos para el rojo, dos para el verde, y dos para el azul, por ejemplo una anotación para un color puede ser: rgb(50%, 90%, 80%) que significa 50% de rojo (de un total de 255), 90% de verde (de un total de 255), y 80% (de un total de 255).
Otra forma de representación numérica de los colores es poniendo la contribución de cada color primario (rgb) en unidades que oscilan entre cero y 255, como el siguiente caso: rgb(176, 48, 96), o sea un color que se forma con 176 unidades de rojo, 48 de verde, y 96 de azul.
Existe una forma más sencilla de especificar los colores, que solamente es válida para 16 colores predefinidos con sus nombres propios como, black (negro), white (blanco), gray (gris), red (rojo), green (verde), blue (azul), yellow (amarillo), y otros hasta llegar a 16 colores.
En esto de colores es mejor poder verlos para apreciar su naturaleza con su nomencltura.
En los siguientes enlaces pueden verse varias tablas de colores con sus respectivas identificaciones:
HTML Colors de W3Schools, HTML Color Values, HTML Color Names.
Como se ha podido ver en las tablas de colores de los enlaces anteriores, existe otro sistema para identificar los colores llamado hexadecimal (hex en abreviado) que es el más usado en HTML.
En el sistema hex, que tiene como base 16, (en vez de la base 10 de la numeración usual), existen 16 símbolos: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f.
En el sistema Hex se representan los seis números de cada color en una combinación de los símbolos mencionados, por ejemplo el color rojo es (#ff0000). Existen tablas que presentan los equivalentes entre ambos sistemas. Sin embargo, lo conveniente es tratar de trabajar solamente con un sistema para identificar los colores deseados en la codificación de HTML, de preferencia hacerlo en el sistema hex.
En las dos siguientes gráficas se aplica el código html a diferentes anotaciones de texto en colores.
Se puede ver el código html, y más abajo, la correspondiente página web, mostrando los diferentes colores según la identificación del color.
Varias tablas con abundantes muestras de colores se pueden ver en RGB-Farben. Más información acerca de conceptos del color y de sus identidades puede hallarse en Web colors: from Answers.com. Otro sitio que puede ser útil, por presentar ejemplos automáticos de combinaciones de texto y diferentes colores de fondos es: Visibone Color Lab
2.) El contraste de los colores
Ahora que se tienen definidos los nombres de los colores, veamos una aplicación práctica acerca del contraste de dos o más colores en texto de una página web. Es usual presentar un texto con letras de color negro en un fondo de color blanco; sin embargo también se emplean otros colores para las letras y un color diferente para el fondo o "background", con la intención de embellecer la página.
Así que vamos a conocer del caso de cómo armonizar ambos colores, de tal manera de que la página luzca bonita y a la vez que sea fácil de leer. Primero veremos como poner un color de fondo a nuestra última página "Colores en HTML", y para ello escribimos el código en donde ponemos como color de fondo #d7d7d7, (color gris claro) como se muestra en la siguiente imagen.
Como se puede apreciar arriba, hemos agregado a la etiqueta < body > la frase de estilo (necesaria para dar color a toda la página): "background-color:#d7d7d7". Obteniendo el resultado que sigue:
Examinando la imagen anterior se puede notar, que algunos colores de letras se leen mejor en este fondo gris. Parece que las letras y números de color azul se aprecian mejor, y también a las letras de color rojo se les nota un buen contraste en comparación a las dos líneas de abajo.
Afortunadamente en internet se encuentra ayuda para obtener buenos contrastes en colores de letras y colores de fondos, como veremos a continuación.
Existe un sitio web en donde de manera gratuita, hacen el análisis del contraste de los dos colores, sean el color del texto o color frontal (Foreground Colour), y el color de fondo (Background Colour). Este sitio se llama Juicy Studio: Colour Contrast Analyser.
Para hacer una prueba hemos colocado en el formulario del sitio mencionado los dos datos requeridos: para el color de fondo (Background) seleccionamos un color amarillo claro llamado, #fffbc6; y para el color del texto o frontal (Foreground) escogimos un color azul oscuro de nombre: #000080.
En la siguiente imagen se puede apreciar en la parte superior, las dos casillas para la introducción de los datos de los colores, en donde ya hemos escrito la identidad de los dos colores del ejemplo. Luego se oprime el botón "Analyse Colours", y en pocos segundos aparece el resultado que se muestra en la parte inferior de la imagen.
La parte de los resultados exhibe una muestra del texto (Sample Test) en un rectángulo con las letras azules y el fondo amarillo (como se había propuesto), seguidamente aparecen los resultados, en donde el programa indica de manera cuantitativa que el contraste es adecuado, en vista que la diferncia entre brillo y color es suficiente.
Por supuesto que generalmente el ojo humano tiene mayor capacidad que el programa para evaluar el contraste de colores, pero es importante tener una medida objetiva.
3.) Seleccionando los colores
Además de los colores de las letras y del fondo, en la preparación de la página web, generalmente se le aplican otros colores a manera de volverla mas atractiva o funcional. A veces es necesario seleccionar colores que armonicen con fotografías u otras imágenes que están incluídas en la página. Otras veces, puede suceder que al diseñador le gusta algún color de otro sitio y desee incorporarlo al propio.
La situación puede ser de querer determinar el nombre exacto de cierta tonalidad de color de una foto o de cualquier otra imagen, con el propósito de aplicar este color a una página que estemos elaborando. Por ejemplo, vamos a suponer que deseamos determinar la identidad o el número hexadecimal de un color "rosado pastel" de un punto específico de la siguiente fotografía:
Para ello acudimos a un programa gratuito llamado Color Cop, que puede ser obtenido aquí. Este programa después de ser descargado produce la siguiente ventana:
Como puede apreciarse a la izquierda se tiene un indicador a manera de gotero, que se arrastra con el ratón hacia el punto exacto de la foto donde se quiere identificar al color. Este gotero va transmitiendo la identificación del color en forma los componentes RGB, y también en dígitos del sistema hexadecimal, como se puede ver en las casillas del Color Cop.
En la siguiente imagen se aprecia cuando ya se ha tomado la muestra de color, que en este caso se muestra en el cuadrado superior del Color Cop y a sus lados tiene las identificaciones siguientes: RGB 202, 192, 229, y en forma Hex: #CAC0E5. De esta manera se obtiene la equivalencia numérica o la identificación del color que buscamos.
Mayor información acerca de las funciones y forma de operar del Color Cop puede ser obtenida en el enlace indicado arriba para su descarga.
Existen otras herramientas para hacer la inspección y la selección de colores. Una posiblidad son las tablas de colores y su identificación que hemos visto arriba en "1.) Los nombres de los colores". Otra forma es acudir a una Rueda de Colores que contiene gran variedad de colores agrupados en tonos similares en donde se pueden seleccionar varios de ellos, de manera que guarden buena armonía en una página web. Un sitio de esta clase es 4096 color Wheel, cuya imagen ofrecemos en seguida:
Aunque la forma de operar en detalle se ofrece en el sitio indicado, podemos adelantar que la base de su funcionamiento es llevar el ratón hacia el círculo concentrico de colores o hacia el cuadrado a su derecha, y los colores señalados van a ir apareciendo con su identificación numérica en las casillas respectivas. De esta forma se obtiene la visualización y la identificación de los colores deseados.
Existe un buen libro que contiene información acerca de los colores y otros temas del lenguaje HTML, escrito por Elizabeth Castro y titulado: "HTML for the World Wide Web with xhtml y css, 5th Edition". Mas datos acerca del libro pueden encontrarse en el sitio de la autora.
IV.) Diseño de páginas web con editor WYSIWYG
Editor WYSIWYG (lo que se ve es lo que se obtiene) es un programa que permite al usuario crear visualmente las páginas web, mientras que el editor genera automáticamente el código respectivo.
Este programa permite al usuario colocar texto o imágenes en una página, y a la vez crea el menú o barra de botones que permite navegar en todo el sitio. Tiene la ventaja que el usuario no necesita aprender el lenguaje de HTML para crear sitios web; sin embargo, estos editores a veces son criticados porque no generan el código HTML más eficiente, y porque una misma página es vista de manera diferente en diversos navegadores.
Un listado de este tipo de editores se encuentra en List of HTML editors-Answers.com. Aquí vamos a reseñar a dos de ellos.
1.) Editor Composer de Mozilla
Como se ha visto en el capítulo de Navegadores, el Composer es parte del navegador Mozilla.
Viendo la siguiente imagen del Composer, se nota en la parte inferior cuatro pestañas con los títulos:
Normal
Etiquetas HTML
Código fuente
Vista Preliminar
En el apartado "Normal" es donde se escribe el texto de la futura página web. Se escribe directamente como que fuera un procesador de palabras corriente, tipo MS Word o Notepad. Como ilustración hemos escrito acerca de Don Quijote (como en un ejemplo anterior), con un título en la parte superior, un subtítulo, y un párrafo.
En la siguiente imagen se muestra la ventana del código HTML que el editor Composer ha construído en base a nuestra redacción del texto inicial. A la ventana del código se llega al seleccionar la pestaña "Código fuente".
Como se puede apreciar, la tarea del usuario se simplifica, ya que solamente tiene que escribir su texto sin atender la codificación. Si el usuario lo desea, puede modificar o afinar algunos aspectos del código en la ventana "Código fuente". Otra ventaja es que este editor se obtiene de manera gratuita, según se ha descrito en el capítulo Navegadores.
Una descripción detallada acerca del funcionamiento del Composer se encuentra en la sección del menú "Ayuda", que se encuentra en la parte superior derecha de la ventana.
2.) Editor Dreamweaver de Macromedia
Este editor forma parte del conjunto de programas llamado "Studio MX de Macromedia". Es un editor con varias funciones que cubren las necesidades del usuario para la creación de sitios web de gran calidad, incluyendo efectos de figuras en movimiento, audio, video, formularios para interactuar con los clientes, etc.
La versión "Macromedia Dreamweaver MX 2004" posee abundante información en su menú de "Ayuda" acerca de su contenido y de su funcionamiento, como se muestra en el siguiente gráfico.
A manera de ilustración presentamos en el siguiente gráfico una vista de la ventana de Dreamweaver que muestra simultáneamente el código y la parte de Diseño (o sea donde el usuario va escribiendo el el texto de la página). De esta manera el usuario puede ir conociendo las líneas del código a medida que escribe. Esta es otra manera de aprender el lenguaje HTML.
Conviene mencionar que el precio del editor Dreamweaver MX 2004 es de US$309 a US$473, de acuerdo al resultado de una búsqueda en Froogle/Google, (a finales del 2005).
Queremos hacer una rápida mención de otro editor de este tipo, de fuente libre, gratuito, de buena calidad, y similar al Composer de Mozilla, llamado Nvu, y que se puede copiar o descargar del Proyecto NAVE: Editor web Nvu.. En el próximo capítulo vamos a exponer las ventajas y limitaciones de los programas de fuente libre (open source), incluyendo una descripción del editor Nvu..
V.) Editores de imágenes para sitios web
Editor de imágenes es un programa para alterar o mejorar una imagen, incluyendo modificaciones en el brillo, la iluminación, el contraste, el enfoque, el tamaño, el filtrado, etc. Por su medio se verifica la optimización de las imágenes para su uso en internet, que se refiere al proceso de ajuste de la calidad y tamaño del archivo para que cargue mas rápido en los sitios web.
En inglés los edtitores de imágenes son llamados con varios nombres: "Image Editors", o "Photo illustration programs", o "Image editing programs". Listados de estos editores aparece en Answer.com-Imagen editing programs, y en Fix Photos with Image Editing Software.
A manera de ejemplo, presentamos dos fotografías, siendo la primera, sin ajustes (la original), y la segunda, con mejoras en iluminación y contraste.
Ahora veremos una breve descripción de algunos editores de imágenes con información de sus principales características.
1.) Photoshop de Adobe Systems
Es un editor o diseñador gráfico, popular y con muchas funciones para diversos tratamientos de imágenes.
Photoshop es el editor de referencia, debido a sus múltiples capacidades, principalmente a su posibilidad de trabajar con varias capas que se superponen con varios ordenamientos, para lograr imágenes muy interesantes. También tiene la capacidad de convertir las imágenes a varios formatos, además de que provee su propio formato (extensión .psd).
Photoshop inicialmente fué diseñado para editar imágenes para impresiones en papel; sin embargo, actualmente es muy utilizado en la producción de imágenes para la Red.
Ahora anexamos una gráfica de la ventana principal de Photoshop 7, para dar una idea de su contenido, mostrando una imagen de satélite de San Salvador en el puesto para ser editada, (obtenida mediante Maps-Google)
La versión mas reciente de Photoshop es la número 9, que está integrada, para ser comercializada, con otros programas de la familia Adobe. El actual grupo de estos programas se llama: "Photoshop CS 2" que es la forma abreviada de "Adobe Creative Suite 2", que tiene dos formas: la "Standard", y la "Premium".
El paquete de la forma Standard de Adobe Creative Suite 2 contiene los siguientes programas:
Adobe Photoshop CS2
Illustrator CS2
InDesign CS2
Adobe Version Cue CS2
Adobe Bridge, y
Adobe Stock Photos
El precio del paquete es de US$ 899.00, de acuerdo a Adobe Store
El paquete de la forma "Premium" tiene el precio de US$ 1 199.00, (de acuerdo a la misma fuente), y contiene los programas anteriores mas los siguientes: GoLive CS, y Adobe Acrobat Professional.
2.) El GIMP
El Gimp (Gnu Image Manipulation Program) es un editor de imágenes de fuente libre (open source), que es gratuito. Numerosos programadores han contribído al desarrollo de este programa, convirtiendo a Gimp en una herramienta seria para la manipulación de imágenes.
Gimp se inició en febrero de 1996 con la versión 0.54. Continuaron varias versiones mejoradas a nivel experimental, y en junio de 1998 salió la versión 1.0 que fué considerada suficientemente estable para hacer una distribución general a nivel mundial. La edición actual es la número 2.2.9, que presentamos en el siguiente gráfico:
Entre las principales características y capacidades del Gimp , mencionamos las siguientes:
♦ Para trabajar emplea capas
♦ Captura pantallas o ventanas (screen shots), como las presentadas a lo largo de este sitio.
♦ Tiene un conjunto de herramientas para dibujar, como brochas, lápices, "airbrush", etc.
♦ Capacidad de hacer textos con diferentes formatos.
♦ Con variedad de filtros artísticos para aplicarlos a fotografías
♦ Tiene las funciones de Seleccionar, Copiar y Pegar.
♦ Posee las funciones de "undo/redo" para probar muchos cambios de edición.
♦ Tiene varios formatos de archivos de imágenes, como gif, jpeg, png, xpn, tiff, y muchos otros.
♦ Con versiones para las plataformas de Windows, Linux, y Mcintosh.
♦ En su sección de Ayuda, contiene un amplio "Manual del Usuario"
En general, se puede decir que probablemente Gimp sea el mejor programa gratuito disponible actualmente como editor de imágenes, y que es una alternativa interesante a Photoshop.
Ahora veremos algunos enlaces con más información acerca de Gimp:
Sitio de donde puede obtenerse la versión para Windows es Gimp para Windows de Sourceforge.net
El sitio oficial es Gimp.org
Página en español acerca de aplicaciones de The Gimp
Muchos datos acerca de Gimp, incluyendo una comparación con Photoshop en Answers.com/Gimp
3.) Picasa
Picasa es un editor y organizador de fotografías, de la familia de Google, que puede ser obtenido gratuitamente en Descargar Picasa. Ofrece varias posiblidades de mejorar las fotos mediante el uso de tres pestañas: "Arreglos básicos", "Efectos", y "Perfeccionamiento", tal como se muestra en el siguiente gráfico:
Entre los varios servicios ofrecidos por Picasa, mencionamos los siguientes:
a) organización de las fotografías contenidas en la computadora, formando los grupos o colecciones que desee el usuario, de tal forma que puedan ser encontradas y visualizads fácilmente;
b) las fotos pueden ser enviadas de manera simplificada por medio del correo electrónico de Google (Gmail); y
c) si el usuario lo desea, puede grabar por este medio, las fotos en CD o DVD.
Mayor información puede obtenerse en Asistencia al cliente de Picasa.
Picasa puede ser la opción conveniente para aquellos casos en que solamente se necesitan mejoras sencillas a las fotografías como cambios de tamaño, o mejorar la iluminación o contraste, sin tener la necesidad de descargar y aprender programas tan completos y complejos como los dos anteriores.
VI.) Ejercicio para poner una página en internet
El propósito del ejercicio es explicar paso a paso el procedimiento para colocar una página web en internet.
Iniciamos desde escribir el código HTML en el editor Crimson con un ejemplo sencillo, como lo vimos en la Sección II de este capítulo, luego seguimos con el servicio que ofrece Yahoo/Geocities para colocar la página en su servidor.
Paso 1: Lo primero que hacemos es obtener una cuenta de correo electrónico en Yahoo para lograr tener una ID en el sistema de Yahoo/Geocities. (Información para abrir una cuenta se expuso en el capítulo: "Comunicación").
Para este ejercicio hemos abierto una cuenta llamada: conozca3@yahoo.com. El lector, que se incline por hacer el ejercicio, puede abrir una cuenta en Yahoo con cualquier término que desee, que podría ser, digamos ... "conozca5", o "conozca2006".
Paso 2: Escribir el código html en un editor de texto. Aquí hemos empleado el editor Crimson. En la figura siguiente presentamos la redacción de la primera página.
Para guardar en el disco duro de la computadora el código anterior, se abre un archivo primario en la partición "C" con el nombre de "ejercicioInternet". Al archivo del código lo llamamos "index.html". Este nombre no se debe cambiar ya que es preciso que la primera página lleve ese nombre.
Si se desea ver como luce la página a nivel de su archivo en el disco duro, en el menú del editor Crimson, seleccione a "Tools", y luego en el desplegado que aparece, le hacemos clic a "View in browser". En la siguiente imágen aparece la página mencionada.
Puede notarse arriba, que en la ventanilla pequeña del navegador aparece escrita la dirección del archivo de la página en el disco duro que es: "C:/ejercicioInternet/index.html", tal como se había indicado más arriba.
Paso 3: Ir al sitio de carga de Yahoo/Geocities. Se tienen dos versiones de este sitio: en español, y en inglés. Hemos tomado la versión en español según se aprecia en la siguiente imagen, en donde aparece que ya se ha llenado la casilla de "ID de Yahoo" con "conozca3", y con la respectiva contraseña.
Hacer clic en el botón "Ingresar"
Paso 4: Estamos en la ventana "Yahoo! Geocities", en donde podemos ver en su parte superior el anuncio de bienvenida: "Welcome, conozca3", y a la derecha la nueva dirección de nuestra página: "http://www.geocities.com/conozca3", (dirección todavía incompleta).
Vamos ahora a la columna de la derecha titulada "Advanced Toolbox", y hacemos clic en File Manager.
Paso 5: En la nueva ventana hacemos clic a "Open File Manager", según podemos ver abajo:
Paso 6: Por el clic del paso anterior, nos aparece la nueva ventana, por medio de la cual se hace la carga del archivo de nuestra página. Para ello, hacemos clic en el botón: Upload Fles, que se encuentra abajo a la derecha de la siguiente imagen.
Paso 7: Por la acción anterior llegamos a la siguiente ventana, llamada "Easy Upload", en donde primero hacemos un clic en el botón superior Browse, y nos lleva al Paso 8.
Paso 8: Aquí aparece la ventana donde se muestra el resultado de haber buscado en la porción "C:/" del disco duro, el folder "ejercicioInternet", que contiene a nuestro archivo "index.html".
Este paso tiene el objetivo de decirle al programa el lugar preciso donde se encuentra el archivo que queremos enviar a la gran Red. Hacer clic a: "index.html", luego al botón "Abrir", y llegamos al siguiente paso.
Paso 9: En la imagen de abajo se puede ver que la ubicación del archivo "index.html" ya se encuentra seleccionada en la ventana "Easy Upload", y que ahora solamente debe hacerse clic en el botón Upload Files para enviar a nuestro archivo al espacio de internet.
Paso 10: La siguiente ventana muestra que el archivo "index.html" ha sido cargado éxitosamente (index.html--Uploaded successfully). Para salir del programa de Yahoo/Geocities, y como paso final, debe hacerse clic en : "Sign Out" que se encuentra arriba a la derecha de la ventana.
Paso 11 y último: Finalmente hemos concluído el ejercicio (gracias al esfuerzo y paciencia), y ya tenemos la página del ejercicio elevada al sistema internet con la siguiente dirección (URL):
www.geocities.com/conozca3/index.html
El lector puede asegurarse de esto, dando un clic al enlace anterior.
Como se ha podido apreciar en este capítulo, existe gran variedad de opciones para la elaboración de sitios web, como la selección de editores ya sea de texto o de imágenes, elección y obtención de fotografías, selección de temas, las varias formas de uso del espacio de las páginas, selección de los colores, y otros asuntos más.
Con el contenido del presente capítulo, además de dar a conocer el tema al principiante, se ha querido presentar aspectos que lo motiven a practicar la creación de páginas, por el método de "aprender haciendo", y también acudiendo a la lectura de las fuentes de información aquí indicadas.