Kompezer
- 1. UNIDAD III KOMPOZER ¿QuéesKompoZer? KompoZer esun editor depáginaswebWYSIWYG(Whatyouseeiswhatyouget-Lo que ves eslo que recibes).Esunderivado de NVU,es decir,una versión no oficial de NVU,elcual ha reparadociertoserrores(bugs) que este presentaba.Komposerestá basado enMozillaComposerpero con ejecución independiente.Su objetivo es facilitarel desarrollo de páginasweb,gracias a lasdistintas formas de visualización disponibles en su interfazcomo:código fuente,ventanaWYSIWYG,visióncontagsdeHTMLrealzados) Presenta características como el soporteintegradode CSS ymejor gestióndel soporte FTPpara actualización de los ficheros,soportede marcos,formularios,tablas,pantillas de diseño,etc.Cabe destacarque estádisponible para diversas plataformas: Windows,Mac OS,y Linux.Laversiónsobre la cualtrabajaremos en este tutorial,es la 0.7.10,traducida alespañol por el ProyectoNave. se sentirán cómodosconla interfaz yopciones de KompoZer. Algunasdelas herramientas de KompoZerson: • Administradorde sitiosFTP: cualquiersitio que elusuariohayaespecificadoen sus OpcionesdePublicación,podrá ser navegado enuna barra lateral.También permitefiltrar y mostrar archivoso solo documentos HTMLo imágenes. • Nuevosselector de colores:algo más ligadoa lo que losusuariosacostumbran a utilizar.Se podráelegirentre el selectordecolores verde,azul yrojo paracrearla tonalidaddeseada,asícomo tambiénelegir la saturación de la matiz (huesaturation)y el brillo.En caso deque esto nos resulteincómodo,podremos elegir el colordeseadocon el mouse. • Pestañas:una de lasherramientasmásconocidas de Mozilla esta disponible para KompoZerfacilitandoel trabajoy brindándolelaposibilidad al usuarioderealizar acciones de manera másfluidanavegando entre pestañas.Se podrá utilizar la herramienta Deshacer y Rehacer independientementeen cada unade las pestañas. Barras de tareas personalizables:se podrán elegir los botones que aparezcanen nuestras barrasy losque no según nuestros gustos y/onecesidades. Como podrásver,éstaaplicaciónfacilita muchoeldesarrollo desitioswebcon sus herramientas.
- 2. http://www.difundefirefox.com/kompozer ENTORNO DE TRABAJO Laventana principal de KompoZerestáformadaporvarias barras,a continuación una descripción de cadauna de ellas. Barradetítulo: Ala izquierdadeestabarra aparece el título dela página webque estamos editando o el nombre delarchivoque le hayamosasignado.Ala derecha los botonesde control dela ventaminimizar,maximizar/restaurar y cerrar. Barrademenús: Formado porlos menúsArchivo,Editar,Ver,Insertar,Formato,Tabla,Herramientas, Ayuda.Atravésdeestosmenús podemos accedera todaslasopciones delprograma. BarradeRedacción: Esta barraestá formadapor botones conlas opciones de uso más habitualque se encuentranenla barra demenú.Atravésdeestos botones accedemos másrápidamente. Por ejemplolos botones: Nuevo, Abrir, Guardar,Publicar,Buscar,Imagen, etc. Cabedestacar quepodremos modificardichabarra,paraadaptarlaanuestras necesidades. BarrasdeFormato: Con botonesque nos permiten accedera opcionesmásbásicas deformato de texto y párrafos.Estas son similares a lasdecualquier procesadordetextos.Bajo esta tenemos otra barracon más opciones de formatos yademás deotras relacionadas conel formato aplicando estilos ylascapas.
- 3. Ventanaadministraciónsitiosweb: Esta barraesta situada a la izquierday enella podremos configurar lossitiosweb,para poder acceder de forma rápida alasdistintaspáginasweb.Atravésdeellatambién podremos publicaren Internet Webs y editardirectamente las paginasyapublicadas sin necesidad de tenerlas guardadas en nuestrodisco local. Ventanadeáreadeedición: Esta es el áreaprincipal,en la que podremosdiseñary editar la página web. Es el espaciodetrabajo.Cadapágina que se editesemostraráen estaárea,pudiendocambiar deuna a otra mediantelas pestañasque se muestran en lapartesuperiorcon el titulode cada página.También podemos mostrarlas reglasen estaárea,que nos ayudarana dimensionar diversos objetos. Barrademodode edición: En esta barranos encontraremos cuatropestañas quepermiten cambiar el modode edición: ·Normal(omodo Wysiwyg) ·Etiquetas HTML(muestradeformaesquemáticalas etiquetasutilizadas) ·Código Fuente (accesoal código HTMLde lapágina) ·Vista Preliminar (Como severíala pagina en el navegador) Barradeestado: Proporciona información como larelativaa dentrode qué etiqueta nos encontramos. Además a travésde ellapodemosseleccionar de forma facil y rápida las etiquetas con sus contenidospara realizar acciones sobreellos comodarformatos,eliminar,etc.
- 4. DREACION DE UN SITIO WEB KompoZer nos permitirátrabajar directamente sobreel sitio weben Internet,aunque además puede trabajarcon archivosen el sistema local. Paramantener organizados todos los archivos,esnecesario crear un sitioweb. Seleccionar: – Menú Editar – Configuraciónde Publicación Osino desde el panel izquierdo deAdministrador de sitios (F9),seleccionamos elbotón EditarSitios. En ambos casos aparecerá la siguienteventana: Administracióndesitio s web Ala izquierda,podemos observar los sitios yadefinidos,y ala derecha las propiedades del sitio seleccionado. Paracrear un nuevositio,primero seleccionamos el botónNuevositio;así,los campos de laderechasepondránen blanco para quesean rellenados: Nombre delsitio:Nombredel sitioque se vaa crear.Esun textoque sevaa mostrar en la listadesitios ycuandohayaque seleccionarlo.Es muyútil para
- 5. identificarlo. Dirección HTTPdesu páginainicial:URLde la página deiniciodel sitio web.Por ejemplo,si se tiene unapágina en geocities,será http://es.geocities.com/usuario/index.html.En caso de quesedesee trabajar en el sistema local,la dirección será detipofile:///C:/Documentsand Settings/usuario/sitioweb/index.html. Servidor depublicación:información parapublicar en el servidor Directoriodepublicación:dirección FTP(ProtocolodeTransferencia de archivos)de publicación.Esta información nos la suministra el servidor donde se aloja lapágina.Enelcaso de Geocitiesserá ftp://ftp.es.geocities.com/.En elcaso de que se trabajemos en local,se introduciráuna URLlocal deltipoile:///C:/Documentsand Settings/usuario/Directorioo seseleccionamos lacarpeta pulsando enel botón Seleccionar directorio. Nombre de usuario Contraseña Paraeliminar un sitio, lo seleccionamos en lalista ypulsamosel botón Eliminar sitio. Paraestablecerunsitio predeterminado,lo seleccionamosen la lista y pulsamos el botón Seleccionar como valorpredeterminado.El nombre delsitiosepondráennegrita indicando queesel predeterminado. Una vez definido el sitioweb,en el panel de laizquierda se mostrarántodoslos archivosy sub-carpetas existentes.Haciendo doble pulsaciónsobre un archivo,se abrirá en una solapanueva de lazona de trabajo.Sise hace pulsación doble sobre una carpeta,se mostraráel contenido de la misma. CONFIGURACIÓN DE PAGINAS WEB CrearunaPáginaWeb • Para crearuna página webpulsamossobre el icono Nuevo en la barrade herramientas decomposición.Odesde el menúArchivo->Nuevo Apareceralasiguiente ventana,Podremos seleccionar: • un documentoen blanco, que bienpuede ser un XHTMLnormal, o un StrictDTD,que esun documentoXHTMLen elque no soportaetiquetasantiguasy elcódigodebe estarescrito correctamente. • Un documentobasado en una plantilla. • Unaplantillavacia.
- 6. También,podremos decirle quelo cree en unapestaña,oen una ventana nueva. • Para abrir una páginayaexistenteira:Archivo→Abrir archivo.(Ctrl.+O) • Para abrir una páginaabierta recientemente ir a:Archivo →Páginasrecientes. Es interesante comentar quemediantela opción abrir direcciónweb,podremos cargar una webdirectamente en elprograma,observandoasísu disposición ycontenido. GuardarunaPáginaWeb Podremos guardar un documento de KompoZerenformatoHTMLoformatosólo texto.En
- 7. elcaso de guardarlocomoHTML(Archivo/ Guardar como...)preservaráel formatodel documento,como estilosdel texto, imágenes,etc.Siguardamosel documentocomo sólo texto (Archivo/Guardar) ycambiar codificación de caracteres) eliminaremos todas las etiquetas HTML,pero se preservará eltexto deldocumento. Vistapreliminarenelnavegador. Siqueremos comprobar cómoquedaría nuestrapágina webenInternet,podemos reproducirla conelnavegador quetengamos instalado.Solohemos de elegirArchivo/ Visualizar Páginaenelnavegadoro pulsarla tecla F5.
- 8. FORMATODETEXTO Siqueremos modificar las características deuntexto,o cualquier otro elemento,se aplican desdelabarra de Formato o desdemenú Formato Sinolo tenemos visible seleccionamosVer/Mostrar Ocultar/Barrade Formato Una vez seleccionado un textoel inspectordepropiedadesmuestra esteaspecto. En casodeque en lamisma no encontremos la opción deseada,dentro delmenú Formato,encontraremos las faltantes. EstilodePárrafo. Eltexto en HTMLestá compuesto principalmente por encabezados ypárrafos. Paraasignara unpárrafo un estilode párrafo,como hemoscomentado anteriormente, seleccionamos elmismo,y,seleccionamosenel campoTextodel Cuerpo,Parrafo,o Encabezado x,dependiendodel tipo. Estilosaccesibles desdeestalista: • Dirección:Introduce textoentresaltosde línea,no entre etiquetas<p>y </p>, como haráPárrafo. • Preformato:estilo de texto que emplea letra mono espaciada,con este estilose respetanlos espacios entre palabras delcódigoHTML,se emplea de unamanera rudimentariapara alinear texto.Laetiqueta queempleaes<PRE></PRE>. • Contenedor Genérico(DIV): Estaopciónintroduceel textodentrode una capa, que es untipode organización del texto ydemas elementos,enel que profundizaremosmasadelante. Fuente Lafuentesedefine con elatributofacede laetiqueta<Font>. KompoZer aplica las fuentes queseencuentraninstaladas en el equipo,perohayque tenerencuenta,que puede queelvisitante no posea ese determinadotipode fuente,por loque
- 9. es recomendable quecuidemoseste aspectoa la hora de seleccionar alguna de ellas,yaque dependiendo de la fuente seleccionada,el aspectodenuestra webpuede cambiar mucho. Lospasos paraaplicarel formato,son lossiguientes: 1.Seleccionamos el texto. 2.Desplegamos,enel Inspector de Propiedades,elcuadro delista desplegable de fuentes o ejecuta elcomandoTexto>Fuente. 3.Seleccionamos de la listalafuentedeseada. Negrita,cursivaySubrayado Desde el mismoInspectorde Propiedadespodemosaplicarestilo directamente a un texto seleccionadopulsando los iconos correspondientes. Tamaño Alseleccionar Menoro Mayorpuedecambiar el tamaño del texto seleccionado usando etiquetas <small>y <big>, respectivamente. SiseleccionamoaMuypequeño,Pequeño,Medio, Grande,Muygrandey Extragrande cambiaráeltamaño deltexto seleccionado usando etiquetas<font>. AlineacióndePárrafos. Paraestablecerla alineación delPárrafo: 1.Situamos elcursor en el Párrafo quequeremosmodificar. 2.Seleccionaenel Inspector de Propiedadesla alineaciónque deseamos pulsando su botón correspondiente. Los diferentes códigos que se introducen son: • Izquierda:<p align="left">.</p> • Centro:<p align="center"></p> • Derecha:<p align="right"></p> • Justificar:<p align="justify"></p> Tambiénse puede acceder desdeel menúTexto>Alinear,y seleccionamos la alineación elegida.
- 10. SangríadePárrafos. Paramodificar lasangría delPárrafo: 1.Situamos elcursor en el párrafoque queremos sangrar. 2.En elInspectorde Propiedades,pulsamos elicono Sangríade textooAnularla sangría detexto segúndeseemos. El color. Se puede definir el color para varioselementosde la página: texto,fondodepáginas, tablas yceldas,hipervínculos,bordes de tablas,líneashorizontales,etc. Seleccionarel color. En cualquier momento quetengamos queseleccionar uncolor en KompoZerloharemos a travésdeunbotón de este tipo: . Alpulsarlo aparecerá el selectorde color: Desde el cuadro de diálogo que se despliega podremosseleccionar un color predefinido, o seleccionarlocualquiera dela paletadecolores,asícomo personalizarsutono, saturación y brillo.También,podremosseleccionarlo por su nombre,o por su valoren hexadecimal. Aclaración:Las etiquetasweb emplean colores por combinación de ROJO,VERDE y AZUL,el valor máximo paracada colores255 (FFen hexadecimal),y elvalor mínimo 0 (0 enhexadecimal).Ej.:uncolor codificado así#FF0000 es rojopuro.
- 11. ENLACES Losvínculos tambiénllamados enlaces,links o hiper-enlaces sonlosque nos permiten navegar,esdecir, ir pasandodeuna pagina a otra. Se puede usarcomoenlaceun textoo unaimagen,elprocedimiento es similar en ambos casos.Haydosformasdeintroduciruna direccióndela página/archivo/etca enlazar: Direccionesabsolutasyrelativas • Absolutas: Se utilizan paraenlazarpáginas oarchivosdeun servidorexterno.Una dirección absoluta contiene la URLcompleta.Son del tipo: http://www.cprlogrono.comEstas direccionesrequieren ser comprobadas periodicamente como labor de mantenimiento. Ej:http://www.google.es/. Código:<a href="http://www.google.es"> • Relativas:Para enlazar páginas o archivospertenecientes al mismositio.Lesfalta alguna de lasseccionesde la URL.Si elarchivodestino no se encuentra dentro de la mismacarpeta del sitioweb,sele antepone la ruta correspondiente a partir de la ubiaciónactual. Ej:direccion relativa.Código:<a href="../../index.htm"> TiposdeEnlaces: • Interno:Nos llevaa otra parte dentrodela misma página donde se encuentra el enlace.Para ello utilizamos un elemento llamadoancla. • Local:Serefiere a algún recurso situado en el mismoservidor que nuestra página (URLrelativas) • Externo:Se refierea algún recurso situadoenotrosservidoresdiferentes donde se encuentra nuestrapágina (URLabsoluta) • DeCorreo:Cuando se daclic en este tipo de enlaces se abreprograma decorreo electrónicopara enviar un email a la dirección que previamente se halla especificado en ese enlace.
- 12. AArchivos:El recursoseñalado es un archivo yal dar clicnos permiten que se abran o se descargen a nuestroordenador esos archivos APLCACIÓN Enlace Externo 1.Situamos elcursor adondeestarádirigido nuestroenlace.Una vez seleccionado, pulsamos el icono EnlaceInterno ,yleestablecemos un nombreque haráde referencia de nuestroenlace. 2.Luego,seleccionamos nuestrofuturolink que,como yahemosmencionado,puede ser el textoo la imagen que serviráde enlace. 3.Elegimos menúInsertar→ Enlace o pulsamos el botónEnlace 4.En Ubicacióndel enlace colocamos la URLdelapágina a la quedebe apuntar el enlace. La URLpuede ser absoluta (comienza por http://)o relativa,es decir larutadeun archivoen el propio servidor donde estéalojada la página.En este caso podremos marcar la opción LaURLesrelativaa la direcciónde la página cuando accedamos a las propiedades delenlace. Al pasar elmouse sobreelanclacolocada,apareceráel nombreque le hemos dado. Para cadadestino al que queremos llegar en nuestrapáginahabrá unancla Enlaces Externo 1. Situamos el cursor donde será elenlace.Por ejemploseleccionando el textoo imagenque servirá deenlace. 2. Elegimosmenú Insertar→Enlaceo pulsamos elbotón Enlace 3. En Ubicación delenlacecolocamosla URLde la páginaa laque debeapuntar el enlace. La URLpuede ser absoluta o relativa. EnlacesaCorreoElectrónico Alinsertar un enlace,simplemente en lugar de escribir la url,escribimos el correo electrónicoal cualqueremos llegary marcamosla opción “Lo anterioresuna dirección de correo electrónico”
- 13. EnlacesaArchivos: Paracrear un enlace a un archivo,lorealizamos igual quesifueraa otra página,solo que envezdeseleccionar dicha página,seleccionamos el archivo en cuestión.Estos enlaces nodisponen de mayorcomplejidad. DestinodelEnlace: Elarchivollamadoporun enlace se muestra en unaventana delnavegador.Por defecto,
- 14. estaventana es la misma enlaque estábamos,se sustituyesu contenido.Pero es posible determinar cuál va aserla ventanadedestino del enlace. Dentro de las propiedades del enlace,podremos seleccionar entre las siguientes opciones: • En lamisma ventana,sin marcos(pordefecto) • En una nuevaventana. • En elconjuntodemarcos contenedor • En elmarco actual • En este marco:<nombre marco> Demomento soloprestaremos atención a los dos primeros,yaque los marcoslos estudiaremosen profundidadenotrosapartados deeste manual. REFERENCIA HTML Etiqueta<A>y</A> Lasetiquetas <a>y</a>definen unenlace:el textoo imagenencerradoentreellas servirá de enlace hacia el destino que marquemos. Ej: IraGoogle Código HTML:<a href="http://www.google.com">Enlace a la páginadeGoogle</a>Eldestino es marcadopor el modificadorhrefdela etiqueta. Atributosde<A> • href="...":Esnecesaria.Indica la dirección URLa laque se va asaltar al hacerclic sobre elenlace. • name="...":Convierte al contenido dela etiqueta<A>en un destino (llamado marcadoro punto de ancla). • target="...": Determina el marcoo ventana de destino donde seabriráelarchivo enlazado. • title="...": Opcionalmentepodemosañadiruntexto alternativo quese muestraal posicionarel ratón sobre elenlace.
- 15. Atributosde<BODY> Laetiqueta <BODY>puedetenertres modificadores que definen el aspectode los enlacesdetodala página web: • link="...": Determina el color de los enlaces delapágina Web • vlink="...":Determina el colorde los enlaces yavisitados de la páginaWeb • alink="...":Determina el colorgeneral de los enlaces activos(alhacer click) dela página Web