1. INTRODUCCIÓ

1. Què és el KompoZer

El KompoZer (www.kompozer.net) és una eina de edició i creació de pàgines web que combina un sistema de gestió de fitxers amb un editor visual WYSIWIG (What You See Is What You Get) que ens permetrà de forma fàcil crear o editar les nostres pàgines web.

KompoZer és ideal per a usuaris no experts, però que alhora, vulguin crear pàgines web atractives i professionals sense tenir masses coneixements d’HTML o de codificació web.

2. Característiques del KompoZer

El KompoZer es basa en el motor que utilitza el Mozilla (Firefox), és molt ràpid, fiable, està basat en els estàndards i és mantingut a diari per una comunitat de desenvolupadors. El seu suport per a XML, CSS i Javascript ofereix una molt bona solució com a eina d’edició web en el mercat. A més, la seva arquitectura està basada en XUL, el que fa d’aquesta eina una de les més extensibles del mon.

Les seves característiques principals són:

- És un editor WYSIWYG (Tal com es veu a la pantalla del KompoZer és com es veurà al nevegador) el que fa que la creació de webs sigui tan senzill com teclejar text al word.

- Porta integrat un administrador d’arxius via FTP amb el que podrem publicar i editar directament els nostres arxius a internet.

- La creació del codi HTML és molt fiable. Això vol dir que les webs creades amb KompoZer , es veuran tal i com esperem amb els navegadors més populars.

- Existeixen diferents modes d'edició. Això fa que aquesta eina sigui útil tan per a usuaris inexperts que utilitzaran el mode WYSIWYG, com per a usuaris experts que utilitzaran el mode codi HTML.

- Possibilitat de treballar amb múltiples arxius html a l’hora mitjançant l’ús de pestanyes.

- Suport per a formularis, taules i plantilles.

- És una eina compatible amb les plataformes més populars: Linux, Microsoft Windows i Apple Macintosh.

- Podrem editar i modificar arxius CSS per tal de donar estils a la nostra web de forma molt fàcil.

- Amb KompoZer podrem validar directament la nostra pàgina web per a veure si és o no compatible amb els darrers estàndards.

2. INSTAL·LAR I CONFIGURAR KompoZer

1. Instal·lació

Per a començar a treballar el primer que necessitem descarregar i instal·lar el KompoZer.

El primer que haurem de fer es anar a la seva pàgina web http://www.KompoZer.net/ i descarregar-lo fent clic al botó “Download”. Abans però, haurem de seleccionar la nostra versió de la llista de totes les plataformes per a les que s'ha desenvolupat el KompoZer. En el nostre cas seleccionarem la versió per a Microsoft Windows, fent clic sobre el botó gran de “Download KompoZer for Windows”:

Un cop descarregat, descomprimirem el contingut del fitxer zip, i farem doble clic a l’arxiu “kompozer.exe” per a obrir el KompoZer.

Ja tenim instal·lat el KompoZer, i si tot ha anat bé hauríem de veure la pantalla d’inici del KompoZer

Com podem veure, els texts surten en anglès, així que el següent que farem serà canviar l’idioma del KompoZer al castellà, ja que en encara no hi ha una versió oficial en català.

2. Personalitzar el KompoZer

Com hem comentat abans, una de les característiques del KompoZer és que és una eina molt extensible, i de la mateixa manera que el Firefox, ens permet instal·lar diferents extensions.

Les extensions són millores concretes creades per la comunitat de desenvolupadors. Una d’aquestes extensions ens permetrà canviar de forma ràpida l’idioma per defecte del KompoZer.

El que farem a continuació, serà instal·lar una extensió amb el paquet de llenguatge en espanyol per a que puguem treballar amb aquest idioma en lloc de l'anglès.

Per tal d’aconseguir-lo, dins de la web del KompoZer (http://www.KompoZer.net/) farem clic a la pestanya de “Localizations”, on podrem veure els diferents paquets d'idioma disponibles. Escollirem l’idioma que volem, en el nostre cas, Español (es-ES).

Desarem l’arxiu que acabem de descarregar-nos (“kpz-langpack-esES.xpi”) al nostre disc dur. Tornarem al KompoZer i farem clic Tools -> Extensions.

S’obrirà una finestra com aquesta:

Farem clic a “Install” i seleccionarem l’arxiu que acabem de descarregar-nos (“kpz-langpack-esES.xpi”).

Finalment ens demanaran una nova conformitat, farem clic a “Install Now”:

Un cop hem finalitzat la instal·lació de la extensió idiomàtica haurem de reiniciar el KompoZer per tal que faci efecte aquest canvi.

Tornem a obrir-lo i veurem com, ara si, els texts de l’aplicació ja surten en castellà:

El KompoZer ens permet personalitzar molts altres aspectes, com les diferents barres d'eines, colors ... per a més informació sobre aquest tema podeu consultar l'apartat “Personalizar KompoZer” de l'ajuda del programa que trobareu en el menú “Ayuda->Contenido de la Ayuda”

3. Preferències del KompoZer

El KompoZer treballa amb unes preferències per defecte a l’hora de crear les pàgines web. Explicarem com modificar algunes per tal de seguir correctament el nostre exemple.

Obrirem, doncs, el panell de preferències fent clic a “Herramientas” -> “Preferencias”. S’obrirà una finestra i seleccionarem l’opció “Config. Nuevas páginas”:

Canviarem el conjunt de caràcters de ISO-8859-1 a UTF-8, per tal d’assegurar-nos que tots els caràcters que utilitzem a la nostra web es vegin correctament . Farem clic a “Elegir conjunto” i en seleccionarem Unicode (UTF-8):

A continuació, escollirem l’idioma de la nostre pàgina web. Per això, a la casella “Idioma” escriurem “ca” que és el codi internacional per el “català”.

Un cop fet tots aquests canvis haurem de tenir aquesta configuració final:

Seleccionarem ara l’opció “Avanzado” i canviarem el llenguatge de marcat a XHTML 1 estricte , ja que, en el nostre exemple, ens basarem amb les regles del XHTML per tal de crear el nostre arxiu i seguir els darrers estàndards.

Cal tenir en compte que aquestes modificacions només les hem de realitzar el primer cop que obrim el KompoZer, ja que quedaran com a opcions per defecte d' aquí en endavant, evidentment fins que no les tornem a modificar.

Com heu pogut observar, només hem tocat algunes opcions del complert ventall que ens ofereix el KompoZer. Si voleu més informació sobre aquest tema, podeu consultar l'apartat de “Preferencias de Kompozer” de l'ajuda de l'eina.

3. ENTORN DE TREBALL i REFERÈNCIA

3.1 Referència dels menús de KompoZer

A continuació explicarem breument , i més a mode de referència que de guia , totes les possibles opcions de les que disposem als menús de la finestra principal del KompoZer:

3.1.1 “Archivo”

3.1.1.1 “Nuevo”Obre una nova finestra de KompoZer.

3.1.1.2 “Abrir archivo”Mostra un diàleg des del qual seleccionar un arxiu. Amb KompoZer podem veure arxius HTML, plantilles HTML i arxius de text.

3.1.1.3 “Abrir dirección”Mostra un diàleg en el qual escriure la URL d’un document o triar un arxiu local per a ser obert.

3.1.1.4 “Páginas recientes”Mostra la llista dels últims arxius editats.

3.1.1.5 “Cerrar”Tanca la finestra actual.

3.1.1.6 “Cerrar todo”Tanca totes les pestanyes obertes en la finestra actual.

3.1.1.7 “Guardar”Guarda l'arxiu obert en la pestanya activa actual.

3.1.1.8 “Guardar como…”Guarda la pàgina que estem editant actualment podent guardar-la amb un nom diferent.

3.1.1.9 “Guardar y cambiar codificación de caracteres”Possibilitat de canviar el conjunt de caràcters de la pàgina web abans de mostrar el diàleg "Guardar como...".

3.1.1.10 “Publicar“Obre un diàleg per a publicar la pàgina actualment en edició.

3.1.1.11 “Publicar como…”Aquesta opció té el mateix resultat que l’opció "Publicar"

3.1.1.12 “Revertir”Amb aquesta opció podem desfer tots els canvis realitzats al document actual des que aquest es va guardar per última vegada.

3.1.1.13 “Exportar a texto”Exporta els continguts del document actual a text sense format.

3.1.1.14 “Visualizar página en el navegador”Mostra la pàgina actual en el nostre navegador predeterminat.

3.1.1.15 “Configurar página...”Ens permet configurar les diferents opcions d'impressió.

3.1.1.16 “Vista previa”Mostra com serà el document una vegada imprès en paper.

3.1.1.17 “Imprimir...”Mostra el diàleg Imprimir, on podrem seleccionar la impressora, especificar el nombre de còpies, etc.

3.1.1.18 “Salir”Tanca totes les finestres de KompoZer, i surt completament del programa. Si seleccionem aquesta opció amb documents sense guardar, KompoZer li demanarà confirmació a fi d'evitar sortides accidentals.

3.1.2 “Editar”3.1.2.1 “Deshacer”Desfà l'última modificació realitzada en el document actual.

3.1.2.2 “Rehacer”Refà l'última ordre “Deshacer”.

3.1.2.3 “Cortar”Talla el text seleccionat del document i ho guarda en el portapapers. Pera pegar el text posteriorment, utilitzarem l’ordre “Pegar”.

3.1.2.4 “Copiar”Copia el text seleccionat al portapapers. Per a pegar el textposteriorment, utilitzarem l’ordre “Pegar”.

3.1.2.5 “Pegar”Pega el text del portapapers, obtingut usant les ordres “Cortar”“Copiar”, on tinguem el cursor actualment.

3.1.2.6 “Pegar sin formato”Pega el text del portapapers, obtingut usant les ordres “Cortar” o “Copiar”, on tinguem el cursor actualment, com text sense format, per exemple, rebutjant tota informació de format en el text del portapapers.

3.1.2.7 “Eliminar”Esborra el text seleccionat del document actual.

3.1.2.8 “Seleccionar todo”Selecciona tot el text en el document actual.

3.1.2.9 “Buscar y reemplazar...”Mostra un quadre de diàleg on, per una banda introduirem el text quevolem buscar i, per altre, el text per el qual el volem substituir.

3.1.2.10 “Repetir la búsqueda”Busca la següent aparició del text introduït en l’ordre “Buscar yreemplazar...”

3.1.2.11 “Buscar anterior”Busca l'anterior aparició del text introduït en l'ordre “Buscar yreemplazar...”

3.1.2.12 “Revisar ortografía”Obre el corrector ortogràfic a fi de començar la correcció del text de lapàgina actual.

3.1.2.13 “Separar de la plantilla”Separa el document que s'està editant actualment de la plantilla per a serguardat com una pàgina html.

3.1.2.14 “Configuración de sitio de publicación”Obre l'administrador de llocs per a configurar o canviar les opcions dellloc de publicació.

3.1.3 “Ver”3.1.3.1 “Mostrar/Ocultar”

3.1.3.1.1 “Barra de redacción”Activa/desactiva la visibilitat de la barra de redacció, que sol contenir els botons estàndard de redacció (Enllaç intern, Enllaç, Imatge, etc.).

3.1.3.1.2 “Barra de formato”Activa/desactiva la visibilitat de la barra de format, que conté diversos botons de format.

3.1.3.1.3 “Barra de modo de edición”Activa/desactiva la visibilitat de la barra de tipus d'edició. Aquesta barra està en la part inferior de la finestra KompoZer, just damunt de la barra d'estat. Amb ella es pot canviar a diferents vistes com Etiquetes HTML, Codi font, etc.

3.1.3.1.4 “Barra de estado”Activa/desactiva la visibilitat de la barra d'estat situada en la part inferior de la finestra KompoZer.

3.1.3.1.5 “Reglas”Activa/desactiva la visibilitat de les regles horitzontal i vertical.

3.1.3.1.6 “Administrador de sitios web”Activa/desactiva la visibilitat de l'Administrador de llocs en la finestra KompoZer.

3.1.3.2 “Modo de edición normal”Canvia l’estil de l'edició del nostre document al tipus normal.

3.1.3.3 “Etiquetas HTML”Canvia l’estil de l'edició del nostre document al tipus d’etiquetes HTML.

3.1.3.4 “Código fuente HTML”Canvia l’estil de l'edició del nostre document al tipus de codi font HTML.

3.1.3.5 “Vista preliminar”Canvia la visualització de l'edició del nostre document al tipus de vista preliminar.

3.1.3.6 “Retornos de carro”Activa/desactiva la visibilitat dels salts de línea.

3.1.3.7 “Resaltado del bloque”Alterna la visibilitat del límit dels elements de nivell de bloc en la pàgina.

3.1.3.8 “Tamaño del texto”

3.1.3.8.1 “Menor”Fa el text més petit en la pàgina web. També ho podrem fer amb el ratolí prement la tecla Ctrl mentre movem la roda del ratolí o pressionant + o - per a augmentar o reduir la mida del text. Per a restaurar la mida del text per defecte, haurem de fer Ctrl+0 .

3.1.3.8.2 “Mayor”Fa el text més gran en la pàgina web. També pot fer això amb el ratolí prement la tecla Ctrl mentre usa la roda del ratolí o pressionant + o - per a augmentar o reduir la mida del text. Per a restaurar la mida del text per defecte, haurem de fer Ctrl+0.

3.1.3.9 “Codificación de caracteres”Permet canviar manualment la codificació de caràcters de la pàgina web sempre que li vulguem donar una diferent a la establerta per defecte

3.1.4 “Insertar”

3.1.4.1 “Imagen...”Obre una finestra de diàleg per a introduir una imatge en el document en curs.

3.1.4.2 “Tabla...”Obre una finestra de diàleg per a introduir una taula en el document en curs.

3.1.4.3 “Enlace...”Obre una finestra de diàleg per a crear un enllaç. Si escollim aquesta opció havent seleccionat un text en el document en curs, aquest text es convertirà en l'enllaç.

3.1.4.4 “Enlace interno...”Obre una finestra de diàleg per a escriure en ella el nom amb el qual crear un enllaç intern en la posició actual del cursor.

3.1.4.5 “Línea horizontal”Insereix una línia horitzontal en el document en curs.

3.1.4.6 “HTML...”Obre una finestra en la qual inserir manualment codi HTML. També pot usar aquesta opció per a inserir comentaris, scripts, etc.

3.1.4.7 “Caracteres y símbolos...”Obre una finestra de diàleg per a seleccionar i inserir caràcters o símbols especials en el document en curs.

3.1.4.8 “Tabla de contenidos...”Obre una finestra en la qual inserir una taula de continguts en la posició actual del cursor. Es pot escollir si la taula de continguts es construirà a partir d’etiquetes de capçalera 1 a 6 (H1-H6), etiquetes <div> o etiquetes <p>.

3.1.4.9 “Componentes reutilizables”Serveix per a inserir components reaprofitables en el document.

3.1.4.10 “Botón 'Hecho con Nvu'”Insereix un botó 'Hecho con Nvu' en el document.

3.1.4.11 “Calendario”Insereix un objecte de tipus calendari en el document, utilitzant el llenguatge de programació Javascript.

3.1.4.12 “Plantillas”Quan treballem amb plantilles, podem utilitzar aquest menú per a inserir un àrea editable en la nostre plantilla.

3.1.4.13 “Código PHP”

Insereix codi PHP en el nostre document HTML.

3.1.4.14 “Comentario”Insereix un comentari (<-- ... -->) en el document HTML.

3.1.4.15 “Ruptura tras imágenes”Insereix una etiqueta <br clear=all> perquè el text escrit a continuació de la imatge aparegui sota ella.

3.1.5 “Formato”

3.1.5.1 “Tipo de letra”Podrem escollir el tipus de lletra a aplicar al text seleccionat del document.

3.1.5.2 “Tamaño”Al seleccionar “Menor” o “Mayor” podrem canviar la mida del text seleccionat utilitzant etiquetes <small> i <big>, respectivament. Si selecciona “Muy pequeño”, “Pequeño”, “Mediano”, “Grande”, Muy grande” i “Extragrande” canviarem la mida del text seleccionat utilitzant etiquetes <font>.

3.1.5.3 “Estilo del texto”Podrem seleccionar l'estil de text HTML que s'aplicarà al text seleccionat en el document. Les opcions són les següents:

3.1.5.3.1 “Negrita”Fa que el text seleccionat aparegui en negreta.

3.1.5.3.2 “Cursiva”Fa que el text seleccionat aparegui en cursiva.

3.1.5.3.3 “Subrayado”Subratlla el text seleccionat.

3.1.5.3.4 “Tachado”Aplica un efecte de ratllat al text seleccionat.

3.1.5.3.5 “Superíndice”Fa que el text seleccionat aparegui com superíndex.

3.1.5.3.6 “Subíndice”Fa que el text seleccionat aparegui com subíndex.

3.1.5.3.7 “Anchura fija”Fa que el text aparegui amb la mateixa amplada en totes les seves lletres.

3.1.5.3.8 “Sin romper”HTML converteix múltiples espais consecutius en un sol. Per a marcar espais no trencables (és a dir, amb entitats &nbsp;) utilitzarem aquesta opció després de seleccionar els espais en blanc corresponents en el document.

3.1.5.3.9 “Énfasis”Fa que el text aparegui emfatitzat.

3.1.5.3.10 “Más énfasis”Proporciona al text seleccionat un major èmfasi.

3.1.5.3.11 “Cita”Defineix el text seleccionat com text citat.

3.1.5.3.12 “Abreviatura”Indica que el text està en forma abreujada.

3.1.5.3.13 “Acrónimo”Defineix l'inici d'un acrònim.

3.1.5.3.14 “Código”Defineix el text seleccionat com un fragment de codi informàtic (llenguatges de programació, scripts, etc.).

3.1.5.3.15 “Salida de ejemplo”Defineix el text seleccionat com el resultat per pantalla d'un procés informàtic.

3.1.5.3.16 “Variable”Defineix el text seleccionat com una instància de variable en un programa informàtic.

3.1.5.4 “Color del texto...”Obre la finestra de selecció de color per a poder escollir el color del text seleccionat.

3.1.5.5 “Dirección de escritura”Dóna la possibilitat d'escriure el text d'esquerra a dreta o de dreta a esquerra.

3.1.5.6 “Descontinuar estilos de texto”Deixa d'aplicar qualsevol estil de text que estigui actiu en la posició actual del cursor.

3.1.5.7 “Descontinuar enlaces”Tanca un enllaç obert en la posició del cursor, de manera que el següent text escrit no té la consideració d’enllaç.

3.1.5.8 “Elimina enlaces internos”Elimina l'enllaç intern seleccionat.

3.1.5.9 “Párrafo”Permet etiquetar el text (seleccionat o que pertany al mateix bloc que la posició actual del cursor) com paràgraf, capçalera (de nivell 1 a nivell 6), adreça (address), text preformatejat o com a contenidor genèric DIV.

3.1.5.10 “Lista”Inicia una llista amb opcions per a definir el tipus d’aquesta: no numerada, numerada, de terme o de definició. En escollir “Propiedades de la lista” s'obre un quadre de diàleg per a editar manualment les propietats de la llista.

3.1.5.11 “Incrementar sangrado”Incrementa el sagnat del bloc de text seleccionat (o de la llista en la qual es troba el cursor).

3.1.5.12 “Reducir sangrado”Redueix el sagnat del bloc de text seleccionat (o de la llista en la qual es troba el cursor).

3.1.5.13 “Alinear”Permet seleccionar l'alineació del text seleccionat. Pot fer que el text s'alineï al centre, a l'esquerra, a la dreta o a ambdós marges.

3.1.5.14 “Rejilla de posicionamiento”Obre un quadre de diàleg per a establir el nombre de píxels en els quals es podrà desplaçar una capa.

3.1.5.15 “Propiedades avanzadas”Obre l'editor avançat de propietats on pot afegir/editar manualment atributs HTML, estils en línia, o fins i tot codi Javascript.

3.1.5.16 “Colores y fondo de la página...”Obre una finestra per a seleccionar els colors i fons de la pàgina. Podrem seleccionar els colors del text normal, text dels enllaços, i el text d'enllaços actius i visitats. També podrem escollir el color de fons de la nostra pàgina i, opcionalment, escollir una imatge de fons per a la pàgina.

3.1.5.17 “Título y propiedades de la página...”Obre la finestra “Propiedades de la página” on podrem afegir el títol, autor i descripció de la nostra pàgina web. També podrem especificar l'idioma i adreça d'escriptura que utilitzarem en el document en curs. Per a definir aquesta pàgina com plantilla pot marcar la casella "Esta página es una plantilla".

3.1.6 “Tabla”

3.1.6.1 “Insertar”Obre un submenú amb diverses opcions d'edició/creació de taules. Les quals les veurem a continuació.

3.1.6.1.1 “Tabla”Obre una finestra de diàleg que ens permet triar diverses propietats de la taula que s'inserirà en la posició actual del cursor. Podrem escollir la mida de la taula fent clic en la quadrícula de taula que es mostra o indicar explícitament la mida de la taula. També podrem indicar altres propietats de les cel·les de la taula com cellspacing, cellpadding, ...

3.1.6.1.2 “Fila superior”Insereix una fila buida damunt de la fila actualment seleccionada de la taula.

3.1.6.1.3 “Fila inferior”Insereix una fila buida sota la fila actualment seleccionada de la taula.

3.1.6.1.4 “Columna anterior”Insereix una columna buida a l'esquerra de la columna actualment seleccionada de la taula.

3.1.6.1.5 “Columna siguiente”Insereix una columna buida a la dreta de la columna actualment seleccionada de la taula.

3.1.6.1.6 “Celda anterior”Insereix una cel·la buida a l'esquerra de la cel·la actualment seleccionada de la taula.

3.1.6.1.7 “Celda siguiente”Insereix una cel·la buida a la dreta de la cel·la actualment seleccionada de la taula.

3.1.6.2 “Seleccionar”Selecciona, per a la seva edició, diferents components de la taula actualment seleccionada.

3.1.6.2.1 “Tabla”Selecciona la taula completa.

3.1.6.2.2 “Fila”Selecciona la fila en curs.

3.1.6.2.3 “Columna”Selecciona la columna en curs.

3.1.6.2.4 “Todas las celdas”Selecciona totes les cel·les. Això difereix de seleccionar la taula completa que els canvis s'aplicaran individualment a cada cel·la, en lloc de la taula.

3.1.6.3 “Eliminar”Obre un submenú per a esborrar diversos components de la taula.

3.1.6.3.1 “Tabla”Esborra la taula actualment seleccionada. Cal utilitzar-la amb cura, ja que es perdran totes les dades de la taula.

3.1.6.3.2 “Fila(s)”Esborra la fila o files seleccionada(s) de la taula.

3.1.6.3.3 “Columna(s)”Esborra la columna o columnes seleccionada(s) de la taula.

3.1.6.3.4 “Celda(s)”Esborra la cel·la o cel·les seleccionada(s) de la taula.

3.1.6.3.5 “Contenido de la celda”Esborra el contingut de la cel·la seleccionada.

3.1.6.4 “Unir a la celda de la derecha”Ajunta la cel·la activa de la taula amb la cel·la immediatament a la dreta.

3.1.6.5 “Dividir celda”Divideix una cel·la que té un valor colspan superior a 1.

3.1.6.6 “Crear tabla a partir de la selección”Crea una taula a partir del text seleccionat. Es crea una fila per cada paràgraf de text seleccionat. Es pot triar que les separacions de columnes siguin comes (,), espais ( ) o un caràcter definit per l'usuari.

3.1.6.7 “Color de fondo de la tabla o celda...”Obre un quadre de diàleg per a editar el color de fons de la taula o cel·la actives.

3.1.6.8 “Propiedades de la tabla...”Obre la finestra d'edició de propietats de cel·les i taules. Pot canviar totes les propietats de les cel·les i taules completes utilitzant la interfície d'usuari.

3.1.7 “Herramientas”

3.1.7.1 “Limpiador de código”Ens permet netejar el codi seleccionant una sèrie d’opcions per tal de millorar-lo com ara eliminar etiquetes de més, blocs buits,...

3.1.7.2 “Validar HTML”Ens permet validar el nostre document utilitzant el validador HTML del W3C

3.1.7.3 “Editor CSS”Serveix per a obrir CaScadeS, l'editor CSS incorporat al KompoZer per a editar regles d'estil CSS.

3.1.7.4 “Extensiones”Obre l'administrador d'extensions que pot usar-se per a instal·lar extensions o eliminar les extensions ja instal·lades. Les extensions serveixen per a afegir noves i útils característiques a KompoZer.

3.1.7.5 “Temas”Des d’aquesta finestra podrem administrar (instal·lar o desinstal·lar) temes per al KompoZer

3.1.7.6 “Desarrollo Web”Obre diverses eines incloses en KompoZer para els desenvolupadors web.

3.1.7.6.1 “Consola JavaScript”Obre la finestra de la consola Javascript.

3.1.7.6.2 “Consola Java”Obre la finestra de la consola Java.

3.1.7.7 “Preferencias”Obre la finestra Preferències per a canviar les preferències de KompoZer.

3.1.8 “Ayuda”

3.1.8.1 “Contenido de la ayuda”Obre una finestra amb el contingut de l’ajuda del KompoZer

3.1.8.2 “Sitio web de KompoZer”Obre l’adreça web oficial del KompoZer (http://www.KompoZer.net/)

3.1.8.3 “FAQ”Obre les preguntes més freqüents del KompoZer en el nostre navegador que tinguem per defecte.

3.1.8.4 “Informes de fallos y sugerencias”Obre una pàgina amb un informe del codi erroni així com suggeriments del KompoZer.

3.1.8.5 “Comunidad de desarrolladores”Obre el lloc web de la comunitat de desenvolupadors del KompoZer.

3.1.8.6 “Localizing Nvu”Obre el lloc web amb instruccions sobre com ajudar en la traducció del Nvu

3.1.8.7 “Foros”Obre el lloc web amb els fòrums oficials del KompoZer on podrem fer consultes o respondre als dubtes d’altres usuaris del KompoZer.

3.1.8.8 “Consejo del día”Mostra una petita finestra amb un dels varis consells que ens dona el KompoZer quan obrim l’aplicació.

3.1.8.9 “Acerca del KompoZer”Es mostra en una petita finestra informació sobre el KompoZer com ara la versió actual del programa o una llista amb els crèdits.

3.2 Interfície d'usuari

La interfície d’usuari del KompoZer la composen una sèrie de barres d’eines que ens facilitaran la creació dels nostres arxius així com ens donarà informació rellevant del arxiu que estem editant.

3.2.1 Barra de redaccióEn aquesta barra hi trobarem botons per a les operacions que utilitzem més sovint.

Passarem a comentar la funcionalitat de cada botó:

3.2.1.1 “Nuevo”

Serveix per a crear un nou document. Podrem especificar si el volem crear en una nova pestanya o en un nou document. L’obrirem en una nova pestanya si el nou arxiu guarda relació amb els documents que ja tenim oberts.

3.2.1.2 “Abrir”

Mostra un diàleg des del qual seleccionar un arxiu del nostre disc dur. Recordem que els arxius que es podem obrir amb el KompoZer són arxius HTML, plantilles HTML o arxius de text.

3.2.1.3 “Guardar”

Desa l’arxiu que esta seleccionat en aquell moment. Si l’haguéssim de desar per primer cop, primer s’obrirà un diàleg per a inserir el títol de la pàgina i, després, podrem desar l’arxiu amb el nom que vulguem.

3.2.1.4 “Publicar”

Aquest botó serveix per a publicar l’arxiu actual a internet. Per això s’obrirà una finestra amb diferents opcions de configuració de la connexió amb la nostre web per tal de transferir l’arxiu.

3.2.1.5 “Navegar”

Obre la l’arxiu actual en el navegador que tinguem assignat per defecte. Així podrem veure d’una manera ràpida com es visualitzarà la nostre pàgina en el navegador.

3.2.1.6 “Deshacer”

Desfà l’ultima acció.

3.2.1.7 “Rehacer”

Refà l’ultima acció desfeta.

3.2.1.8 “Enlace interno”

Crea un nou enllaç intern en el punt on estigui situat el cursor en aquell moment.

3.2.1.9 “Enlace”

Obre un quadre amb diferents opcions per a crear un enllaç. Aquest es crearà on estigui situat el cursor en aquell moment.

3.2.1.10 “Imagen”

Obre un quadre amb diferents opcions per a crear una imatge. Podrem seleccionar la imatge, especificar les seves dimensions, configurar la seva aparença i especificar, si escau, si volem que sigui enllaçable.

3.2.1.11 “Tabla”

Obre un quadre amb diferents opcions per a crear una taula. Podrem crear-la de manera visual des de la pestanya “Rápido” on seleccionarem el numero de files i columnes que volem directament amb el ratolí (veure imatge)

Podrem especificar manualment el numero de celes i columnes des de la pestanya “Preciso” (veure imatge)

Finalment, la pestanya “Celda” ens permetrà especificar certes propietats de les cel·l es com ara l’espai entre cel·les o alineació horitzontal o vertical.

3.2.1.12 “Formulario”

Fent clic sobre la icona del formulari ens permetrà crear els tags bàsics per a construir un formulari. Si fem clic sobre la petita fletxa negra s’obrirà un submenu on podrem escollir els diferents elements d’un formulari.

3.2.1.13 CaScadeS

Obre una finestra on podrem definir i configurar els estils de la nostra pàgina web.

Més endavant veurem en detall con crear estils a la nostre pagina web.

3.2.2 Barra de format

La barra de format ens permet donar format al text que tenim seleccionat. Així, podrem especificar-li el tipus de lletra, el seu color, ampliar o reduir la mida del text,... Tot i que desaconsellem especificar l’estil d’aquesta manera (els

estils d’un document html han de especificar-se en la seva fulla d’estils css corresponent) cal dir que aquesta barra presenta accions força interessants com ara el desplegable per a seleccionar una classe css:

3.2.3 Barra d’exploració amb pestanyes

Amb KompoZer podem editar múltiples documents de forma simultània gràcies al seu sistema de pestanyes. Cada pestanya equival a un document. Així, per a accedir-hi a un document qualsevol farem clic sobre la pestanya amb el seu nom. Per tancar una pestanya activa farem clic sobre la icona amb la “X” vermella. Com a element informatiu, quan aparegui una icona d’un disquet vermell al costat del nom de la pestanya voldrà dir que els últims canvis realitzats sobre aquell document encara no han estat desats.

3.2.4 Barra de tipus d’edició

Aquesta barra presenta totes les possibles opcions de tipus d’edició del nostre document: “Normal”, “Etiquetas HTML”, “Código fuente”, “Vista preliminar”. Fent clic sobre la pestanya corresponent actualitzarà l’àrea d’edició del document amb el tipus seleccionat. Així, si, per exemple, fem clic sobre la pestanya “Etiquetas HTML” l’aspecte de l’àrea d’edició serà quelcom així:

Fent clic sobre la pestanya “Código fuente” veuríem el codi del nostre document:

Si volem tenir una noció de com es visualitzarà el nostre document en un navegador seleccionarem la pestanya “Vista preliminar”:

3.2.5 Barra d’estatLa barra d’estat ens mostra la jerarquia d’etiquetes html en el que es troba el cursor en aquell moment. D’aquesta manera, si ens trobem amb aquesta barra d’estat:

Hem d’interpretar que el cursor es troba actualment dins de l’etiqueta “<div class=’minWidth’” que a la seva vegada es troba dins l’etiqueta “<div class=’marc’” que a la seva vegada es troba dins l’etiqueta “<body>”.

Fent clic sobre qualsevol etiqueta de la barra d’estat es seleccionarà el text que es troba dins d’aquesta etiqueta.

3.3 Dreceres de teclat

Amb el KompoZer podrem utilitzar dreceres de teclat per tal de realitzar certes tasques de manera molt ràpida, agilitzant d’aquesta manera la creació dels nostres arxius. Per exemple, quan vulguem copiar un tros de text i el tinguem seleccionat, podrem fer-ho accedint a “Editar” -> “Copiar” del menú superior o bé podrem prémer les tecles “Control” i “C”, que realitzaran la mateixa acció.

Per a veure la llista complerta de totes les dreceres de teclat que suporta el KompoZer podrem veure a la secció “Atajos de teclado en KompoZer” de l’Ajuda del KompoZer.

4. Creació de un lloc web

1. Introducció guia

El que farem a continuació serà crear un document web amb el KompoZer. Anirem pas a pas explicant tots els passos a mesura que anem construint un document web d’exemple.

Aquesta guia s’ha pensat per a gent que estigui començant en el disseny de pàgines web, per tant tractarem només les parts més estrictament necessàries per a iniciar-nos amb el KompoZer en disseny i creació de pàgines web.

Així doncs els que estigueu interessats en aprendre XHTML i CSS més a fons us podeu referir a la “Guia de creació de pàgines web” que conté referències més precises sobre el tema.

Per començar veurem la interfície bàsica del KompoZer. Després seguirem amb un apartat molt bàsic sobre format web, explicarem els passos a seguir amb el komposer per tal d’inserir imatges, taules i formularis en el document, per posteriorment veure com donar-li estils mitjançant CSS, i acabarem explicant com publicar la nostra web.

2. Creació pàgina web amb KompoZer1. Interfície d’usuari

A continuació veurem la interfície més bàsica del KompoZer. Per a una referència més extensa sobre la interfície podeu consultar la part de referència de menús.

La barra d’eines del KompoZer consta de les següents barres bàsiques.

Barra de redaccióLa barra de redacció consta de botons per les operacions més utilitzades.

Barra de formatLa barra de format ens permetrà aplicar formats de paràgraf, seleccionar un tipus de lletra, canviar el color de la lletra i de fons, augmentar o disminuir la mida de la lletra, i emfatitzar un bloc de text. També podrem crear llistes ordenades o no ordenades i alinear el text. Per a saber que fa cada botó, simplement haurem de col·locar el ratolí a sobre i ens apareixerà un “tooltip” indicant la funció.

Barra d’exploració amb pestanyesEl KompoZer permet editar alhora múltiples documents utilitzant un sistema de pestanyes, una per a cada document. Per a indicar els documents que s’han

modificat però no s’han guardat, apareix en la pestanya corresponent, una icona amb un “diskette” vermell.

Barra de mode d’edicióLa barra de mode d’edició ens mostra quin és el mode de vista actiu per al document actual. Els modes dels que disposem són “Normal”, “Etiquetas HTML”, Código fuente (HTML) i Vista preliminar. Podem canviar d’un mode a l’altre simplement fent clic a les demés pestanyes.

Barra d’estatLa barra d’estat ens mostra en quin element HTML ens trobem respecte a la jerarquia d’etiquetes HTML. Per a editar les propietat de qualsevol etiqueta només hem de fer clic amb el botó dret a la barra d’estat i seleccionar l’opció desitjada. Fent clic amb el botó esquerre en una etiqueta de la barra d’estat seleccionarem el text que rodeja l’etiqueta.

Per començar crearem un document nou. Això ho podrem fer fent clic al botó “Nuevo” de la barra de redacció o mitjançant el menú de Archivo -> Nuevo, seleccionant “Un documento vacío” i fent clic a “Crear”.

2. Donar format a la pàgines

Un cop creat el document haurem de donar format al contingut d’aquest. Per al nostre exemple agafarem de base el següent text, que utilitzarem per a aprendre les funcions bàsiques de format que disposem al KompoZer.

Copieu el text que hi ha a continuació i enganxeu-lo en el nou document que acabem de crear.

“Modernisme arran de mar

L’estil modernista, que a Catalunya va agafar impuls pels volts del 1900, és el protagonista d’aquesta ruta, que transcorre pels principals centres d’estiueig de la burgesia catalana de l’època.

Aproximació:

Comença la ruta a Blanes i atura’t a admirar l’arquitectura que els indianos van promoure en tornar d’Amèrica, les cases dels estiuejants i les formes singulars d’aquests edificis. En són mostres la Casa del Poble, important centre cultural i polític abans de la Guerra Civil; la Casa Tordera, Can Alemany, la Casa de l'Estrella i Can Panxo Gordo, entre d’altres.

Inici:Surt del nucli urbà per la carretera que ressegueix la costa des del final del passeig Marítim i dóna accés a tres jardins de visita obligada. El primer és el Jardí Botànic Marimurtra, un dels més importants d’Europa, situat entre la Cala de Sant Francesc i Sa Forcanera. Conduint en direcció a Lloret de Mar, a mà dreta i a l’alçada d’un mirador, hi ha el Jardí Pinya de Rosa, amb una impressionant col•lecció de cactus. I finalment, abans d’arribar a Lloret de Mar, hi ha el Jardí de Santa Clotilde, dissenyat per l'arquitecte Nicolau Maria Rubió i Tudurí.

Seguiment de la ruta:Lloret de Mar és un dels principals nuclis turístics de la Costa Brava, amb més de mil anys d’història i nombrosos exponents modernistes. Arquitectes com Enric Monserdà, Bonaventura Conill o Puig i Cadafalch hi van construir edificis d'interès, com el Santuari de la Mare de Déu de Gràcia, l'Església de Sant Romà o la Capella del Santíssim. Visita també el cementiri, que conté monuments interessants com el Panteó de la família Costa Macià.

Pren la carretera GI-682, que s’escola entre revolts sobre algunes de les cales més espectaculars de la Costa Brava fins arribar a Tossa de Mar.

La Vila Vella de Tossa està envoltada d’una de les muralles medievals més significatives de Catalunya. A l’interior hi ha el Museu Municipal, amb obres d’artistes com Marc Chagall, George Kars, André Masson o Oscar Zügel, que van fer estada al poble. El principal element modernista de la població, però, és la Casa Sans, obra de l'arquitecte Antoni de Falguera. Segueix la carretera GI-682, amb impressionants miradors sobre la costa, fins a Sant Feliu de Guíxols.

Aquesta vila, que té en el seu antic monestir un referent cultural, és una de les poblacions amb més patrimoni modernista. Visita el Casino dels Nois i la Casa Patxot, obra de l'arquitecte municipal General Guitart i Lostaló; la seu de “la Caixa” i Can Casas, obra de Rafael Masó; i el Panteó Casas, de Puig i Cadafalch. Segueix la carretera del litoral, que neix prop del port, i arriba a la Platja de Sant Pol, on veuràs diversos edificis modernistes com la Casa Estrada o la Torre de les Punxes.

A l’altre extrem de la mateixa platja s’hi troba una de les zones mítica de la Costa Brava: s’Agaró. En aquesta urbanització ran de mar, l’estil noucentista es fa notar en diversos edificis refinats, però de sobrietat clàssica. Destaquen, en particular, la Senya Blanca i l'Hostal de la Gavina, obra de Rafael Masó i Francesc Folguera.

Sense deixar la carretera de la costa, que passa a ser la C-253, travessa Platja d'Aro, Sant Antoni de Calonge i Palamós fins arribar a la cala de la Fosca, al nord d'aquesta població, on també hi ha algunes cases modernistes.

Ampliació de la ruta:Deixa la costa per la C-31 en direcció a Palafrugell. La població conserva diversos edificis d’interès, com ara la Casa Almeda, la Casa Miquel, el Casino, la Cooperativa La Económica Palafrugellense, el Museu del Suro, la fàbrica Armstrong... Les cales del municipi, situades a escassos quilòmetres del nucli, són de les més característiques de la Costa Brava, com també les que segueixen cap al nord, ja al municipi de Begur. Es tracta de llocs d'estiueig tradicionals en els quals també trobarem algunes cases modernistes.

Des de Palafrugell agafa la C-66 fins a La Bisbal. Entre el patrimoni modernista d’aquesta vila, centre ceramista i nucli comercial de primer ordre, en destaquen l’antic ajuntament i el Cinema Mundial.

Curiositats:El modernisme a Catalunya va ser un moviment important en les arts decoratives i gràfiques pels volts de 1900, però l’arquitectura va ser el camp amb més influència, amb noms tan reconeguts com Antoni Gaudí, Lluís Domènech i Montaner, Josep Puig i Cadafalch o Rafael Masó. Aquest estil rep diversos noms segons els països. És conegut amb el nom d'Art Nouveau a França i Bèlgica, Jugendstil a Alemanya, Sezession a Àustria, Modern Style a Anglaterra i Stile Liberty a Itàlia.

Fitxa tècnica

Ruta en cotxe

Dificultat: mitja. Les carreteres de la costa, especialment la que va de Tossa de Mar a Sant Feliu de Guíxols, és estreta i amb revolts molt pronunciats, però les vistes que hi veuràs valen la pena.

Distància: 75 km, aproximadament.

Duració aproximada: prop de dues hores.

Desnivell: la major part de la ruta transcorre per la costa.

Tipus de ruta: lineal. Transcorre per la Costa Brava de sud a nord, des de la comarca de la Selva fins la capital del Baix Empordà, a l’interior.

Senyalització: no. Et serà molt útil un mapa de carreteres actualitzat.

Època de l’any: tot l’any, però si la fas a la primavera, a la tardor o a l’hivern trobaràs menys gent a les carreteres i als punts d’interès, la majoria centres turístics de primer ordre.

Lloc de sortida: Blanes.

Nens: sí, tot i que cal tenir en compte que hi ha alguns trams de carretera amb revolts on es poden marejar.

Visita obligadaLes cales del Baix EmpordàSes Negres

Enllaços relacionatsPatrimoni i monuments

Allotjament a BlanesHotelsApartaments turísticsCàmpings

Allotjament a PalamósHotelsApartaments turísticsCàmpings”

El primer que farem serà marcar els encapçalaments. Per fer-ho seleccionem el text que desitgem que sigui un encapçalament i farem clic en l’element “Texto del cuerpo” de la llista desplegable que trobem en la barra de format. Seleccionarem “Título 1”, “Título 2”, “Título 3” i així successivament en funció del nivell d’encapçalament que vulguem. Hem de tenir sempre en compte que els encapçalaments han de ser jeràrquics i no ens podem saltar cap nivell. Es a dir que després de un “Título 1”, vindrà sempre un “Título 2”, i després un “Título 3” sempre de forma secuencial.

En el nostre exemple marcarem com a “Título 1” “Modernisme arran de mar”, amb “Título 2” “L’estil modernista, ... de l’època.”, amb “Título 3” “Aproximació:”, “Inici:”, “Seguiment de la ruta:”, “Ampliació de la ruta:”, “Curiositats:” i “Fitxa tècnica:” i finalment com a “Título 4”, els apartats de dins “Fitxa tècnica”, “Ruta en cotxe”, “Visita obligda”, “Enllaços relacionats”, “Visita obligada”, “Enllaços relacionats”, “Allotjament a Blanes”, i ”Allotjament a Palamós”.

Si fem clic sobre “Vista preliminar“ de la barra d'edició hauríem de veure quelcom similar a:

Guardarem el nostre document de forma habitual per evitar perdre cap informació.

Un cop marcats els encapçalaments, marcarem els paràgrafs d’igual forma. Es a dir seleccionarem els paràgrafs sencers en el text i els marcarem com a “párrafo”, seguint el mateix procediment que amb els encapçalaments.

També podem aplicar estils a paraules o frases utilitzant els botons de negreta (B), cursiva (I) o subratllat (U) en la barra de format, tot i que aquesta part és millor que la deixem per la part de fulles d'estils, ja que en principi si seguim els estàndards no és correcte barrejar l'estil amb el marcat del document. Per tant en la part que estem fent ens hauríem d'oblidar de com es visualitza i pensar més si estem definint cada part del contingut com correspon. Per a donar èmfasi a certes paraules o frases del text seria més recomanable utilitzar els botons de “enfatizar” o “gran énfasis” de la barra de format.

Es convenient mirar de tant en quan el codi xhtml que ens esta generant el KompoZer fent clic en “Código fuente” en la barra de mode d'edició.

Si ho fem hauríem de veure alguna cosa semblant al següent.

En el codi podem observar com s'ha marcat el contingut del nostre document amb els encapçalaments i paràgrafs corresponents.

Tot el contingut dels diferents apartats del nostre document són paràgrafs a excepció dels continguts de l’apartat “Fitxa tècnica” en que el contingut seria convenient marcar-lo com a llistes. Anem a veure doncs com ho realitzem.

Per a donar format a un element d'una llista, farem clic dins de la línia de text a la que desitgem aplicar el format. Obrirem el menú “Formato” i seleccionarem l'estil de la llista. “No numerada”, cada element té una vinyeta (punt) al costat.“Numerada”, els elements estan enumerats. “Término y Definición”, per a fer llistes de tipus diccionaris, amb la etiqueta “Término” per a la paraula que defineix y “Definición” per la definició.

NOTA: Es pot donar format de forma ràpida una llista seleccionant un bloc de text i fent clic en els botons “Lista numerada” o “Lista no numerada” de la barra de format.

En principi el KompoZer ens permet modificar l'estil de les llistes però en principi aquesta part l'hauríem de deixar per a les fulles d'estil.

NOTA: Per a marcar de forma correcta el nostre document intentarem ser el màxim de descriptius, marcant cada element amb l’etiqueta que li correspongui, independentment de l’estil. Un títol el marcarem com un encapçalament, el paràgrafs com a paràgrafs …

Per a finalitzar una llista i continuar escrivint text normal, farem clic al final de l'últim element de la llista i pressionarem Enter dues vegades.

Per a canviar un o més dels elements de la llista a text normal seleccionarem l'element o elements de la llista i farem clic en el botó de llista numerada (o, per a una llista no numerada, en el botó de llista no numerada) de la barra de format.

Per a col·locar text a sang sota un element d'una llista farem clic dintre de l'element de la llista per a definir el punt d'inserció. Pressionarem Majus-Enter para crear el sagnat lliure, escriurem el text que volem tenir a sang amb l'element de la llista.

NOTA: es pot incrementar o decrementar el sagnat dels elements de la llista fent clic en qualsevol lloc dintre d'un element de la llista i prement a continuació els botons “Sangrado” o “Desangrado” de la barra d'eines de format. També es pot utilitzar el Tab per augmentar el sagnat en un nivell, i el Majus+Tab per a reduirlo.

Per a ajuntar dues llistes adjacents, seleccionarem les dues llistes que desitjem unir. Ens assegurarem de seleccionar tots els elements d' ambdues llistes. Hem de tenir en compte que qualsevol text existent entre les dues llistes també passarà a formar part de la nova llista. Finalment farem clic sobre el botó de llista numerada o no numerada per a ajuntar les llistes.

En el nostre exemple en concret tindrem dues llistes. Per una banda crearem una llista no ordenada per als elements de “Fitxa tècnica”, en concret: “Ruta en cotxe”, “Visita obligada”, “Enllaços relacionats”, “Allotjament a Blanes”, i “Allotjament a Palamós”. Per d'altra banda crearem una llista de definició per als element de “Ruta en cotxe”.

El resultat que hauríem de obtenir el podem veure en les següents imatges.

Des de la vista prèvia podem veure el format per defecte que s'assigna als dos tipus de llistes.

El codi font d'aquesta part si anem a la vista de “Código fuente” hauria de ser el de la següent imatge.

I si ho veiem en el mode “Etiquetas HTML” hauríem de veure el següent.

Existeixen moltes altres opcions de format en la barra de format o a traves del menú “Formato” de la barra de menús. El millor ara es que provis les diferents opcions d’aquest menú, per aprendre'n els resultats de cada acció. Si t’equivoques no passa res, ja que simplement fent “Ctrl+z” podràs desfer la darrera acció. Per a més informació sobre les diferents opcions consulta l’apartat “donar format a les pàgines web”

3. Afegir gràfics

Des del KompoZer podrem afegir imatges GIF, JPEG, BMP i PNG al nostre document web. Tot i que no es massa recomanable utilitzar BMPs per a documents web.

NOTA: és millor que guardem o publiquem primer la nostra pàgina abans d'inserir-hi cap gràfic, ja que això permetrà que el KompoZer utilitzi automàticament referències relatives als arxius de les imatges quan les inserim.

Anem a veure com ho farem per inserir una imatge.

Primer de tot farem clic en el document per seleccionar el punt on volem inserir la nostra imatge. A continuació farem clic en el el botó “Imagen” de la barra d'eines o obrirem el menú “Insertar > Imagen ...”. Ens apareixerà el quadre de diàleg “Propiedades de la imagen” on haurem d'escriure la ubicació i

nom de l'arxiu de la imatge. També podem fer clic en “Elegir archivo ...” per cercar l'arxiu en el nostre disc dur o xarxa local.

Escriurem un text alternatiu tal com ens indiquen les normes d'accessibilitat, i en cas que sigui necessari farem clic en “Edición avanzada...” per ajustar altres paràmetres.

A continuació en veiem la pantalla.

Una vegada que hàgim inserit una imatge en la pàgina, en podrem editar les seves propietats des de el quadre de diàleg “Propiedades de la imágen”.

Per accedir-hi, podrem fer doble clic en la imatge o seleccionar-la i fer clic en el botó Imatge de la barra d'eines.

L'ús de URLs relatives permet mantenir tots els arxius vinculats en el mateix lloc relatiu a la resta independentment de la ruta en el disc dur o servidor web.

Al desmarcar la opció “La URL es relativa a la dirección de la página” el KompoZer convertirà la URL a una URL completa o absoluta. Normalment s'utilitzen URLs absolutes quan es vinculen imatges en altres servidors web (quan no estan emmagatzemades localment en el disc dur).

Des de la pestanya “Dimensiones” podrem editar la mida de la imatge.

Les opcions que ens dona la pestanya “Apariencia” és convenient que no les modifiquem des d' aquí ja que és millor que ho fem des de les fulles d'estil com veurem més endavant.

En la darrera pestanya “Enlace” podrem especificar si la imatge enllaça a algun element.

Per a acceptar els canvis o modificacions que haguem fet simplement haurem de fer clic en “Aceptar”.

Seguint amb el nostre exemple, introduirem ,de la manera que acabem d'explicar, les 4 imatges següents en el nostre document.

A continuació veiem els diferents quadres de diàleg per a cada imatge que em introduït, i com ens quedaria el codi i la vista preliminar del nostre document un cop introduïdes.

Així és com ens hauria de quedar el document després d'haver inserit les imatges.

El codi font.

I la vista d'etiquetes.

4. Crear enllaços

El KompoZer ens permet crear diferents tipus d'enllaços.

Per exemple per a crear un enllaç dintre de la mateixa pàgina, haurem primer de crear una ancora (adreça objectiu) i, posteriorment, crear un enllaç que apunti a aquesta ancora. Les ancores també es diuen enllaços interns.

Anem a fer un petit menú interior en que les opcions accedeixin als diferents apartats del nostre document.

Per a realitzar el menú intern abans de crear els enllaços, farem una llista no ordenada ,tal i com s'explica en l'apartat de donar format, on cada element serà una opció del nostre menú. En el nostre cas la llista tindria les següents opcions: Aproximació, Inici, Seguiment de la ruta, Ampliació de la ruta, Curiositats, i Fitxa tècnica.

El que volem es que cada una d'aquestes opcions enllaci a el contingut respectiu dins del nostre document.

Un cop tinguem la llista tal i com podem veure en la següent imatge, passarem a realitzar els enllaços interns. Com hem avançat primer haurem de crear les ancores (adreces objectiu) dins del document.

Això ho farem fent clic en el lloc del document on volem incloure l'enllaç intern, o bé seleccionant algun text. En el nostre cas, ho farem dins de cada un dels encapçalaments de “Título 3”. Un cop seleccionat el destí, farem clic en el botó “Enlace interno” o obrirem el menú “Insertar -> Enlace Interno”. Ens apareixerà el quadre de diàleg “Propiedades del enlace interno” i se'ns demanarà un nom per l'ancora que haurà de ser únic dins del document. Si posem espais en blanc aquests es convertiran en guions baixos (_). Farem clic en “Aceptar”, i veurem com apareix una icona d'àncora en el document per a marcar la ubicació de l'enllaç intern tal i com podem veure en la següent imatge.

Un cop tenim les ancores en el document haurem de crear els enllaços en la llista per a que quan fem clic en cada una de les opcions anem a la part del document que correspongui.

Per a crear un enllaç en el qual el lector pugui fer clic i saltar a l'ancora, primer de tot seleccionarem el text o la imatge que volem que enllaci amb l'ancora. En el nostre cas cada un dels elements de la llista. Un cop seleccionat farem clic en el botó “Enlace” o obrirem el menú “Insertar -> Enlace”, ens apareixerà el quadre de diàleg “Propiedades de enlace”.

En el quadre de diàleg seleccionarem de la llista d'àncores disponible en la pàgina la que correspongui amb l'enllaç del nostre menú. En aquest llistat observarem que apareixen les ancores que hem realitzat amb anterioritat.

Un cop fet això, el resultat hauria de ser el següent

Si fem clic en el botó “Navega”, s'obrirà la pàgina en el nostre navegador, i podrem comprovar que si fem clic en cada una de les opcions anem a la part del document que hem especificat.

Aquest és el codi que ens genera.

Per d'altra banda si el que volem és crear un enllaç a un arxiu HTML de l'ordinador, en lloc de seleccionar un destí de la llista d'àncores, haurem de fer clic en la icona de “Elegir archivo ...” per a localitzar-lo i finalment acceptar

NOTA: si no es va crear primer l'enllaç intern, es pot utilitzar el quadre de diàleg Enllaç per a crear enllaços a titulars existents en la pàgina.

Acabem de veure com crear enllaços interns al nostre document i al nostre lloc web. Anem doncs a veure com ho faríem per crear un enllaç a pàgines externes al nostre ordinador.

El procés és bastant similar al que hem vist en el cas anterior. Igual que abans seleccionarem el punt o el text/imatge on volem crear l'enllaç i farem clic en el botó “Enlace”. Un cop dins del quadre de diàleg “Propiedades del enlace”, al que sempre podrem accedir un cop creat l'enllaç fent doble clic en l'enllaç, hi podrem definir l'enllaç amb els següents camps:

“Texto del enlace”: si s'ha seleccionat un arxiu d'imatge o un text abans de fer clic en la icona enllaç, el text o arxiu seleccionat serà introduït aquí. Si no, s'ha d'introduir el text que es desitgi utilitzar com enllaç.

“Ubicación del enlace”: escrigui la ruta local i el nom de l'arxiu o la URL remota a la pàgina que es desitgi enllaçar. Si no s'està segur de la ruta i nom de l'arxiu local, faci clic en la carpeta per a buscar-lo dins del disc dur o de la xarxa. En el cas de URLs remotes es pot copiar la URL des del camp d'ubicació del navegador. Alternativament, es pot seleccionar un enllaç intern o un titular de la pàgina actual en la qual es vol fer l'enllaç.

“La URL es relativa a la ruta de la página”: si està marcada, el KompoZer convertirà la URL a una adreça relativa a la localització de la pàgina. Això és especialment útil si es planeja copiar les pàgines a un servidor web. L'ús de URLs relatives permet mantenir tots els arxius vinculats en el mateix lloc relatiu a la resta independentment de la ruta en el disc dur o servidor web.

NOTA: Per a eliminar un enllaç seleccionarem el text (normalment subratllat i en blau) o la imatge amb enllaç, obrirem el menú “Formato -> Eliminar enlaces”. Per a concloure un enllaç i que el text que s'escrigui després de l'enllaç no estigui inclòs com part d'aquest, farem clic en el punt on volem que acabi l'enllaç, anirem al menú “Formato -> Descontinuar enlace” i resolt.

Per a practicar una mica més amb els enllaços afegirem en el nostre document d'exemple un enllaç a una pàgina externa i un altre que enviï un email a l'adreça especificada.

Copiarem el següent text al final del document, i el marcarem com a “Dirección”, de la mateixa manera que vem marcar el paràgrafs amb anterioritat.

“2008 Patronat de Turisme Costa Brava Gironawww.costabrava.orginfo@costabrava.org“

El nostre objectiu serà que www.costabrava.org enllaci amb l'adreça web “http://www.costabrava.org” i el text info@costabrava.org sigui un enllaç que ens permeti enviar un correu electrònic a la mateixa adreça.

Un cop tinguem el text en el nostre document marcat, seleccionarem www. costabrava.org i farem clic al botó “Enlace” i emplenarem els diferents camps tal i com podem veure en la següent imatge.

Com podem veure hem posat la URL a la que volem que enllaci el text dins de la “Ubicación del enlace”, i en l'apartat “Destino” hem marcat que l'enllaç s'obri en una pàgina nova. Si no ho haguéssim fet així l'enllaç per defecte s'obriria en la mateixa pàgina.

Anem ara a afegir l'enllaç del email. De la mateixa manera seleccionarem el text “info@costabrava.org” i farem clic al botó “Enlace”, però ara en “Ubicación del enlace” posarem l'adreça d'email i marcarem l'opció “Lo anterior es una dirección de correo electrònico”, tal i com observem en la imatge següent.

Si ara fem clic en el botó “Navegar” per a visualitzar la pàgina en el navegador el resultat que hauríem d'obtenir és el següent

On si fem clic a sobre de cada enllaç, en un anem a la web especificada, i en l'altre se'ns obra el client de correu que tinguem predeterminat preparat per enviar un email a l'adreça que hem especificat.

5. Afegir taules

Tenint en compte que les taules només s'han d'utilitzar per a marcar contingut “tabular” i no per a estructurar, organitzar o posicionar altre tipus de contingut, a continuació explicarem les eines que ens dona el KompoZer per a marcar aquest tipus de contingut en el nostre document web. Per aclarir tot plegat, cal dir que el contingut tabular, és informació que té una relació bidimensional. Per exemple:

Nom Edat

Josep Ramón 25

Francesc Calvo 48

Dani Moya 29

Un cop explicat el seu ús correcte, anem a veure com ens ajuda el KompoZer a inserir taules en el nostre document.

Per seguir amb el nostre exemple afegirem al nostre document la típica taula de quilometratge, en la que es veuen les distancies entre les poblacions de la ruta.

El contingut de la taula que volem afegir és el següent:

Blanes Lloret de Mar

Tossa de Mar

Sant Feliu de Guíxols

s’Agaró Platja d'Aro Sant Antoni de Calonge

Palamós Palafrugell Begur La Bisbal

Blanes 0 km 25 km 35 km 45 km 55 km 65 km 75 km 85 km 90 km 100 km 115 km

Lloret de Mar 25 km 0 km 25 km 35 km 45 km 55 km 65 km 75 km 85 km 95 km 100 km

Tossa de Mar 35 km 25 km 0 km 25 km 35 km 45 km 55 km 65 km 75 km 85 km 90 km

Sant Feliu de Guíxols

45 km 35 km 25 km 0 km 25 km 35 km 45 km 55 km 65 km 75 km 80 km

s’Agaró 55 km 45 km 35 km 25 km 0 km 25 km 35 km 45 km 55 km 65 km 75 km

Platja d'Aro 65 km 55 km 45 km 35 km 25 km 0 km 25 km 35 km 45 km 55 km 65 km

Sant Antoni de Calonge

75 km 65 km 55 km 45 km 35 km 25 km 0 km 25 km 35 km 45 km 55 km

Palamós 85 km 75 km 65 km 55 km 45 km 35 km 25 km 0 km 25 km 35 km 45 km

Palafrugell 90 km 85 km 75 km 65 km 55 km 45 km 35 km 25 km 0 km 25 km 35 km

Begur 100 km 90 km 85 km 75 km 65 km 55 km 45 km 35 km 25 km 0 km 25 km

La Bisbal 115 km 100 km 90 km 85 km 75 km 65 km 55 km 45 km 35 km 25 km 0 km

Per afegir una taula al nostre document, de igual forma que alhora d'inserir altres elments, primer de tot hem de fer clic en el punt on volem inserir la taula. Un cop seleccionat el lloc, que en el nostre cas serà entre la secció de “fitxa tècnica” i la informació del “Patronat de turisme”, farem clic en boto “Tabla” de la barra d'eines de redacció. Apareixerà el quadre de diàleg “Insertar tabla”. En el quadre de diàleg haurem d'introduir el nombre de files i columnes que necessitem, que en el nostre cas és de 12x12.

De forma opcional també podrem introduir la mida de l'ample de la taula podent seleccionar un percentatge o pixels. En el nostre exemple no ho especificarem, ho deixarem buit.

Especificarem una vora de 0 píxels per a que no aparegui cap filet al voltant de la nostra taula..

NOTA: El KompoZer utilitza línies puntejades de color vermell per a diferenciar les taules que no disposen de cap filet; aquestes línies desapareixen quan la pàgina es visualitza en el navegador.

Farem clic a “Aceptar” i ja podrem veure la nostra nova taula que haurem d'emplenar amb el contingut. A continuació en veiem el resultat que hauríem d' obtenir.

Per a modificar propietats addicionals de la nova taula, ho farem des del diàleg de “Propiedades de la tabla”, que podrem obrir col·locant-nos a sobre de qualsevol element de la taula i fent clic al botó “Tabla” de la barra d'eines, o bé a traves del menú “Tabla -> Propiedades de la tabla”

El quadre de diàleg “ Propiedades de la tabla” conté dues pestanyes, tal i com podem veure a la imatge anterior: Tabla i Celdas des d' on podrem tocar els paràmetres clàssics d'una taula.

En el nostre cas afegirem un títol a la taula (caption) i li indicarem que el posi “Sobre la Tabla”, i escriurem en l'element caption “Taula de quilometratge”

Per a veure, canviar o afegir propietats a una o més cel·les, seleccionarem la fila, columna, o cel·la, i obrirem el menú “Tabla -> Propiedades de la tabla”. Aquest cop en el quadre de diàleg farem clic en la pestanya de “Celdas”, on podrem editar les propietats de les cel·les.

NOTA: Al igual que en la majoria de quadres de diàleg per a aplicar atributs addicionals o esdeveniments Javascript, faci clic en “Edición avanzada” per a visualitzar l'Editor avançat de propietats. Però en principi per a aquesta guia no hauria de ser necessari.

Per a previsualitzar els canvis sense tancar el quadre de diàleg farem clic a “Aplicar”.

El KompoZer ens permet també afegir i esborrar ràpidament una o més cel·les d'una taula. A més, es poden establir opcions que permetin mantenir l'estructura rectangular original o la disposició de la taula mentre que es realitzen tasques d'edició.

Per a afegir una cel·la, una fila o una columna a la taula farem clic dintre de la taula on desitgi afegir la cel·la (o cel·les), obrirem el menu “Tabla -> Insertar” i escollirem un dels agrupaments de cel·les (també pot inserir una nova taula dintre de la cel·la).

Per a esborrar una cel·la, una fila o una columna, seleccionarem el rang que desitgem eliminar i dins del menú “Tabla” seleccionarem “Eliminar” i el que volem esborrar.

Per a unir (o combinar) una cel·la amb la cel·la de la seva dreta, farem clic dins de la cel·la de l'esquerra, obrirem el menú de “Tabla” i seleccionarem “Unir a la celda de la derecha”, i per unir (o combinar) cel·les adjacents seleccionarem les dos i anirem al menu “Tabla->Unir celdas seleccionadas”

Per a separar en dues o més cel·les una cel·la combinada, farem clic dins la cel·la i seleccionarem del menú “Tabla->Dividir celda”. El contingut de la cel·la original passarà a la primera de les cel·les noves.

Totes aquestes accions les podeu provar en la taula que hem creat en l'exemple i així en veureu més clarament el funcionament. Recordeu que fent Ctrl+z, tornareu a l'estat anterior a la darrera acció.

Si tenim un text i el volem convertir en una taula, el que ens serà molt útil per a no tenir que copiar el contingut de cada cela un a un, ho farem de la següent manera. Primer seleccionarem el text que volem convertir en una taula, obrirem el menú “Tabla->Crear tabla a partir de selección” i ens apareixerà el el quadre de diàleg “Convertir en tabla”. Seleccionarem el caràcter que utilitzarà el KompoZer per separar la selecció en columnes o especificarem un caràcter diferent en funció del text original. Si escollim l'Espai com separador de columnes, haurem de decidir si volem que el KompoZer ignori múltiples espais consecutius i els tracti com si fossin només un o no.

Per a que KompoZer elimini el caràcter separador quan converteixi el text en una taula haurem de deixar marcada l'opció de “Eliminar el caracter separador”. Si no desitja que el KompoZer l'elimini, desmarqui aquesta opció.

Fem acceptar, i vualà ja tenim la taula maquetada amb facilitat.

Podeu provar de fer-ho amb el següent text, i utilitzant el tabulador com a caràcter separador.

Taula de kilometratge Blanes Lloret de Mar Tossa de Mar Sant Feliu de Guíxols s’Agaró Platja d'Aro Sant Antoni de Calonge Palamós Palafrugell Begur La Bisbal

Blanes 0 km 25 km 35 km 45 km 55 km 65 km 75 km 85 km 90 km 100 km 115 km

Lloret de Mar 25 km 0 km 25 km 35 km 45 km 55 km 65 km 75 km 85 km 95 km 100 km

Tossa de Mar 35 km 25 km 0 km 25 km 35 km 45 km 55 km 65 km 75 km 85 km 90 km

Sant Feliu de Guíxols 45 km 35 km 25 km 0 km 25 km 35 km 45 km 55 km 65 km 75 km 80 km

s’Agaró 55 km 45 km 35 km 25 km 0 km 25 km 35 km 45 km 55 km 65 km 75 km

Platja d'Aro 65 km 55 km 45 km 35 km 25 km 0 km 25 km 35 km 45 km 55 km 65 km

Sant Antoni de Calonge 75 km 65 km 55 km 45 km 35 km 25 km 0 km 25 km 35 km 45 km 55 km

Palamós 85 km 75 km 65 km 55 km 45 km 35 km 25 km 0 km 25 km 35 km 45 km

Palafrugell 90 km 85 km 75 km 65 km 55 km 45 km 35 km 25 km 0 km 25 km 35 km

Begur 100 km 90 km 85 km 75 km 65 km 55 km 45 km 35 km 25 km 0 km 25 km

La Bisbal 115 km 100 km 90 km 85 km 75 km 65 km 55 km 45 km 35 km 25 km 0 km

3. Utilitzar fulles d'estil

Abans de començar a explicar les fulles d’estils estructurarem les diferents parts del nostre arxiu amb contenidors genèrics “<divs>”, per a tenir separades les àrees del nostre document i facilitar l'aplicació d'estils.. Dividirem el nostre arxiu amb diferents parts: capçalera, menú, contingut i peu de la pàgina.

Ho farem seleccionant la part de codi que engloba cada una de les parts, per exemple de la capçelera, i posant-ho dins de les etiquetes “<div>” i “</div>”, d’aquesta manera:

<div id="capcelera"><h1>Modernisme arran de mar</h1><h2>L’estil <strong>modernista</strong>, que aCatalunya va agafar impuls pelsvolts del 1900, és el protagonista d’aquesta ruta, que transcorre pelsprincipals centres d’estiueig de la burgesia catalana de l’època.</h2></div>

El KompoZer ens permet fer el mateix, seleccionant la part que volem incloure en una secció, i a continuació seleccionar de la barra de format, l'opció “Contenedor genérico (DIV)” . D'aquesta manera ens posarà tot el que tinguem seleccionat dins d'un <div>. Un cop creat el div li assignarem un atribut id únic per tal d'inteficar el contenidor dins del document.

Un cop estructurada la nostra pàgina la veurem de la següent manera:

Podem observar que les divs ens divideixen el document amb les parts principals.

Un cop estructurat el nostre document en <divs> podrem utilitzar les fulles d’estil en cascada (CSS, Cascade Style Sheet) per a donar-li estil.

Hi ha tres maneres de donar estils a una pàgina:

1. Amb els estils incrustats a la pàgina.2. Amb fulles d’estil internes.3. Amb fulles d’estil externes.

Nosaltres veurem com donar estils a una pàgina amb fulles d’estil externes ja que és la millor manera d’organitzar les nostres pàgines web, així que obviarem les altres dues maneres.

KompoZer disposa d’un editor de fulles d’estil denominat CaScadeS. Ho podem trobar mitjançant la seva icona:

Amb CaScadeS podrem crear les nostres fulles d’estil externes. Per crear una fulla d’estils externa haurem de seguir els següents passos:

1. Obrirem CasScades. Ho podrem fer clicant “Herramientas” -> “Editor CSS”, o prement la tecla “F11”, o bé fent clic sobre la icona de CaScadeS.

2. S’obrirà una nova finestra amb diferents opcions per configurar i crear CSS. Fem clic sobre la icona de la esquerra i escollirem l’opció “Elem. enlace” del submenu desplegable:

Definirem les següents opcions:

URL: És l’adreça on es desarà l’arxiu .css. Especificarem “css/estils.css”. Així Kompozer crearà un arxiu anomenat “estils.css” dins de la carpeta “css”. Ens hem d’assegurar que tenim aquesta carpeta prèviament creada.Lista de medios: Aquí s’especifica per a quin tipus de mitjà serà visualitzada la nostra web. Escriurem “screen”.Titulo: Donarem un nom a la nostre fulla d’estils.

Finalment, farem clic a “Crear hoja de estilos” per a crear el nostre full d’estils.Apareixerà, a la part esquerra, la nostre fulla d’estils que tot just s’acaba de crear:

Ara ja podrem crear regles d’estils associats a aquest document “estils.css”.

Un cop creada la fulla d’estils passarem a definir les regles que contindrà aquesta fulla d’estils. Les regles serveixen per a donar estils a certs elements com, per exemple, a tots els elements “<p>” o a elements que tinguin un id en concret. Ho veurem molt clar en els exemples que explicarem a continuació.

Primer crearem una regla que afecti a tots els elementsde tipus <p>. Per això seleccionarem la icona de la esquerra i, del menú desplegable en seleccionarem “Regla”. A la part de la dreta veurem una serie d’opcions que haurem de configurar. En el menú desplegable seleccionarem l’element “p (Pàrrafo)”. Mantindrem seleccionada l’opció “estilo aplicado a todos los elementos de tipo”. Hauríem de tenir una configuració com la que es veu a la següent imatge:

Fem clic al botó “Crear regla de estilo” i ja podrem donar diferents estils en aquesta regla. Veurem com s’actualitza la part de la esquerra on surt el nom del nostre arxiu css on ara apareix la nova regla “p” creada:

Seleccionem la pestanya de la dreta “Texto” que fa referència a estils aplicats sobre elements de text. Escollirem un tipus de lletra, en el nostre cas “Arial, Helvetica, sans-serif”; una mida de text, en el nostre cas de 12 pixels; i finalment un color, el #333333.

Un cop hem donat estil a tots els elements “<p>” de la nostra pàgina continuarem veient com donar un estil a una única part del nostre arxiu.

En el nostre cas volem donar estil al <div> que hem creat per a estructurar el menu. Novament, farem clic en l’opció “Regla” del menu desplegable de l’esquerra i seleccionarem, de la part dreta, l’opció “*style applied to an element with specified ID attribute” i a la caixa de text escriurem “#menu”. Finalment farem clic a “Crear regla de estilo”.

Un cop creada la nova regla, sortirá tot seguit de la anterior (“p”). La seleccionarem fent clic sobre ella (“#menu”):

A la part de la dreta seleccionarem ara la pestanya “Caja” i, de totes les opcions que n’hi ha, escollirem “Flotar: izquierda” i, a “Márgenes”, escollirem “Derecha: 10px”.

Finalment, farem clic a “Aceptar” i podrem veure els canvis fent clic a l’opció “Vista preliminar”. Si ens fixem, ara la part del menu flota a la esquerra del contingut tal i com ho hem especificat en la nostra regla d’estil.

A partir dels coneixements que hem adquirit donarem estil a tot el document d’exemple que hem anat construint.

La idea és que partiu del codi css que teniu a continuació, hi modifiqueu les regles per tal d'anar veient com els diferents valors que hi assigneu afecten a la visualització del document.

Per tal de tenir una referència bàsica sobre tots els elements i les seves propietats que podem modificar cal agafar com a referència el manual “Introducció a la creació de pàgines web” també disponible a la UOC.

2. Treballar amb plantilles

També podem iniciar un nou document que sigui una plantilla en lloc d’un arxiu html normal. Les plantilles s’utilitzen per a simplificar el mantenintent d’un lloc web, d’aquesta manerà només ens haurem de preocupar del contingut particular de cada pàgina, ja que del disseny generic del lloc web se n’ocuparàn les plantilles.

3.3.1 Crear una nova plantillaPer a crear una plantilla farem clic en “Archivo” -> “Nuevo” del menú superior. Seleccionarem “Plantilla vacía” i finalment farem clic en “Aceptar”.

Amb la plantilla creada, li donarem el format al document que serà comú a totes les pàgines que utilitzaran aquesta plantilla. Un cop tenim maquetada la part comú, especificarem la part del document que contindrà contingut particular. Això ho farem inserint àrees editables a la nostre plantilla.

N’hi han tres tipus d’àrees editables. Les veurem a continuació:

3.3.1.1 Àrea opcional

Quan activem aquesta opció voldrà dir que hi podrem inserir contingut en aquesta àrea o deixar-la buida. Per tal que reconeguem aquesta àrea editable en el nostre document, aquesta apareixerà remarcada amb verd amb una pestanya amb una petita icona d’una “x”.

3.3.1.2 Àrea que pot repetir-seQuan seleccionem una part de la plantilla que pot repetir-se hem de tenir en compte que no podrem editar el seu contingut però sí que el podrem repetir i moure allà on el necessitem. Per tal que reconeguem aquesta àrea que es pot repetir en el nostre document, aquesta apareixerà remarcada amb verd amb una pestanya amb una icona de dos petits quadres. Veiem un exemple.

Quan podrem necessitar tenir un àrea que pot repetir-se? Per exemple, imaginem que tenim una pàgina amb un contingut molt extens que a la seva vegada te diferents parts. És prou comú que al final de cada part hi hagi un enllaç per a tornar a dalt de tot on es troba la capçalera de la web amb el menú, etc... Doncs bé, aquest enllaç de “tornar a dalt” el

voldrem repetir tantes vegades com parts hi tingui el nostre contingut, mantenint la seva mateixa funcionalitat. En aquest cas utilitzarem un àrea que es pot repetir per a disposar d’aquest enllaç tantes vegades com volguéssim.

3.3.1.3 Àrea que es pot moure

Seleccionarem aquesta opció quan volem que un àrea editable sigui, a més, mòbil.

Un cop hem creat les parts editables que necessitem, desarem la plantilla clicant a la icona “Guardar”. Recordem que les plantilles tenen extensió .mzt.

3.3.2 Utilitzar una plantilla ja existentPer a poder utilitzar una plantilla prèviament creada farem clic en “Archivo” -> “Nuevo” del menú superior. De la finestra d’opcions escollirem “un nuevo documento basado en una plantilla” i introduirem el nom de la plantilla.

Finalment, farem clic a crear per a començar a editar el nostre arxiu basat en plantilla.Veurem que només podem editar les parts que prèviament havíem configurat com a editables quan vem crear la plantilla. Podem realitzar diferents opcions segons el tipus d’àrea editable.

3.3.2.1 Accions sobre àrees opcionals

Les àrees opcionals son àrees que podrem editar o bé eliminar. Si volguéssim eliminar-la del nostre document farem clic en la icona (“x”) que hi ha dins de la pestanya verda.

3.3.2.2 Accions sobre àrees que es poden repetir.

En aquests tipus d’àrees la única acció que podem fer es la de repetir-la, ja que no podrem editar-la. Per a duplicar d’aquesta àrea farem clic sobre la icona dels dos petits quadres que trobem al costat de la pestanya verda

3.3.2.3 Accions sobre àrees mòbils

Les àrees mòbils poden ser editades o bé podem moure-les a una altre posició. Per a moure-la, seleccionarem el seu contingut i l’arrossegarem amb el ratolí per deixar-lo allà on ens interessi.

2. Validar i publicar la nostra pàgina web amb el KompoZer

Abans de pujar el document a un servidor web (publicar-lo), és una bona pràctica comprovar abans el format de l'HTML del document amb l'objectiu d'assegurar-se que compleix amb els estàndards web. Els documents que contenen HTML validat són menys propicis a causar problemes en la seva visualització pels diferents navegadors.

Comprovar únicament de manera visual la pàgina web en un navegador no significa que el document es veurà correctament en altres navegadors.

KompoZer utilitza el servei de validació d'HTML de la W3C, que comprova si la sintaxi HTML del document s'ajusta a l'estàndard HTML 4.01. Aquest servei proporciona a més informació sobre com corregir els errors.

NOTA: cal estar connectat a Internet per a utilitzar aquesta característica.

Per a validar la sintaxi del document HTML: Obrirem el menú “Herrramientas” i seleccionarem “Validar HTML”. Si no hem guardat els canvis, el KompoZer ens preguntarà si desitgem fer-ho abans de conducta.KompoZer obrirà una nova finestra amb els resultats del document una vegada que el servei de validació de la W3C hagi examinat el nostre arxiu html.

Una vegada tenim desenvolupada la nostre web arriba el moment de pujar-la a internet per a fer-la pública i que tothom tingui la possibilitat de veure-la. Abans de publicar el nostre arxiu haurem de comprovar que es visualitza correctament en un navegador i que les imatges i altres arxius associats al nostre document els pugui visualitzar o carregar correctament. Per això farem clic sobre la icona “Navegar”:

Un cop comprovat que la pàgina es visualitza i comporta tal i com volem podrem passar a publicar el nostre arxiu. Per això anirem a “Archivo” -> “Publicar”, o bé farem clic en el botó:

Si és el primer cop que volem publicar un arxiu s’obrirà una finestra amb dos pestanyes “Publicar” i “Configuración”. A la pestanya “Configuración” hi surten diferents apartats per tal de configurar la connexió amb el nostre servidor web: donarem nom a la nostre web, afegirem l’adreça del lloc web així com el servidor de publicació i finalment introduirem les nostres dades (nom d’usuari i contrasenya) tal i com ens les demanen.

Després, a la pestanya “Publicar” indicarem el nom del site, el títol de la pàgina i el nom d’arxiu. Podrem també incloure les imatges que hem fet servir en el document html sempre que hi surti marcada la casella de “Incluir imágenes y otros archivos”

Un cop tenim totes les dades correctament introduïdes per a fer la publicació farem clic en el botó “Publicar” i s’obrirà una pàgina que ens mostrarà el progrés de la publicació del arxiu o arxius al lloc web.

Si hi hagués cap error en la transmissió dels arxius al nostre lloc web, apareixerà una finestra com aquesta:

indicant el motiu de l’errada.

Les errades més comuns solen ser:

- Una introducció errònia dels paràmetres de la publicació: Cal repassar que haguem introduït correctament les dades.

- Una introducció errònia dels noms dels arxius: Cal revisar que el nom que hem introduït de l’arxiu a publicar existeix realment i que aquest no porta caràcters no vàlids com ara espais, accents o d’altres d’aquest tipus.

- Perquè no troba els arxius d’imatges o arxius .css associats al document .html.

- No disposem de permisos en el nostre servidor web: Haurem de contactar amb el nostre servidor ISP per tal de demanar-li els permisos necessaris.

Per a gestionar de manera ràpida els arxius que hem pujat al nostre servidor web el KompoZer disposa d’una finestra a la part esquerra anomenada “Administrador de sitios”. Com el seu nom indica, podrem administrar més d’un site web en el cas que estiguéssim desenvolupant vàries webs a l’hora.

Si fem clic sobre la icona “Editar sitios” accedirem a una pantalla de configuració del servidor molt semblant a la que hem vist quan hem fet clic a la icona “Publicar”:

Aquí podrem donar d’alta nous llocs web (part esquerra) així com configurar les seves dades (part dreta)

Si fem clic en la icona recarregarem la llista d’arxius que hi ha actualment al servidor. Aquesta acció és útil un cop hem pujat nous arxius al nostre servidor web ja que, per defecte, la llista no s’actualitza automàticament.

Fent clic en la icona crearem una nova carpeta al servidor web per a desar-hi arxius de qualsevol tipus.

Aquesta icona ens permet canviar els noms dels arxius o carpetes del nostre lloc web.

Podrem també eliminar arxius o carpetes amb la icona .

Un cop els nostres arxius estiguin pujats de forma correcta al servidor web només caldrà escriure l’adreça en un navegador i gaudir de la nostre web online.

Fins aquí hem après a realitzar una web molt senzilla, amb imatges, enllaços, texts, separant el contingut del estil, ... Però les possibilitats en quan a creació web son il·limitades, això han sigut només els primers passos.