Scribd Logo
Upload

Welcome to Scribd!

  • 6 Crea Sitio Conoz

    Uploaded by

    Luis San Martin
    11 views28 pages

    Original Title

    6creaSitioConoz

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    11 views28 pages

    6 Crea Sitio Conoz

    Uploaded by

    Luis San Martin

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 28

    66 CREACIN DE SITIOS WEB

    El contenido del presente captulo es el siguiente: I. Introduccin II. Ejemplo de creacin de una pgina web usando HTML 1.) Primera parte 2.) Segunda parte 3.) Tercera parte III. Color en la pgina web 1.) Los nombres de los colores 2.) El contraste de los colores 3.) Seleccionando los colores IV. Diseo de pginas web con editor WYSIWYG 1.) Editor Composer de Mozilla 2.) Editor Dreamweaver de Macromedia V. Editores de imgenes para sitios web 1.) Photoshop de Adobe Systems 2.) El Gimp 3.) Picasa VI. Ejercicio para poner una pgina en internet

    I.) Introduccin
    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 seccin "Los Lectores Opinan" del peridico local, y esperar a que la suerte nos ayudara para que el editor del peridico diera su aprobacin a la publicacin de nuestros mensajes, que a veces eran publicados, y otras muchas veces no. Todo esto esto ha cambiada con la aparicin de internet y las pginas web. Ahora de manera democrtica, y gracias a la gran Red (WWW), cualquier persona puede enviar sus mensajes directamente a todo el planeta. Las pginas web son elaboradas por medio de un lenguaje de programacin llamado HTML (Hyper Text Markup Language). La base de este lenguaje es un cdigo formado por unas pequeas etiquetas (markup tags) que forman el documento de una pgina web. Son las etiquetas las que le dicen al navegador como va a lucir y lo que va a contener nuestra pgina. Los documentos de HTML deben archivarse con una terminacin o extensin: htm o html. Las pginas web pueden ser creadas por medio de dos mtodos: 1.) Efectuando la programacin HTML, o sea escribiendo el cdigo 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 programacin HTML. Un listado de editores para elaborar sitios web se encuentra en WYSIWYG-Wikipedia (http://es.wikipedia.org/wiki/WYSIWYG ). En este captulo vamos a iniciar con la primera alternativa, o sea conociendo los aspectos muy bsicos de la programacin en HTML.

    67
    El cdigo de las pginas 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 ms herramientas. El autor recomienda usar un editor gratuito y con varias funciones tiles llamado "Crimson Editor" que puede ser obtenido en el enlace: (http://www.crimsoneditor.com/ ). A modo de ilustracin, en los siguientes dos grficos 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. Grfico 73. Sitio web de Crimson Editor y donde se obtiene su copia

    Grfico 74. Vista inicial de Crimson Editor

    68
    II.) Ejemplo de creacin de una pgina web usando HTML.

    1.) Primera parte En este ejemplo que trata de disear una pgina 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 ms pginas web, o sea que nuestra unidad de creacin de un sitio es la pgina, y depende de la naturaleza y volumen del contenido del sitio, lo que decide la cantidad de pginas a crear. Vamos a escribir un cdigo bsico inicial para nuestra primera pgina web. El lector si lo desea puede hacer la prctica de este ejemplo. El cdigo HTML se muestra en la siguiente imagen: Grfico 75. Cdigo inicial de HTML en el editor Crimson

    Cdigo escrito en el Grfico 75: <html> <head> <title>Mi primer ejercicio</title> </head> <body> <p><b>Notas acerca de Don Quijote</b></p> <p>Desocupado lector: sin juramento me podrias creer que quisiera que este libro, como hijo del entendimiento, fuera el mas hermoso, el mas gallardo y mas discreto que pudiera imaginarse.</p> </body> </html>

    69
    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", segn se puede apreciar en el Grfico 76: Grfico 76. Paso para poner en el navegador el cdigo HTML

    La accin anterior provoca que nuestra primer pgina aparezca en el navegador, como se puede ver en la siguiente imagen, en donde puede apreciarse, como se aplican los diferentes componentes del cdigo html a la apariencia de la ventana del navegador. Esta es la semilla inicial de la Creacin de Sitios Web que trata este captulo. Grfico 77.Como aparece el cdigo HTML en el navegador

    70
    Explicacin del cdigo HTML: La primera etiqueta en el documento es <html>. La etiqueta le dice al navegador que ste es el inicio del documento HTML. Al trmino del documento se ha escrito < html> que significa que es el final del documento. El texto entre las etiquetas <head> y < head> es la informacin de inicio del cdigo (header) y no aparece en la ventana del navegador. El texto entre las etiquetas <title> es el ttulo 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 pblico. 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 prrafo.

    2.) Segunda Parte El tamao de las letras del texto se puede variar usando etiquetas (tags) para ttulos y sub ttulos. Estas etiquetas llevan los smbolos: h1 al h6, en donde <h1> produce las letras ms grandes, y < h6> las ms pequeas. La etiqueta <hr > produce una lnea horizontal. Se tienen etiquetas para ubicar el texto en la pgina, por ejemplo, para poner un ttulo al centro, se emplea: align="center". Veamos en la siguiente imagen, el cdigo anterior con los siguientes cambios. Grfico 78. Cambios en el cdigo HTML modificando tamao del texto

    Cdigo escrito en el Grfico 78: <html> <head> <title>Mi primer ejercicio</title> </head> <body> <h1 align="center">Notas acerca de Don Quijote</h1>

    71
    <h2>Prologo</h2> <p>Desocupado lector: sin juramento me podrias creer que quisiera que este libro, como hijo del entendimiento, fuera el mas hermoso, el mas gallardo y mas discreto que pudiera imaginarse.</p> <hr/> </body> </html>

    De acuerdo al cdigo anterior, y seleccionando en el men a "Tools", y luego a "View in Browser", se llega a producir la segunda versin de la pgina del Ejercicio, segn podemos ver en la siguiente imagen. En el grfico 79 podemos observar que el ttulo ha aumentado tamao y se encuentra localizado al centro de la pgina, y tambin puede notarse la lnea horizontal en la parte inferior. Grfico 79. Vista del navegador con los cambios en el texto

    3.) Tercera parte Ahora pasamos al tema de agregar una imagen y una direccin de sitio (URL) a la pgina del ejemplo. Vamos a colocar la fotografa "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 permetro de 3 pixels, y vamos a escribir un ttulo alterno (alt) que diga: "Imagen del libro de Don Quijote". Para escribir el cdigo, vamos a colocar el nombre de la foto y sus dimensiones dentro de la etiqueta: < img src=".........">. Ahora vamos a mostrar en el siguiente grfico como luce el cdigo html, en donde tambin colocamos un enlace al sitio del Instituto Cervantes (http://www.cervantes.es/portada_b.htm ).

    72

    Grfico 80. Cdigo modificado para agregar foto y enlace

    Cdigo escrito en el Grfico 80:

    <html> <head> <title>Mi primer ejercicio</title> </head> <body> <h1 align="center">Notas acerca de Don Quijote</h1> <h2>Prologo</h2> <p>Desocupado lector: sin juramento me podrias creer que quisiera que este libro, como hijo del entendimiento, fuera el mas hermoso, el mas gallardo y mas discreto que pudiera imaginarse.</p> <hr/> <img src="LibrodonQui320x240opt.jpg" border="3" width="320" height="240" alt="Imagen del libro de Don Quijote"> <a href="http://www.cervantes.es/portada_b.htm">Instituto Cervantes</a> </body> </html>

    El cdigo para hacer el enlace a determinado sitio, en este caso el Instituto Cervantes, se verifica colocando la direccin 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 pgina web en este tercera parte del ejemplo:

    73
    Grfico 81. Vista del navegador al agregarse la foto y el enlace

    Como este tema es tan abundante de posibilidades de embellecer a las pginas, se tienen muchas ms etiquetas de html y procedimientos, que se pueden ir aprendiendo en varios sitios gratuitos como los selecionados a continuacin. Primeros veamos algunos enlaces en idioma Espaol: Aprenda HTML paso a paso (http://us.geocities.com/pbartolomei/tupag/ ), Manual de Html Bsico (http://www.escena.ya.com/micromik/html_basico.html ), Tutorial html Bsico (http://members.fortunecity.es/seres3/webt/indive.htm ), y Manual Bsico de HTML (http://www.geocities.com/Athens/2950/inet008.htm ). En idioma Ingls recomendamos conocer las varias partes del sitio W3 Schools (http://www.w3schools.com/web/web_html.asp ), que tienen tutoriales para la construccin completa de pginas web desde lo bsico a lo avanzado. Este sitio ha sido una de las fuentes principales de informacin para el presente captulo. Se tienen enlaces seleccionados de este tema en la seccin Web Pages Design (http://www.usefulsites.terminus1.com/#webpa ) 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 captulo, en el numeral VI.

    III.) Color en la pgina 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 percepcin de los varios colores de dicho objeto. El cerebro puede distinguir los colores bsicos, rojo, verde, y azul. El resto de los colores son una mezcla de estos colores. Por otra parte, la luz del sol es una combinacin de varios colores, en forma de luz blanca, que se puede descomponer mediante una lente prismtica, o en el fenmeno 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.

    74
    1.) Los nombres de los colores Desde 1996 el consorcio internacional W3C (http://www.w3.org/ ) ha establecido los estndares para darle nombre a los colores en HTML. Se reconocen los tres colores primarios como RGB por sus siglas en Ingls 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 nmeros en serie: dos para el rojo, dos para el verde, y dos para el azul, por ejemplo una anotacin 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 representacin numrica de los colores es poniendo la contribucin 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 ms sencilla de especificar los colores, que solamente es vlida 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 (http://www.w3schools.com/html/html_colors.asp ), HTML Color Values (http://www.w3schools.com/html/html_colorsfull.asp ), HTML Color Names (http://www.w3schools.com/html/html_colornames.asp ). Como se puede 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 ms usado en HTML. En el sistema hex, que tiene como base 16, (en vez de la base 10 de la numeracin usual), existen 16 smbolos: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. En el sistema Hex se representan los seis nmeros de cada color en una combinacin de los smbolos 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 codificacin de HTML, de preferencia hacerlo en el sistema hex. En las dos siguientes grficas se aplica el cdigo html a diferentes anotaciones de texto en colores. Se puede ver el cdigo html, y ms abajo, la correspondiente pgina web, mostrando los diferentes colores segn la identifacin del color. Grfico 82. Aplicacin de varios colores al texto mediante el cdigo

    75
    Grfico 83. Texto de varios colores, al aplicar el cdigo

    Varias tablas con abundantes muestras de colores se pueden ver en RGB-Farben (http://www.wackerart.de/rgbfarben.html ). Ms informacin acerca de conceptos del color y de sus identidades puede hallarse en Web colors: from Answers.com (http://www.answers.com/main/ntquery?method=4&dsid=2222&dekey=Web+colors&gwp=8&cu rtab=2222_1&linktext=Web%20colors ). Otro sitio que puede ser til, por presentar ejemplos automticos de combinaciones de texto y diferentes colores de fondos es: Visibone Color Lab (http://www.visibone.com/colorlab/ ). 2.) El contraste de los colores Ahora que se tienen definidos los nombres de los colores, veamos una aplicacin prctica acerca del contraste de dos o ms colores en texto de una pgina web. Es usual presentar un texto con letras de color negro en un fondo de color blanco; sin embargo tambin se emplean otros colores para las letras y un color diferente para el fondo o "background", con la intencin de embellecer la pgina. As que vamos a conocer del caso de cmo armonizar ambos colores, de tal manera de que la pgina luzca bonita y a la vez que sea fcil de leer. Primero veremos como poner un color de fondo a nuestra ltima pgina "Colores en HTML", y para ello escribimos el cdigo en donde ponemos como color de fondo #d7d7d7, (color gris claro) como se muestra en el Grfico 84: Grfico 84. Cdigo para colocar un color de fondo

    76
    Como se puede apreciar arriba, hemos agregado a la etiqueta < body > la frase de estilo (necesaria para dar color a toda la pgina): "background-color:#d7d7d7". Obteniendo el resultado que sigue: Grfico 85. Al aplicar el cdigo se produce el color de fondo

    Examinando la imagen anterior se puede notar, que algunos colores de letras se leen mejor en este fondo gris. Parece que las letras y nmeros de color azul se aprecian mejor, y tambin a las letras de color rojo se les nota un buen contraste en comparacin a las dos lneas de abajo. Afortunadamente en internet se encuentra ayuda para obtener buenos contrastes en colores de letras y colores de fondos, como veremos a continuacin. Existe un sitio web en donde de manera gratuita, hacen el anlisis 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 (http://juicystudio.com/services/colourcontrast.php ). 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 el Grfico 86 se puede apreciar en la parte superior, las dos casillas para la introduccin de los datos de los colores, en donde ya hemos escrito la identidad de los dos colores del ejemplo. Luego se oprime el botn "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 rectngulo con las letras azules y el fondo amarillo (como se haba 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.

    77

    Grfico 86. Resultado del anlisis del contraste de colores

    3.) Seleccionando los colores Adems de los colores de las letras y del fondo, en la preparacin de la pgina web, generalmente se le aplican otros colores a manera de volverla mas atractiva o funcional. A veces es necesario seleccionar colores que armonicen con fotografas u otras imgenes que estn includas en la pgina. Otras veces, puede suceder que al diseador le gusta algn color de otro sitio y desee incorporarlo al propio. La situacin puede ser de querer determinar el nombre exacto de cierta tonalidad de color de una foto o de cualquier otra imagen, con el propsito de aplicar este color a una pgina que estemos elaborando. Por ejemplo, vamos a suponer que deseamos determinar la identidad o el nmero hexadecimal de un color "rosado pastel" de un punto especfico de la siguiente fotografa:

    78
    Grfico 87. Fotogafa de las flores Rosaditas

    Para ello acudimos a un programa gratuito llamado Color Cop, que puede ser obtenido en el sitio: http://www.datastic.com/tools/colorcop/ Este programa despus de ser descargado produce la siguiente ventana: Grfico 88. Ventana de Color Cop

    79

    Como puede apreciarse (en el Grfico 88) a la izquierda se tiene un indicador a manera de gotero, que se arrastra con el ratn hacia el punto exacto de la foto donde se quiere identificar al color. Este gotero va transmitiendo la identificacin del color en forma los componentes RGB, y tambin en dgitos 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 numrica o sea la identificacin del color que buscamos.

    Grfico 89. Identificacin de la muestra del color

    Mayor informacin 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 inspeccin y la seleccin de colores. Una posiblidad son las tablas de colores y su identificacin 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 armona en una pgina web. Un sitio de esta clase es 4096 Color Wheel (http://www.ficml.org/jemimap/style/color/wheel.html ), cuya imagen ofrecemos en el siguiente grfico:

    80
    Grfico 90. Ventana inicial del sitio 4096 Color Wheel

    Aunque la forma de operar en detalle se ofrece en el sitio indicado, podemos adelantar que la base de su funcionamiento es llevar el ratn hacia el crculo concentrico de colores o hacia el cuadrado a su derecha, y los colores sealados van a ir apareciendo con su identificacin numrica en las casillas respectivas. De esta forma se obtiene la visualizacin y la identificacin de los colores deseados. Existe un buen libro que contiene informacin 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 (http://www.cookwood.com/html5ed/ )

    IV.) Diseo de pginas 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 pginas web, mientras que el editor genera automticamente el cdigo respectivo. Este programa permite al usuario colocar texto o imgenes en una pgina, 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 cdigo HTML ms eficiente, y porque una misma pgina es vista de manera diferente en diversos navegadores.

    81
    Un listado de este tipo de editores se encuentra en List of HTML editors-Answers.com. (http://www.answers.com/main/ntquery?method=4&dsid=2222&dekey=List+of+HTML+editors& gwp=11&curtab=2222_1&linktext=List%20of%20HTML%20editors ) Aqu vamos a resear a dos de ellos.

    1.) Editor Composer de Mozilla Como se ha visto en el captulo de Navegadores, el Composer es parte del navegador Mozilla (http://www.mozilla-europe.org/es/products/mozilla1x/ ). Viendo la siguiente imagen del Composer, se nota en la parte inferior cuatro pestaas con los ttulos: Normal Etiquetas HTML Cdigo fuente Vista Preliminar En el apartado "Normal" es donde se escribe el texto de la futura pgina web. Se escribe directamente como que fuera un procesador de palabras corriente, tipo MS Word o Notepad. Como ilustracin hemos escrito acerca de Don Quijote (como en un ejemplo anterior), con un ttulo en la parte superior, un subttulo, y un prrafo. Grfico 91. Escribiendo en la ventana del Composer de Mozilla

    En el siguiente Grfico 83 se muestra la ventana del cdigo HTML que el editor Composer ha construdo en base a nuestra redaccin del texto inicial. A la ventana del cdigo se llega al seleccionar la pestaa "Cdigo fuente".

    82
    Como se puede apreciar, la tarea del usuario se simplifica, ya que solamente tiene que escribir su texto sin atender la codificacin. Si el usuario lo desea, puede modificar o afinar algunos aspectos del cdigo en la ventana "Cdigo fuente". Otra ventaja es que este editor se obtiene de manera gratuita, segn se ha descrito en el captulo Navegadores. Una descripcin detallada acerca del funcionamiento del Composer se encuentra en la seccin del men "Ayuda", que se encuentra en la parte superior derecha de la ventana. Grfico 92. Cdigo que el Composer produce en forma automtica

    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 creacin de sitios web de gran calidad, incluyendo efectos de figuras en movimiento, audio, video, formularios para interactuar con los clientes, etc. La versin "Macromedia Dreamweaver MX 2004" posee abundante informacin en su men de "Ayuda" acerca de su contenido y de su funcionamiento, como se muestra en el siguiente grfico. Grfico 93. Ventana de la funcin de Ayuda de Dreamweaver MX 2004

    83
    A manera de ilustracin presentamos en el siguiente grfico una vista de la ventana de Dreamweaver que muestra simultneamente el cdigo y la parte de Diseo (o sea donde el usuario va escribiendo el el texto de la pgina). De esta manera el usuario puede ir conociendo las lneas del cdigo a medida que escribe. Esta es otra manera de aprender el lenguaje HTML. Grfico 94. Vista de Dreamweaver con el cdigo y con el texto normal

    Conviene mencionar que el precio del editor Dreamweaver MX 2004 es de US$309 a US$473, de acuerdo al resultado de una bsqueda en Froogle/Google, (a finales del 2005). Queremos hacer una rpida mencin 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 (http://nave.escomposlinux.org/productos/nvu/ ). En el prximo captulo vamos a exponer las ventajas y limitaciones de los programas de fuente libre (open source), incluyendo una descripcin del editor Nvu.

    V.) Editores de imgenes para sitios web


    Editor de imgenes es un programa para alterar o mejorar una imagen, incluyendo modificaciones en el brillo, la iluminacin, el contraste, el enfoque, el tamao, el filtrado, etc. Por su medio se verifica la optimizacin de las imgenes para su uso en internet, que se refiere al proceso de ajuste de la calidad y tamao del archivo para que cargue mas rpido en los sitios web. En ingls los edtitores de imgenes 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 (http://www.answers.com/image%20editing%20program?web.x=1 ), y en Fix Photos with Image Editing Software (http://www.microsoft.com/windowsxp/using/digitalphotography/learnmore/editing.mspx ).

    84
    A manera de ejemplo, presentamos dos fotografas, siendo la primera, sin ajustes (la original), y la segunda, con mejoras en iluminacin y contraste. Grfico 95. Fotografa original sin ajustes de Wendy

    Grfico 96. Fotografa anterior con ajustes en iluminacin

    Ahora veremos una breve descripcin de algunos editores de imgenes con informacin de sus principales caractersticas.

    85
    1.) Photoshop de Adobe Systems Es un editor o diseador grfico, popular y con muchas funciones para diversos tratamientos de imgenes. Photoshop es el editor de referencia, debido a sus mltiples capacidades, principalmente a su posibilidad de trabajar con varias capas que se superponen con varios ordenamientos, para lograr imgenes muy interesantes. Tambin tiene la capacidad de convertir las imgenes a varios formatos, adems de que provee su propio formato (extensin .psd). Photoshop inicialmente fu diseado para editar imgenes para impresiones en papel; sin embargo, actualmente es muy utilizado en la produccin de imgenes para la Red. Ahora anexamos una grfica de la ventana principal de Photoshop 7, para dar una idea de su contenido, mostrando una imagen de satlite de San Salvador en el puesto para ser editada, (obtenida mediante Maps-Google http://maps.google.com/ ). Grfico 97. Ventana principal de Photoshop 7

    La versin mas reciente de Photoshop es la nmero 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 (http://store.adobe.com/store/products/master.jhtml?id=catCreativeSuiteSTD ). 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 ms los siguientes: GoLive CS, y Adobe Acrobat Professional.

    86
    2.) El GIMP El Gimp (Gnu Image Manipulation Program) es un editor de imgenes de fuente libre (open source), que es gratuito. Numerosos programadores han contribdo al desarrollo de este programa, convirtiendo a Gimp en una herramienta seria para la manipulacin de imgenes. Gimp se inici en febrero de 1996 con la versin 0.54. Continuaron varias versiones mejoradas a nivel experimental, y en junio de 1998 sali la versin 1.0 que fu considerada suficientemente estable para hacer una distribucin general a nivel mundial. La edicin actual es la nmero 2.2.9, que presentamos en el siguiente grfico: Grfico 98. Vista del programa gratuito el Gimp con varias ventanas

    Entre las principales caractersticas 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, lpices, "airbrush", etc. Capacidad de hacer textos con diferentes formatos. Con variedad de filtros artsticos para aplicarlos a fotografas Tiene las funciones de Seleccionar, Copiar y Pegar. Posee las funciones de "undo/redo" para probar muchos cambios de edicin. Tiene varios formatos de archivos de imgenes, como gif, jpeg, png, xpn, tiff, y muchos otros. Con versiones para las plataformas de Windows, Linux, y Mcintosh. En su seccin 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 imgenes, y que es una alternativa interesante a Photoshop. Ahora veremos algunos enlaces con ms informacin acerca de Gimp: Sitio de donde puede obtenerse la versin para Windows es Gimp para Windows de Sourceforge.net (http://gimp-win.sourceforge.net/stable.html ). El sitio oficial es Gimp.org (http://www.gimp.org/ ). Sitio web en espaol acerca de aplicaciones de The Gimp se encuentra en (http://www.terra.es/personal/rigrasan/gimp.htm ). Muchos datos acerca de Gimp, incluyendo una comparacin con Photoshop se pueden hallar en Answers.com/Gimp (http://www.answers.com/Gimp?gwp=11 ).

    87
    3.) Picasa Picasa es un editor y organizador de fotografas, de la familia de Google, que puede ser obtenido gratuitamente en el siguiente sitio: (http://picasa.google.com/index.html ). Ofrece varias posiblidades de mejorar las fotos mediante el uso de tres pestaas: "Arreglos bsicos", "Efectos", y "Perfeccionamiento", tal como se muestra en el siguiente grfico: Grfico 99. Vista del editor de fotografas Picasa del grupo de Google

    Entre los varios servicios ofrecidos por Picasa, mencionamos los siguientes: a) organizacin de las fotografas contenidas en la computadora, formando los grupos o colecciones que desee el usuario, de tal forma que puedan ser encontradas y visualizads fcilmente; b) las fotos pueden ser enviadas de manera simplificada por medio del correo electrnico de Google (Gmail); y c) si el usuario lo desea, puede grabar por este medio, las fotos en CD o DVD. Mayor informacin puede obtenerse en Asistencia al cliente de Picasa: (http://picasa.google.com/support/bin/topic.py?hl=es&topic=0 ). Picasa puede ser la opcin conveniente para aquellos casos en que solamente se necesitan mejoras sencillas a las fotografas como cambios de tamao, o mejorar la iluminacin o contraste, sin tener la necesidad de descargar y aprender programas tan completos y complejos como los dos anteriores.

    88
    VI.) Ejercicio para poner una pgina en internet

    El propsito del ejercicio es explicar paso a paso el procedimiento para colocar una pgina web en internet. Iniciamos desde escribir el cdigo HTML en el editor Crimson con un ejemplo sencillo, como lo vimos en la Seccin II de este captulo, luego seguimos con el servicio que ofrece Yahoo/Geocities para colocar la pgina en su servidor. Paso 1: Lo primero que hacemos es obtener una cuenta de correo electrnico en Yahoo para lograr tener una ID en el sistema de Yahoo/Geocities. (Informacin para abrir una cuenta se expuso en el captulo: "Comunicacin"). 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 trmino que desee, que podra ser, digamos ... "conozca5", o "conozca2006". Paso 2: Escribir el cdigo html en un editor de texto. Aqu hemos empleado el editor Crimson. (El mensaje puede ser cambiado por quien siga la prctica). En la figura siguiente presentamos la redaccin de la primera pgina. Grfico 100. Cdigo html escrito en el editor Crimson

    Para guardar en el disco duro de la computadora el cdigo anterior, se abre un archivo primario en la particin "C" con el nombre de "ejercicioInternet". Al archivo del cdigo lo llamamos "index.html". Este nombre no se debe cambiar ya que es preciso que la primera pgina lleve ese nombre. Si se desea ver como luce la pgina 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 imgen aparece la pgina mencionada.

    89
    Grfico 101. Forma en la que aparece el cdigo en al pgina web

    Paso 3: Ir al sitio de carga de Yahoo/Geocities. Se tienen dos versiones de este sitio: en espaol (http://login.yahoo.com/config/login?.src=geo&partner=&.v=&.u=0qci4g91nms6n&.intl=e1&.don e=http%3a//espanol.geocities.yahoo.com/reg ), y en ingls (http://geocities.yahoo.com/home/ ). Para el presente ejercicio hemos tomado la versin en espaol segn se aprecia en el Grfico 93, en donde aparece que ya se ha llenado la casilla de "ID de Yahoo" con "conozca3", y con la respectiva contrasea. Hacer clic en el botn "Ingresar" Grfico 102. Vista inicial del sito de Yahoo-Geocities

    90
    Paso 4: Estamos en la ventana "Yahoo! Geocities" (Grfico 94), en donde podemos ver en su parte superior el anuncio de bienvenida: "Welcome, conozca3", y a la derecha la nueva direccin de nuestra pgina: "http://www.geocities.com/conozca3", (direccin todava incompleta). Vamos ahora a la columna de la derecha titulada "Advanced Toolbox", y hacemos clic en File Manager. Grfico 103. Ventana de Yahoo-Geocities para la cuenta: conozca3

    Paso 5: En la nueva ventana (Grfico 95) hacemos clic a "Open File Manager", segn podemos ver abajo: Grfico 104. Ventana resultante al pulsar File Manager en grfico 94

    91
    Paso 6: Por el clic del paso anterior (en Open File Manager), nos aparece la nueva ventana que muestra el Grfico 96, por medio de la cual se hace la carga del archivo de nuestra pgina. Para ello, hacemos clic en el botn: Upload Fles, que se encuentra abajo a la derecha del siguiente grfico Grfico 105. Ventana resultante al pulsar Open File Manager del grfico 95

    Paso 7: Por la accin anterior llegamos a la siguiente ventana, llamada "Easy Upload" (Grfico 97), en donde primero hacemos un clic en el botn superior Browse, y nos lleva al Paso 8. Grfico 106. Ventana llamada Easy Upload

    Paso 8: Aqu aparece la ventana (Grfico 98) donde se muestra el resultado de haber buscado en la porcin "C:/" del disco duro, el folder "ejercicioInternet", que contiene a nuestro archivo "index.html".

    92
    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 botn "Abrir", y llegamos al siguiente paso. Grfico 107. Ventana que muestra la ubicacin del archivo index.html

    Paso 9: En la imagen de abajo (Grfico 99) se puede ver que la ubicacin del archivo "index.html" ya se encuentra seleccionada en la ventana "Easy Upload", y que ahora solamente debe hacerse clic en el botn Upload Files para enviar a nuestro archivo al espacio de internet. Grfico 108. Ventana que muestra a index.html en el cuadro Easy Upload

    Paso 10: La siguiente ventana (Grfico 100)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.

    93
    Grfico 109. Vista final del proceso de carga del archivo: index.html

    Paso 11 y ltimo: Finalmente hemos concludo el ejercicio (gracias al esfuerzo y paciencia), y ya tenemos la pgina del ejercicio elevada al sistema internet con la siguiente direccin (URL): http://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 captulo, existe gran variedad de opciones para la elaboracin de sitios web, como la seleccin de editores ya sea de texto o de imgenes, eleccin y obtencin de fotografas, seleccin de temas, las varias formas de uso del espacio de las pginas, seleccin de los colores, y otros asuntos ms. Con el contenido del presente captulo, adems de dar a conocer el tema al principiante, se ha querido presentar aspectos que lo motiven a practicar la creacin de pginas, por el mtodo de "aprender haciendo", y tambin acudiendo a la lectura de las fuentes de informacin aqu indicadas.

    You might also like