Con el ordenador a cuestas
http://blog.educastur.es/sofwarelibre
MÓDULO 4. TU PRIMERA PÁGINA Diseña la estructura de carpetas y directorios Utilizando los procedimientos habituales para crear nuevas carpetas en el Sistema Operativo instalado en tu equipo, crea un directorio llamado webcurso en tu directorio personal y, en su interior, las carpetas imagenes, multimedia, archivos necesarias para tu sitio Web inicial.
La primera página Ejecuta Kompozer por el procedimiento habitual: observa la pantalla principal de la aplicación y el área concreto de trabajo donde irás creando tu primera página Web. Acude al menú Archivo y en el desplegable selecciona la opción Guardar como... Kompozer te solicitará un título para la página que estás guardando, título que se mostrará en la barra de título del navegador Web cuando accedas a la página desde Internet. Teclea en el campo de texto Definición; este será el título de la página que estás creando. En pantalla se mostrará, a continuación, la ventana Guardar como que te ofrecerá como nombre del archivo de la página web que estás realizando el mismo que escribiste en el párrafo anterior. Modifica el nombre del archivo por definicion.html y asegúrate de guardarlo en la carpeta webcurso que has creado cuando diseñaste la estructura del sitio.
Figura 4.1. Ventana Guardar como... Guarda la página en la ubicación que elijas.
Manual Kompozer en Ubuntu 9.04
Edita Sueiras - 2009
Con el ordenador a cuestas
http://blog.educastur.es/sofwarelibre
El resultado será un nuevo archivo definicion.html en la carpeta webcurso que podrás visualizar en tu navegador web simplemente haciendo doble clic sobre él. Lógicamente, en este momento, la página no mostrará nada más que un fondo blanco porque se encuentra completamente vacía (pero observa como el nombre de la página Definición sí se muestra en el Título de la ventana del navegador). Tendrás que comenzar a añadirle texto, imágenes y cualquier otro elemento multimedia que desees.
Configura Kompozer para tu nuevo sitio Web Para facilitar el trabajo de creación y edición de tus páginas Web en Kompozer es muy conveniente que configures la aplicación para que referencie siempre tu sitio Web recién creado. Para ello tienes la ventana Administrador de sitios de Kompozer, muy útil e imprescindible cuando tienes varios sitios web creados en tu equipo. Te enseñamos a utilizarla.
Figura 4.2 Ventana Administrador de sitios
Haz clic sobre el icono Editar sitios para abrir la ventana con el formulario de configuración de la publicación de un nuevo sitio. Introduce los siguientes valores: •
Nombre del sitio: Los ecosistemas.
•
Servidor de publicación: como el sitio web será realizado en tu equipo, en local (ya te ocuparás más adelante, cuando finalices su creación y edición, de publicarla en Internet), busca la carpeta webcurso mediante el botón Seleccionar directorio. Cuando la encuentres haz clic en el botón Seleccionar.
Manual Kompozer en Ubuntu 9.04
Edita Sueiras - 2009
Con el ordenador a cuestas
•
http://blog.educastur.es/sofwarelibre
Nombre de usuario: Escribe tu nombre.
Figura 4.3. Configuración del nuevo sitio
Haz clic finalmente en Aceptar. Observa cómo la estructura que has diseñado de archivos y carpetas ahora se muestra en la ventana de Administrador de sitios.
Figura 4.4. Tu nuevo sitio en el Administrador de sitios
Podrás utilizar el Administrador de sitios para acceder directamente a las páginas que vayas realizando y así poder editarlas con rapidez, crear nuevas carpetas en la carpeta webcurso, renombrarlas, etc. Resulta pues, muy útil, configurarlo adecuadamente.
Añade un texto a la página El texto es un componente fundamental de las páginas Web. Lo generas tecleándolo (aunque también podrás copiarlo desde cualquier otro programa y pegarlo en el espacio de trabajo).
Manual Kompozer en Ubuntu 9.04
Edita Sueiras - 2009
Con el ordenador a cuestas
http://blog.educastur.es/sofwarelibre
Debes considerar que su principal objetivo es su legibilidad, es decir, que se pueda leer con facilidad (circunstancia que va a depender no sólo del tipo de fuente y tamaño utilizado, sino también de los colores e imágenes empleados en el fondo de la página). Reserva el subrayado exclusivamente para los enlaces, utiliza la cursiva para titulares o para enfatizar algún fragmento de texto y usa la negrita para destacar alguna palabra. Ten en cuenta que si empleas un tipo de fuente que el navegante de tu sitio Web no tiene en su equipo no la verá exactamente como la has diseñado. Por tanto, emplea tipos de fuente comunes como Arial, Times New Roman, Courier, fuentes prácticamente disponibles en cualquier equipo con cualquier Sistema Operativo instalado, incluidos equipos Linux. Para organizar el texto en pantalla es preferible utilizar tablas (ya te indicaremos más adelante cómo hacerlo, aunque te adelantamos que es similar a como las usas con cualquier procesador de textos) y prescindir del uso de tabuladores o sangrías. Tampoco abuses de la utilización de viñetas. ¡Manos a la obra! Teclea en el espacio de trabajo en blanco el siguiente texto: ¿Qué son los ecosistemas?. Pulsa la tecla Intro al final del párrafo para que Kompozer realice un salto de línea. ¡Exactamente igual que harías si estuvieras utilizando un procesador de textos en lugar de una aplicación de creación web! Continúa tecleando:
En todo lugar, en los bosques, los ríos, en el desierto, en el mar o incluso en pequeñas charcas, se encuentran una gran variedad de seres vivos: animales, plantas, etc. Estos lugares también se caracterizan por la presencia de elementos inanimados como el aire, el agua, el suelo o la luz. Los seres vivos necesitan estos elementos para crecer y desarrollarse. El conjunto formado por todos los seres vivos y los seres inanimados de un territorio es un ecosistema. Sólo debes preocuparte de escribir el texto y de realizar los intros que desees para separar los párrafos. Guarda el archivo desde el menú Archivo – Guardar. Visualiza su aspecto en tu navegador haciendo doble clic sobre el archivo definicion.html de la carpeta webcurso. Se mostrará el texto escrito pero la página sigue siendo muy sosa y aburrida: debes editarla para mejorar su aspecto.
Manual Kompozer en Ubuntu 9.04
Edita Sueiras - 2009
Con el ordenador a cuestas
http://blog.educastur.es/sofwarelibre
Edita el texto escrito Podrás editar el texto escrito para cambiar su tipo de fuente, tamaño de fuente, color, alineación de párrafos, etc. Considera que un paso previo y obligatorio es seleccionar previamente el fragmento de texto que deseas editar antes de aplicar en él cualquier cambio (haz clic y arrastra con el ratón para seleccionar un fragmento de texto, haz doble clic sobre una palabra para seleccionarla o haz doble clic y un clic rápido para seleccionar toda la línea): observa cómo el texto seleccionado se muestra resaltado para indicarte que lo está.
Alinea el título de la página al centro Por defecto, el texto que tecleas o copias-pegas se alinea con el borde izquierdo de la ventana. Si quieres centrar el texto o alinearlo al margen derecho tendrás que utilizar uno de los iconos de alineación de texto que localizarás en la Barra de Formato de Kompozer.
Figura 4.5. Alineación del texto: izquierda, centro, derecha, justificado
En este caso utiliza el icono Alinea al centro para centrar el texto en la página que estás creando. El párrafo se moverá en consonancia. (Este procedimiento te permitirá también alinear imágenes, encabezados y líneas separadoras horizontales: simplemente selecciona el objeto cuya alineación quieras cambiar y haz clic sobre el botón apropiado).
Aumenta su tamaño Kompozer te permite aumentar el tamaño del texto de una manera muy rápida utilizando los botones Reducir / Aumentar el tamaño de letra que encontrarás en la BaManual Kompozer en Ubuntu 9.04
Edita Sueiras - 2009
Con el ordenador a cuestas
http://blog.educastur.es/sofwarelibre
rra de Formato:
Figura 4.6. Botones Aumentar / Reducir el tamaño del texto
Como siempre, primero tendrás que seleccionas el texto. Después haz clic sobre el botón Aumentar para que se muestre a mayor tamaño. Por ejemplo, haz clic 3 veces sobre este icono para que adquiera un tamaño apropiado. Finaliza haciendo clic sobre un lugar en blanco del espacio de trabajo para ver el resultado final. Haz clic sobre la pestaña Vista Preliminar situada en la parte inferior del espacio de trabajo para ir visualizando el aspecto de la página, tal y como la vería un visitante de tu Web. Repite el procedimiento, utilizando una vez el botón Aumentar el tamaño del texto, sobre el resto de los párrafos de la página. ¡Se aprecia una mejora sustancial en el diseño, aunque aún la página es muy simple al ser en blanco y negro!. ¡Añade algo de color para mejorar su presentación!.
Cambia el color del texto Emplear colores en los textos puede añadir interés a las páginas. En la mayor parte de las ocasiones querrás emplear un color de texto que contraste fuertemente con el fondo: por defecto, la página que creas tiene un texto negro sobre un fondo blanco (podrás personalizar ambos aspectos más adelante). También es posible que quieras resaltar porciones de texto en las páginas mediante el empleo de un color de fuente diferente del que usas para el resto del texto. Por ejemplo, algunas páginas quedan elegantes con los encabezados en un color diferente. Ahora bien, recuerda no abusar en exceso del cambio de colores (la legibilidad es lo primero) y asegúrate de mantener los colores consistentes por todo el sitio. Por ejemplo, emplea el mismo color para el texto y los enlaces en la página principal que en las páginas internas. Para cambiar el color del texto seleccionado debes utilizar los botones Elegir color de la Barra de Formato: el primero te permite cambiar el color de la fuente, el segundo cambiará el fondo.
Figura 4.7. Botones Elegir colores de la Barra de Formato
Manual Kompozer en Ubuntu 9.04
Edita Sueiras - 2009
Con el ordenador a cuestas
http://blog.educastur.es/sofwarelibre
En cuanto hagas clic sobre cualquiera de estos dos iconos se abrirá en pantalla la ventana Color del texto:
Figura 4.8. Ventana Selección del color del texto
Su utilización es muy simple: de la lista de colores predefinidos (la lista estándar que será visible en cualquier plataforma o en cualquier tipo de monitor) selecciona un color de tu interés o bien elige una tonalidad diferente entre la muestra que aparece en la parte izquierda de la ventaja haciendo clic sobre el lugar que determines. Puedes también utilizar la gama de tonalidades que se encuentra justamente debajo para seleccionar un matiz de color más claro u oscuro. Observa cómo cambian los valores establecidos en Tono, Saturación, Brillo, Rojo, Verde, Azul, cada vez que seleccionas un color diferente y la pequeña muestra del color que te ofrece la propia ventana según el color que hayas seleccionado. Esta ventana merece una pequeña explicación que tiene que ver con los valores que se muestran en la parte inferior de la misma: •
La combinación de teclas y números que se muestra en la caja de texto Hexadecimal es otra forma de referenciar los colores. Puedes consultar el código hexadecimal de cada color en http://html-color-codes.info/codigos-de-coloreshexadecimales/ y ver sus resultados finales.
•
Encontrarás en Internet muchas herramientas online que te permitirán elegir y visualizar diferentes gamas de color utilizando su código hexadecimal y/o instalar programas específicos para conocer el código hexadecimal de cualquier color.
Manual Kompozer en Ubuntu 9.04
Edita Sueiras - 2009
Con el ordenador a cuestas
http://blog.educastur.es/sofwarelibre
Selección de Sitios Web: •
Valores de los colores en Hexadecimal: http://www.webtaller.com/utilidades/csscoder/colores.php
•
Cloford: paleta con más de 500 tonos de color http://cloford.com/resources/colours/500col.htm
•
ColorSchemer: recurso de selección online http://www.colorschemer.com/online.html
•
Conversor online de colores DRAAC: Te permite visualizar el color seleccionado como fondo de la pantalla http://www.draac.com/colorconvert.html
Programas gratuitos y libres: •
Windows: Pixel Picker http://www.screwturn.eu/PixelPicker.ashx – Programa libre bajo licencia GNU/GPL. Requiere Microsoft .Net Framework 2.0
•
Windows: Instant Eyedropper http://instant-eyedropper.com/ y Pixel Pick http://www.design-lib.com/the_pixel-pick.php ambos completamente gratuitos
•
Mac Os X: Hex Color Picker http://wafflesoftware.net/hexpicker/
•
Ubuntu: Dispones de Gcolor2 y KcolorChooser, ambas aplicaciones muy similares que te permitirán obtener el código hexadecimal del color seleccionado. Puedes instalarlas directamente desde Synaptic.
En este ejemplo en concreto, selecciona el título con la pregunta en el espacio de trabajo y selecciona un color de la gama azul (tonalidad oscura) de la gama de colores predefinidos de la ventana. Repite el procedimiento para seleccionar el color gris oscuro (código hexadecimal #333333) y aplicarlo al resto de párrafos de la página. El aspecto estético de la página ha mejorado, ¿no crees?
Utiliza encabezados predeterminados Aumentar o Reducir el tamaño del texto de tu página Web utilizando los botones que has visto en la Barra de Formatos no es demasiado preciso. Kompozer te ofrece la posibilidad de utilizar encabezados en las páginas Web, un tipo especial de formato de texto ya predefinido que configura los textos seleccionados con un tamaño de letra más grande que el texto normal, habitualmente en negrita y normalmente separados del texto anterior y posterior por una línea de espacio en blanco.
Manual Kompozer en Ubuntu 9.04
Edita Sueiras - 2009
Con el ordenador a cuestas
http://blog.educastur.es/sofwarelibre
Puedes emplear un encabeza para el título de la página pero también puedes utilizar distintos tamaños de encabezados para diferentes niveles de énfasis, además de que la utilización de encabezados te permite dar uniformidad al tamaño de los textos en tu sitio Web de una manera muy rápida y eficaz. En HTML se dispone de 6 tamaños de encabezado. No todos resultan efectivos como tal porque algunos son excesivamente pequeños, incluso más pequeños que el cuerpo del texto. Puedes acceder a los 6 tipos disponibles en Kompozer desde el menú desplegable de estilos de párrafo:
Figura 4.9. Encabezados predeterminados en HTML
Practica con la página que estás creando: 1. Utiliza la entrada del menú Editar – Deshacer, el icono Deshacer o la combinación de teclas Ctrl + Z tantas veces como precises hasta devolver la apariencia de la página a su estado inicial original: es decir, texto sin aplicar ningún tipo de formato de tamaño de fuente o color. 2. Selecciona el título interrogativo. Despliega los estilos de párrafo anteriores y haz clic sobre Título 1. ¡Vaya, menuda apariencia... y qué sencillo! Ahora aplica de nuevo los procedimientos que ya conoces para cambiar: •
El título a un color de tono azulado oscuro
•
El resto del texto aumenta su tamaño una vez utilizando el botón Aumentar el tamaño de fuente y cambia el color a un tono grisáceo oscuro, tal y como ya sabes realizar.
•
Selecciona el último párrafo de la página (el conjunto formado por... es un eco-
Manual Kompozer en Ubuntu 9.04
Edita Sueiras - 2009
Con el ordenador a cuestas
http://blog.educastur.es/sofwarelibre
sistema) y aplícale un estilo de párrafo Título 4. Utiliza la pestaña Vista Preliminar para visualizar el aspecto general de tu página y admira su nueva apariencia.
Figura 4.10. Aspecto final de la página
Guarda el archivo mediante Archivo – Guardar o utilizando el icono Guardar. Si lo deseas puedes previsualizar el aspecto de la página directamente en tu navegador predeterminado localizando la carpeta webcurso y haciendo doble clic sobre el archivo definicion.html.
Manual Kompozer en Ubuntu 9.04
Edita Sueiras - 2009