curso de kompozer - cdm informática

8/17/2019 Curso de Kompozer - CDM Informática

1/27

[DISEÑO WEB – KOMPOZER ] :: CDM Informática ::

Esteban Maidana 1

C U R S O D E D I S E Ñ O W E B

K O M P O Z E R

KompoZer es un editor HTML WYSIWYG de fuente abierta basado en el, ahora

descontinuado, editor Nvu. KompoZer es mantenido por la misma comunidad de usuarios quebifurcó el proyecto, y es un proyecto en Sourceforge.

Están disponibles versiones para GNU/Linux, Windows, MacOSX y OS/2. En marzo de2007 fue comentado en Download.com, que lo consideró una de las mejores alternativas libresa Adobe Dreamweaver, y lo comparó favorablemente con dicho aplicativo propietario.

Las capacidades WYSIWYG de KompoZer son una de las principales atracciones delsoftware. Adicionalmente, KompoZer permite la edición directa de código así como una opiniónde vista dividida de código y gráfico.

H T M L b á s i c o

Las páginas que vemos en Internet están escritas utilizando el lenguaje HTML (HyperText Markup Language). Este lenguaje está basado en etiquetas que marcan el inicio y fin decada elemento de la página Web.

Por ejemplo, el título de la página Web se escribe entre las etiquetas y. Como vemos, ambas etiquetas consisten en poner un mismo comando entre lossímbolos "". La primera etiqueta indica inicio, y la segunda, que incluye el símbolo "/",indica final.

Las etiquetas disponen de atributos que permiten definir características del elementosobre el que actúan. Por ejemplo, indica que la tabla tendrá un borde detipo 1.

Una página HTML básica tendría el siguiente aspecto:

Mi primera página web

haz clic aquí para ir a CDM

Contenido adicional de la página web

Las etiquetas que se introducen en un documento HTML no son visibles cuando eldocumento se muestra en un navegador (Internet Explorer, Firefox, etc). Cuando un usuariodesde Internet solicita ver una página el servidor Web envía la página al navegador y esteinterpreta las etiquetas para dar el formato a la página.

Cuando utilizamos KompoZer para crear una página Web no tenemos que preocuparnosde todo esto. KompoZer inserta automáticamente las etiquetas necesarias para construir lapágina con la apariencia y contenido definidos en el editor gráfico.


2/27


Esteban Maidana 2

Editar páginas web

Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear losdocumentos con la extensión HTML o HTM, e incluir como contenido del documento el códigoHTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo.

Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizandoun editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de loselementos de la página, al mismo tiempo que es más complicado crear una aparienciaprofesional para la página.

L a p a n t a l l a i n i c i a l d e K O M P O Z E R

Al arrancar KompoZer aparece una pantalla inicial como ésta, vamos a ver suscomponentes fundamentales. Así conoceremos los nombres de los diferentes elementos y serámás fácil entender el resto del curso. La pantalla que se muestra a continuación (y en generaltodas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya

que cada usuario puede decidir qué elementos quiere que se vean en cada momento, comoveremos más adelante.

En ésta pantalla inicial podemos resaltar trés componentes principales; el área de trabajodonde se diseñarán las páginas web, la lista de archivos del sitio en donde se mostrará laestructura de archivos y carpetas que componen un sitio local y la barra de herramientasdonde están disponibles los botones para las acciones más comunes.

El primer paso a realizar para antes de empezar cualquier proyecto debe ser crear unsitio local. Para eso hacemos clic en el botón indicado en la imagen siguiente.


3/27


4/27


Esteban Maidana 4

H i p e r e n l a c e s

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsadolleva de una página o archivo a otra página o archivo.

Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.

Tipos de enlaces

Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.

• Referencia absoluta: Conduce al sitio en el que se encuentra el documento utilizandola ruta completa del archivo. La ubicación en Internet, por ejemplo,http://www.cdminformatica.edu.py, o http://www.misitio.com/pagina/pagina1.html.

• Referencia relativa al documento: Conduce a un documento situado dentro delmismo sitio que el documento actual, pero partiendo del directorio en el que seencuentra el documento actual.

• Puntos de fijación (ancla o encale interno): Conduce a un punto dentro de undocumento, ya sea dentro del actual o de otro diferente. Para ello el vínculo debe ser

nombre_de_documento.extension#ancla. El punto se define dentro de un documento através del menú Insertar, opción Anclaje con nombre.

C a p a s

Una capa es un área rectangular, una parte de la página, que tiene un comportamientomuy independiente dentro de la ventana del navegador, ya que la podemos colocar encualquier parte de la misma y la podremos mover por ella independientemente. En el uso decapas se basan muchos de los efectos más comunes del DHTML.

Dichas capas pueden ocultarse y solaparse entre sí, lo que proporciona grandes

posibilidades de diseño.

Las capas pueden moverse de una posición a otra de la ventana pulsando sobre elrecuadro blanco, y sin soltar el ratón, arrastrándola hacia la nueva posición.

También pueden ser redimensionadas pulsando sobre los recuadros negros, yarrastrándolos hasta conseguir el tamaño deseado.

Dentro del recuadro de la capa es posible insertar texto, tablas, imágenes, animacionesflash, y todos los elementos que puede contener un documento HTML.

Este icono sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se eliminatambién la capa.


5/27


Esteban Maidana 5

E l D O C T Y P E D T D - D o c u m e n t T y p e D e c l a r a t i o n )

Es una declaración para hacer que el navegador, entienda qué es lo que va a recibir, ycómo deberá procesarlo.

De esta manera, la misma página, con distintos doctype, o peor aún, sin él, se verá dedistinta manera, incluso en el mismo navegador.

Por ello, es necesario elegir adecuadamente un doctype, y seguirlo.

¿Qué pasa si no ponemos doctype?

Pues que tenemos el "desastre" casi garantizado. El navegador entrará en "QuircksMode", yhará su "interpretación particular" de nuestra WEB, de manera que muy raramente coincidiráel resultado de los demás navegadores.

¿Cómo declaro el DOCTYPE?

Añadiendo una sencilla primera línea a nuestra página WEB:

Doctypes para XHTML 1.0

Las DTD XHTML son las más utilizadas actualmente y se dividen en tres tipos: Strict,Transitional y Frameset.

El XHTML Strict DTD es la más estricta de las DTD disponibles: no soporta etiquetasantiguas y el código debe estar escrito correctamente:

El XHTML Transitional DTD es como XHTML Strict DTD, pero las etiquetas en desusoestán permitidas. Actualmente ésta es la DTD más popular.

El XHTML Frameset DTD es la única DTD XHTML que soporta Frameset.


6/27


Esteban Maidana 6

H o j a s d e e s t i l o en c a s c a da C a s c a d i n g S t y l e S h e e t s , C S S )

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formalusado para definir la presentación de un documento estructurado escrito en HTML o XML (y porextensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular laespecificación de las hojas de estilo que servirán de estándar para los navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de undocumento de su presentación.

La información de estilo puede ser adjuntada tanto como un documento separado o en elmismo documento HTML. En este último caso podrían definirse estilos generales en la cabeceradel documento o en cada etiqueta particular mediante el atributo "style".

Formas de aplicar estilos CSS

CSS proporciona tres caminos diferentes para aplicar las reglas de estilo a una páginaWeb:

Una hoja de estilo externa, que es una hoja de estilo que está almacenada en unarchivo diferente al archivo donde se almacena el código HTML de la página Web. Esta esla manera de programar más potente, porque separa completamente las reglas deformateo para la página HTML de la estructura básica de la página.

Una hoja de estilo interna, que es una hoja de estilo que está incrustada dentro de undocumento HTML. (Va a la derecha dentro del elemento ). De esta manera seobtiene el beneficio de separar la información del estilo, del código HTML propiamentedicho. Se puede optar por copiar la hoja de estilo incrustada de una página a otra, (estaposibilidad es difícil de ejecutar si se desea para guardar las copias sincronizadas). Engeneral, la única vez que se usa una hoja de estilo interna, es cuando se quiereproporcionar alguna característica a una página Web en un simple fichero, por ejemplo,si se está enviando algo a la página web.

Un estilo en línea, que es un método para insertar el lenguaje de estilo de página,directamente, dentro de una etiqueta HTML. Esta manera de proceder no esexcesivamente adecuada. El incrustar la descripción del formateo dentro del documentode la página Web, a nivel de código se convierte en una tarea larga, tediosa y pocoelegante de resolver el problema de la programación de la página. Este modo de trabajose podría usar de manera ocasional si se pretende aplicar un formateo con prisa, alvuelo. No es todo lo claro, o estructurado, que debería ser, pero funciona.

Ventajas de usar las hojas de estilo

Control centralizado de la presentación de un sitio web completo con lo que se agiliza deforma considerable la actualización del mismo.

Los Navegadores permiten a los usuarios especificar su propia hoja de estilo local queserá aplicada a un sitio web, con lo que aumenta considerablemente la accesibilidad. Porejemplo, personas con deficiencias visuales pueden configurar su propia hoja de estilo paraaumentar el tamaño del texto o remarcar más los enlaces.

Una página puede disponer de diferentes hojas de estilo según el dispositivo que lamuestre o incluso a elección del usuario. Por ejemplo, para ser impresa, mostrada en undispositivo móvil, o ser "leída" por un sintetizador de voz.

El documento HTML en sí mismo es más claro de entender y se consigue reducirconsiderablemente su tamaño (siempre y cuando no se utilice estilo en línea).


7/27


Esteban Maidana 7

D i s e ñ a n d o n u e s t r o S i t i o W e b

Antes empezar a trabajar en nuestro nuevo proyecto (sitio web) debemos crear un “SitioLocal” el cual permitirá desarrollar correctamente el sitio web.

Una vez que tengamos abierta la aplicación “KompoZer” veremos la pantalla debienvenida desde el cual se pueden acceder de forma rápida a varias funciones; una de ella esla opción de crear un “Sitio Local”.

En la pantalla que aparece debemos seleccionar la pestaña “Avanzada” y configuramos tresdatos muy importantes: Nombre del sitio, Carpeta raíz local y carpeta predeterminada deimágenes:


8/27


Esteban Maidana 8

Creamos nuestra página principal (index.html) incluyendo el Doctype para xhtml 1.0stric. Modificamos las propiedades de la página haciendo clic sobre el ícono CSS ubicado en labarra de herramientas.

Cuando accedemos al editor CSS de un documento que aún no fue guardado, KompoZernos pedirá el título para el documento y posteriormente el nombre y ubicación del archivo

html.

Finalmente accedemos al panel de CSS, crearemos un nuevo estilo CSS. Comomodificaremos las propiedades de una etiqueta “” seleccionamos el selector de tipo(etiqueta); luego escribimos la etiqueta del elemento destino del nuevo estilo (body);descpues hacemos clic en el botón “Crear regla de estilo”.


9/27


Esteban Maidana 9

Primeramente definimos las propiedades referentes al texto; para ello accedemos a laficha “Texto” y modificamos las propiedades según lo indica la siguiente imagen:

Posteriormente accedemos a la ficha “Fondo” estableciendo las propiedades indicadas enla siguiente imagen:

A continuación pasamos a la ficha “Caja” donde estableceremos los márgenes de lapágina. Para el sitio “Instrumentos Musicales” utilizaremos marge 0 (cero), escribiendo “0px”en los cuadros de texto correspondientes.


10/27


Esteban Maidana 10

Hacemos clic sobre el botón “Aceptar” para cerrar el editor CSS observando el aspecto dela página que debería ser similar al siguiente:

Luego insertamos una capa (etiqueta div) principal con el id “contenedor” que justamente contendrá a toda la pagina. Accedemos al menú “Insertar, HTML…”:


11/27


Esteban Maidana 11

En el cuadro siguiente, escribimos la etiqueta HTML que queremos insertar. En este caso “texto cualquiera”, luego presionamos el botón “Insertar”.

Una vez que tengamos la capa “contenedor” le asignamos un identificador a fin de crearuna regla CSS que defina su apariencia. Hacemos doble clic en el interior de la capa o en laetiqueta HTML de la capa en la barra de estado:


12/27


Esteban Maidana 12

Creamos una nueva regla CSS, seleccionando el selector “Estilo aplicado a un elementocon el atributo ID especificado” y escribiendo “#contenedor” en el cuadro de texto:

Modificamos las siguientes propiedades para la regla CSS que acabamos de crear,específicamente en la ficha “Fondo” y “Caja”:

Cuando asiganamos márgenes “auto” a la derecha e izquierda de un elemento, loestamos centrando.

Al aplicar las reglas CSS para la capa “contenedor” tendremos un aspecto similar a lasiguiente imagen:

Posicionamos el cursor del a la derecha del texto “texto cualquiera”, hacemos clic einsertamos unos 10 saltos de línea (Enter) con lo que lograremos el siguiente aspecto:


13/27


Esteban Maidana 13

Dentro de la capa “contenedor” insertamos una nueva capa cuyo ID será “logo”. Luegocreamos una nueva regla para esa capa:

Creamos una nueva regla CSS para la capa logo configurando las propiedades mostradasen la siguiente imagen:


14/27


Esteban Maidana 14

Eliminamos los textos auxiliares de las capas “contenedor” y “logo” cuidando de noeliminar las capas propiamente.

Insertamos la imagen llamada “logo.gif” dentro de la capa “logo” con lo cual tendremosel siguiente resultado:

Justo debajo de la capa “logo” insertamos una nueva capa llamada “sub_contenedor” yluego creamos una nueva regla CSS para esa capa:


15/27


Esteban Maidana 15

Definimos las reglas CSS para la capa “sub_contenedor” teniendo como referencia lassiguientes imágenes:

Posteriormente insertamos unos saltos de línea dentro de la capa “sub_contenedor” con

lo que deberíamos ver algo similar a la siguiente imagen:


16/27


Esteban Maidana 16

Dentro de la capa “sub_contenedor ” insertamos una nueva capa que contendrá lasesquinas redondeadas, el ID de la capa será “contenido”. Luego creamos una nueva regla CSSpara esa capa. Los detalles se muestran en las siguientes imágenes:

Dentro de la capa “contenido” insertamos una tabla con 1 fila y 4 columnas, no tendrá unancho específico, borde 1, relleno de celda 4 y espacio entre celdas 4. Dicha tabla será elmenú principal del sitio web.


17/27


Esteban Maidana 17

Una vez que tengamos la tabla, escribimos los textos: “Inicio”, “Nosotros”, “Productos” y “Contacto” en cada una de las celdas. Además, asignamos las siguientes características atodas las celdas de la tabla recién creada:

También establecemos las siguientes propiedades a la tabla asignándole el ID “menu”haciendo clic sobre el botón “Edición avanzada”:

Creamos una regla CSS para la tabla del menú configurando el margen izquierdo a 25px.


18/27


Esteban Maidana 18

Justo debajo de la tabla del menú principal insertamos una nueva capa cuyo ID será “tablas” y que contendrá al contenido variante de la página.

También creamos una nueva regla CSS para esa capa. Asignándole las propiedades

detalladas en la siguiente imagen:

Eliminamos los saltos de línea que sobran dentro de la capa “contenido”, debajo de lacapa “tablas”:


19/27


Esteban Maidana 19

Procedemos a crear una nueva capa, justo debajo de la capa “contenido”, dentro de lacapa “sub_contenedor”. El ID de dicha capa será “pie”:

Creamos una nueva regla CSS para la capa “pie” y le asignamos las siguientescaracterísticas (fichas “Fondo” y “Caja”):


20/27


Esteban Maidana 20

Luego insertamos la imagen “logo_pie.gif” dentro de la capa “pie” y eliminamos el textoauxiliar “pie”:

Tras esa configuración y luego de eliminar los saltos de línea sobrantes, obtendremos elsiguiente resultado:


21/27


Esteban Maidana 21

A partir de ahora insertamos las tablas correspondientes dentro de la capa “tablas”siguiendo el modelo propuesto.


22/27


Esteban Maidana 22

F o r m u l a r i o s

Los formularios son una característica del estándar HTML que permite a los autores (SitioWeb) colectar información provista por los visitantes. Estos formularios pueden ser útiles pararecolectar información personal, información de contacto, preferencias u opiniones, o cualquiertipo de entrada por parte del visitante que el autor pueda necesitar.

Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menúsdesplegables, y botones.

Para insertar un formulario nos dirigimos a la barra de herramientas, ficha formularios yluego presionamos el botón:

E l e m e n t o s d e u n f o r m u l a r i o

Los elementos de formulario pueden insertarse en una página a través del menú

Insertar, Formulario. También se pueden insertar desde la barra de herramientas:

A través de estas opciones se pueden acceder a la lista de todos los objetos deformulario que pueden ser insertados en la página.

Veamos uno por uno algunos de los distintos elementos que pueden formar parte de unformulario, así como algunas de sus propiedades.

Campo de texto y Área de texto

Permiten introducir texto. El Campo de texto solo permite al usuario escribir una línea,mientras que el Área de texto permite escribir varias.

También es posible definirlo como Contraseña, similar al campo de texto, pero loscaracteres que se van escribiendo se sustituyen por un carácter como podrás ver en la imagensiguiente:

Campo de Texto Área de Texto Contraseña


23/27


Esteban Maidana 23

Insertando un campo de texto: Insertando un área de texto:

Insertando un campo contraseña:

Botón

Es el botón tradicional de Windows. El botón puede tener ser de tres tipos: Enviar, Restablecer(borrar todos los campos del formulario), o Botón (para poder asignarle un comportamientodiferente de los dos anteriores).


24/27


Esteban Maidana 24

Casilla de verificación

Es un cuadro pequeño que se puede activar o desactivar. Puede asignársele el Estado inicialcomo Activado o como Desactivado.

Casilla de Ejemplo

Botón de opción

Son pequeños botones redondeados que pueden activarse o desactivarse. Si hay variosdel mismo grupo, sólo puede haber uno activado. Cuando se activa uno, automáticamente sedesactivan los demás.

Importante: antes de insertar cualquier control de formulario, se debe insertar el formulariopropiamente dicho, de lo contrario, obtendremos resultados erróneos.


25/27


Esteban Maidana 25

P u b l i c a n d o n u e s t r o s i t i o w e b

Una vez finalizado el diseño de nuestro sitio web, el siguiente paso sería publicarlo eninternet (nada impide publicarlo antes de finalizarlo).

Para publicar nuestro sitio utilizamos programas llamados “Cliente FTP”, existe una granvariedad de Software libre y Propietario que cumplen con esa función.

Utilizaremos el aplicativo llamado “FileZilla”. FileZilla tiene una interfaz amigable eintuitiva y está disponible en varios idiomas, entre ellas el español.

Primeramente bajamos el instalador desde http://filezilla-project.org/, luego loinstalamos e iniciamos el programa. Veremos una ventana similar a la siguiente:

Para publicar nuestro sitio en internet necesitamos tres elementos esenciales: el sitioweb propiamente dicho, un dominio (opcional en el sentido de que los servidores de hostinggratuito ya ofrecen un subdominio o una URL para nuestra cuenta) y finalmente un servidor dehosting (puede ser de pago o gratuito).

Una vez que tengamos los tres elementos citados arriba, necesitamos algunos datos delservidor de hosting, de manera que podamos realizar la conexión y transferir los archivos.

• Host (Dirección IP o nombre del servidor): sirve para identificar a que servidor queremosconectarnos y transferir los archivos.

• Usuario: usuario para el acceso en el servidor.• Contraseña: clave para acceso al servidor.• Puerto: canal a través del cual se realizará la conexión, generalmente es el puerto 21,

pero es probable que algunas empresas de hosting utilicen otro puerto.


26/27


Esteban Maidana 26

Todas las informaciones citadas nos la debe indicar nuestro proveedor de hosting(alojamiento web).

Para conectarnos al servidor FTP, escribimos los datos en los campos indicados en lasiguiente imagen:

Luego, hacemos clic sobre el botón conexión rápida. Inmediatamente comenzará elproceso de conexión con el servidor, y cada paso aparecerá en el log de acceso ubicado justodebajo:

Al estar conectados al servidor, tendríamos que ver una pantalla similar a la siguiente:

La pantalla se divide en dos zonas principales: “Sitio Local” (a la izquierda) y “SitioRemoto” a la derecha de la pantalla. El Sitio Local es nuestra PC y el Sitio Remoto corresponde

al servidor Web.

Tanto para el sitio local como remoto, tenemos disponible la estructura de directoriossimilar al navegador de carpetas del explorador de Windows.

Finalmente tenemos el listado de archivos y carpetas del directorio actual tanto para elsitio local como para el sitio remoto.

La carpeta raíz del sitio remoto siempre se denomina “public_html” o “www”; estodepende del servidor en particular, pero generalmente, la carpeta www es nada más que unacceso directo a la carpeta public_html.

Es en la carpeta public_html donde debemos subir nuestro sitio web, respetando la

estructura de directorios del sitio local, es decir, si en el sitio local tenemos una carpeta “imagenes", en el sitio remoto también debemos tener una carpeta con el mismo nombre.


27/27


En la lista de archivos del sitio local, seleccionamos los archivos y carpetas que deseamossubir al servidor (generalmente todos, excepto la carpeta recursos). Una vez que tengamosseleccionados los elementos, hacemos clic derecho sobre cualquiera de los elementosseleccionados y elegimos la opción subir. Tras esto, el cliente FTP (FileZilla) automáticamentecomenzará a transferir los archivos desde el sitio local hasta el sitio remoto.

Si entre los elementos seleccionados se encuentra alguna carpeta, no es necesariocrearla en el sitio remoto, ya que el cliente FTP lo hace de forma automática.

Si ocurre que ya tenemos un archivo con el mismo nombre en el servidor, el cliente FTPnos preguntará si deseamos reemplazar (actualizar) el archivo o carpeta.

Después de finalizado el proceso, debemos observar la misma estructura de directorios yarchivos, tanto para el sitio local (izquierda) como para el sitio remoto (derecha).

Servidor de Prueba

Con la finalidad de fijar el proceso de publicación de la página, se tiene disponible unservidor de prueba cuyos datos son los siguientes:

Servidor FTP : ftp.poravohosting.com

Usuario : [email protected]

Contraseña : A2fFiwE1SH

Puerto : 21

Una vez conectados, debemos crear una carpeta en el sitio remoto (clic derecho, crear

directorio), para que publiquemos dentro de ella nuestros archivos y carpetas. Esto esnecesario debido a que la cuenta es de uso público para todos los alumnos.

Una vez que publiquemos nuestro sitio web, lo tendremos disponible enhttp://www.poravohosting.com/cdm/carpeta, en donde “carpeta” es la carpeta que crearon enel paso anterior (preferentemente una carpeta con sus nombre, sin espacios, sin caracteresespeciales, sin tildes y todo en minúscula).

curso de kompozer - cdm informática

Documents