kompozer: guía completa acerca del programa, Guías, Proyectos, Investigaciones de Computación Gráfica

¡Descarga kompozer: guía completa acerca del programa y más Guías, Proyectos, Investigaciones en PDF de Computación Gráfica solo en Docsity!

D e s a rrollo de P a gin a s Web:

K o m p o Z er

Índice de contenido

Enlaces a Correo Electrónico

• INTRODUCCIÓN:...................................................................................................... - ¿Qué es KompoZer?....................................................................................................................
  • Entorno de trabajo.........................................................................................................................
    • Barra de titulo:
    • Barra de menús:..........................................................................................................................
    • Barra de Redacción:....................................................................................................................
    • Barras de Formato:......................................................................................................................
    • Ventana administración sitios web:
    • Ventana de área de edición:
    • Barra de modo de edición:..........................................................................................................
    • Barra de estado:...........................................................................................................................
  • Barras de menus (Ampliada)......................................................................................................
  • Creación de un Sitio Web............................................................................................................
  • Configuración de la página.........................................................................................................
    • Crear una Página Web...............................................................................................................
    • Guardar una Página Web...........................................................................................................
    • Vista preliminar en el navegador...............................................................................................
  • Propiedades de Página.................................................................................................................
• TEXTO................................................................................................................ - Introducción de texto................................................................................................................ - Selección de Texto.................................................................................................................... - SELECCIÓN........................................................................................................................ - El Portapapeles.......................................................................................................................... - Otras Operaciones útiles........................................................................................................... - BUSCAR Y REEMPLAZAR............................................................................................... - DESHACER Y REHACER.................................................................................................. - COMPROBACIÓN ORTOGRÁFICA.................................................................................
  • Formato de Texto.........................................................................................................................
    • Estilo de Párrafo........................................................................................................................
    • Fuente........................................................................................................................................
    • Negrita, cursiva y Subrayado....................................................................................................
    • Tamaño......................................................................................................................................
    • Alineación de Párrafos..............................................................................................................
    • Sangría de Párrafos...................................................................................................................
  • Otros elementos............................................................................................................................
    • Listas.........................................................................................................................................
    • Líneas........................................................................................................................................
• ENLACES............................................................................................................. - Direcciones absolutas y relativas.............................................................................................. - Tipos de Enlaces:......................................................................................................................
  • Aplicación.....................................................................................................................................
    • Enlaces Interno.........................................................................................................................
    • Enlaces Externo........................................................................................................................
    • Enlaces a Archivos:...................................................................................................................
  • Extra: Otras propiedades del Enlace:........................................................................................
  • Referencia HTML........................................................................................................................
    • Etiqueta y ................................................................................................................
    • Atributos de ......................................................................................................................
    • Atributos de ..............................................................................................................
• IMÁGENES............................................................................................................ - Formatos:.................................................................................................................................. - Formato GIF......................................................................................................................... - Formato JPG......................................................................................................................... - Formatos PNG...................................................................................................................... - Observaciones:..................................................................................................................... - Insertar imagen..........................................................................................................................
  • Propiedades de la Imagen:..........................................................................................................
    • Pestaña Dimensiones:
    • Pestaña Apariencia:
    • Pestaña Enlace:
    • Otras opciones:..........................................................................................................................
  • Insertar una imagen como fondo................................................................................................
  • Referencia HTML........................................................................................................................
    • Etiqueta ........................................................................................................................
    • Etiqueta y .....................................................................................................
    • Atributo background de BODY................................................................................................
    • Etiqueta Object..........................................................................................................................
    • Etiqueta Dynsrc.........................................................................................................................
• TABLAS............................................................................................................... - Introducción.............................................................................................................................. - Descripción de las tablas........................................................................................................... - Crear Tablas.............................................................................................................................. - Definir la tabla.......................................................................................................................... - Modificar tablas....................................................................................................................... - Propiedades de la tabla.............................................................................................................. - Propiedades de la celda.............................................................................................................
  • Otras Modificaciones...................................................................................................................
    • Insertar elementos.....................................................................................................................
    • Eliminando elementos...............................................................................................................
    • Combinando celdas
  • Cuestiones de Diseño...................................................................................................................
    • Resoluciones de pantalla...........................................................................................................
  • Extra: Referencia HTML:..........................................................................................................
    • Etiqueta ...................................................................................................................
    • Atributos de .............................................................................................................
• MARCOS.............................................................................................................. - Introducción:.............................................................................................................................
  • Referencia html............................................................................................................................
    • Etiquetas y ...................................................................................
    • Atributos de ....................................................................................................
    • Atributos de ............................................................................................................
• FORMULARIOS......................................................................................................
• CAPAS................................................................................................................. - Introducción..............................................................................................................................
  • Referencia HTML........................................................................................................................
    • Etiquetas DIV y SPAN..............................................................................................................
• CSS..................................................................................................................... - HOJAS DE ESTILO - Introducción
  • REFERENCIA HTML................................................................................................................
    • Introducción..............................................................................................................................
    • Terminología empleada en CSS................................................................................................
    • Propiedad..................................................................................................................................
    • Valor..........................................................................................................................................
    • Declaración...............................................................................................................................
    • Selector......................................................................................................................................
    • Regla de estilo...........................................................................................................................
    • Hoja de estilo............................................................................................................................
    • Colocación de las reglas de estilo.............................................................................................
    • Usar hojas de estilo en cascada.................................................................................................
    • Crear reglas de estilo.................................................................................................................
  • Extra: estilos capas......................................................................................................................
• PUBLICACIÓN DE PÁGINAS WEB............................................................ - Configuración de publicación...................................................................................................
  • Publicar nuestra web...................................................................................................................
  • Consejos a tener en cuenta..........................................................................................................

IINTRODUCCIÓNNTRODUCCIÓN::

Este tutorial tiene como fin brindar una base de conocimiento a aquellos que buscan una alternativa gratuita y libre para el diseño de una web, sin renunciar por ello a la calidad, ni a la facilidad de otras herramientas pensadas para el mismo fin.

¿Qué es KompoZer?

KompoZer es un editor de páginas web WYSIWYG (What you see is what you get - Lo que ves es lo que recibes). Es un derivado de NVU, es decir, una versión no oficial de NVU, el cual ha reparado ciertos errores(bugs) que este presentaba. Komposer está basado en Mozilla Composer pero con ejecución independiente. Su objetivo es facilitar el desarrollo de páginas web, gracias a las distintas formas de visualización disponibles en su interfaz como: código fuente, ventana WYSIWYG, visión con tags de HTML realzados) Presenta características como el soporte integrado de CSS y mejor gestión del soporte FTP para actualización de los ficheros, soporte de marcos, formularios, tablas, pantillas de diseño, etc. Cabe destacar que está disponible para diversas plataformas: Windows, Mac OS, y Linux. La versión sobre la cual trabajaremos en este tutorial, es la 0.7.10, traducida al español por el Proyecto Nave. se sentirán cómodos con la interfaz y opciones de KompoZer. Algunas de las herramientas de KompoZer son:

• Administrador de sitios FTP: cualquier sitio que el usuario haya especificado en sus Opciones de Publicación, podrá ser navegado en una barra lateral. También permite filtrar y mostrar archivos o solo documentos HTML o imágenes.
• Nuevos selector de colores: algo más ligado a lo que los usuarios acostumbran a utilizar. Se podrá elegir entre el selector de colores verde, azul y rojo para crear la tonalidad deseada, así como también elegir la saturación de la matiz (hue saturation) y el brillo. En caso de que esto nos resulte incómodo, podremos elegir el color deseado con el mouse.
• Pestañas: una de las herramientas más conocidas de Mozilla esta disponible para KompoZer facilitando el trabajo y brindándole la posibilidad al usuario de realizar acciones de manera más fluida navegando entre pestañas. Se podrá utilizar la herramienta Deshacer y Rehacer independientemente en cada una de las pestañas.

EENTORNONTORNO DEDE TRABAJOTRABAJO

La ventana principal de KompoZer esta formada por varias barras, a continuación una descripción de cada una de ellas.

Barra de titulo:

A la izquierda de esta barra aparece el título de la página web que estamos editando o el nombre del archivo que le hayamos asignado. A la derecha los botones de control de la venta minimizar, maximizar/restaurar y cerrar.

Barra de menús:

Formado por los menús Archivo, Editar, Ver, Insertar, Formato, Tabla, Herramientas, Ayuda. A través de estos menús podemos acceder a todas las opciones del programa.

Barra de Redacción:

Esta barra está formada por botones con las opciones de uso más habitual que se encuentran en la barra de menú. A través de estos botones accedemos más rápidamente. Por ejemplo los botones: N u e v o, A b r ir, G u a r d a r, P u b l i c a r, B u s c a r, I m a g e n , e t c. C a b e d e s t a c a r q u e p o d r e m o s m o d i fi c a r d i c h a b a r r a, p a r a a d a p t a rl a a n u e s t r a s n e c e s i d a d e s.

Barras de Formato:

Con botones que nos permiten acceder a opciones más básicas de formato de texto y párrafos. Estas son similares a las de cualquier procesador de textos. Bajo esta tenemos otra barra con más opciones de formatos y además de otras relacionadas con el formato aplicando estilos y las capas.

Ventana administración sitios web:

Esta barra esta situada a la izquierda y en ella podremos configurar los sitios web, para poder acceder de forma rápida a las distintas páginas web. A través de ella también podremos publicar en Internet Webs y editar directamente las paginas ya publicadas sin necesidad de tenerlas guardadas en nuestro disco local. Ventana de área de edición: Esta es el área principal, en la que podremos diseñar y editar la página web. Es el espacio de trabajo. Cada página que se edite se mostrará en esta área, pudiendo cambiar de una a otra mediante las pestañas que se muestran en la parte superior con el titulo de cada página. También podemos mostrar las reglas en esta área, que nos ayudaran a dimensionar diversos objetos.

BBARRASARRAS^ DEDE^ MENUSMENUS^ (A(AMPLIADAMPLIADA))

V a m o s a v e r l o m a s a f o n d o : Menú Archivo: Constituye la primera opción del menú principal. En ella podemos contemplar opciones como crear, abrir y guardare imprimir archivos. Menú Editar: Las opciones de edición son estándares en casi todas las herramientas; aquí se pueden localizar las opciones para copiar, pegar, deshacer, rehacer, seleccionar, buscar y reemplazar. Y propiedades de publicación del sitio web.

Menú Ver: En esta opción se configuran las barras de herramientas, definiendo qué elementos se desean visualizar en el área de trabajo. También constituye otra vía para desplazarse entre los diversos modos de edición (normal, etiquetas, fuente yvista preliminar), otra opción es la de cambiar el Zoom del escenario. (defecto 100%) Menu Insertar Permite incorporar elementos a la escena, tales como tablas, formularios, imágenes, anclas y enlaces externos. Uno de los puntos primordiales y de gran interés es la inserción de caractéres especiales, los cuales son necesarios dentro de cualquier contenido que requiera un código especial para poder ser visualizado. Los objetos inteligentes de los cuales dispone Kompozer y que pueden ser insertados, no se visualizan en el área de trabajo normal, etiqueta o vista preliminar, sólo hasta que se vea en un explorador se puede tener la seguridad de qué objeto funciona correctamente.

Menú Ayuda En esta opción está el enlace a la ayuda en línea desde el sitio oficial de kompozer-NVU

CCREACIÓNREACIÓN DEDE UNUN SSITIOITIO WWEBEB

KompoZer nos permitirá trabajar directamente sobre el sitio web en Internet, aunque además puede trabajar con archivos en el sistema local. Para mantener organizados todos los archivos, es necesario crear un sitio web. Seleccionar:

• Menú Editar
• Configuración de Publicación O sino desde el panel izquierdo de Administrador de sitios (F9), seleccionamos el botón Editar Sitios. En ambos casos aparecerá la siguiente ventana: A d mini stra ción de s itio s w eb A la izquierda, podemos observar los sitios ya definidos, y a la derecha las propiedades del sitio seleccionado. Para crear un nuevo sitio, primero seleccionamos el botón Nuevo sitio; así, los campos de la derecha se pondrán en blanco para que sean rellenados:  Nombre del sitio: Nombre del sitio que se va a crear. Es un texto que se va a mostrar en la lista de sitios y cuando haya que seleccionarlo. Es muy útil para identificarlo.

CCONFIGURACIÓNONFIGURACIÓN DEDE LALA PÁGINAPÁGINA

Crear una Página Web

• Para crear una página web pulsamos sobre el icono Nuevo en la barra de herramientas de composición. O desde el menú Archivo-> Nuevo Aparecera la siguiente ventana, Podremos seleccionar:
  • un documento en blanco, que bien puede ser un XHTML normal, o un Strict DTD, que es un documento XHTML en el que no soporta etiquetas antiguas y el código debe estar escrito correctamente.
  • Un documento basado en una plantilla.
  • Una plantilla vacia. También, podremos decirle que lo cree en una pestaña, o en una ventana nueva.
• Para abrir una página ya existente ir a: Archivo → Abrir archivo. (Ctrl. + O)
• Para abrir una página abierta recientemente ir a: Archivo → Páginas recientes. Es interesante comentar que mediante la opción abrir dirección web, podremos cargar una web directamente en el programa, observando así su disposición y contenido.

Guardar una Página Web

Podremos guardar un documento de KompoZer en formato HTML o formato sólo texto. En el caso de guardarlo como HTML ( Archivo/ Guardar como... ) preservará el formato del documento, como estilos del texto, imágenes, etc. Si guardamos el documento como sólo texto ( Archivo/ Guardar) y cambiar codificación de caracteres) eliminaremos todas las etiquetas HTML, pero se preservará el texto del documento.

Vista preliminar en el navegador.

Si queremos comprobar cómo quedaría nuestra página web en Internet, podemos reproducirla con el navegador que tengamos instalado. Solo hemos de elegir Archivo/ Visualizar Página en el navegador o pulsar la tecla F.

. Disponemos de dos opciones para establecer los colores de la página:

• Usar Colores predeterminados.
• Usar colores personalizados. Si elegimos usar Colores predeterminados , los textos, enlaces y el color de fondo de fondo de nuestra página se mostraran con los colores configurados en el navegador. Con Usar colores personalizados , podemos definir el color en que se mostrarán los textos, enlaces y fondo de la página.

Si decidimos personalizarlo, como vemos en la imagen, podremos ver una pequeña ventana en modo de muestra para ver el contraste entre los diferentes elementos que hemos configurado. También disponemos de una Edición avanzada: Desde aquí podremos, mediante los atributos y sus respectivos valores, aplicar diferentes configuraciones a , mediante HTML, como estilos incrustados (CSS), y eventos javascripts, que se aplicarán por defecto a los diferentes elementos de nuestra web.