EditiXLite

MDULO:LenguajesdeMarcasySistemasdeGestin deInformacin. FAMILIAPROFESIONAL:InformticayComunicaciones CICLOFORMATIVODEGRADOSUPERIOR DESARROLLODEAPLICACIONESWEB PRIMERCURSO MDULO:LenguajesdeMarcasySistemasdeGestin deInformacin

MsterUniversitarioenProfesoradode EducacinSecundaria UniversidaddeAlicante

JavierMuiz

Uso de EditiX en el mdulo de Lenguajes de Marcas 1 INTRODUCCIN 2 CONTEXTUALIZACIN 3 DESCRIPCIN DE LA HERRAMIENTA 3.1 CARACTERSTICAS GENERALES 3.2 INTERFAZ 3.2.1 ARCHIVO 3.2.2 EDICIN 3.2.3 BSQUEDA 3.2.4 VISTA 3.2.5 EDITOR XQUERY 3.2.6 XML DIFF 3.2.7 OTRAS FUNCIONALIDADES 3.3 COMPARATIVA 4 APLICACIN DIDCTICA 5 CONCLUSIONES 6 RECURSOS ADICIONALES 6.1 ENLACES A WEBS OFICIALES 6.2 TUTORIALES Y ACTIVIDADES VARIAS 03 03 04 04 05 05 05 06 06 06 06 06 07 07 12 12 12 12

-2-

Uso de EditiX en el mdulo de Lenguajes de Marcas 1 INTRODUCCIN El conocimiento del los lenguajes de marcado, como XML, es algo esencial en nuestros das para los estudiantes de informtica, ya que como futuros profesionales del sector, debern de ser capaces de trabajar sobre servicios web, utilizando tecnologas como Ajax, JSON o RoR. Y es que el Cloud computing, tambin conocido como computacin en la nube o centralizada es una tendencia al alza, que est llevando a las empresas a utilizar o crear este tipo de servicios online, los cuales a su vez requieren lenguajes de marcado para realizar las comunicaciones entre servidor y cliente. Adems, nos encontramos cada vez ms sumidos en una sociedad en la que la informacin posee un gran poder e influencia, por lo que los estudiantes deben de poder construir plataformas capaces de sindicar sus contenidos, para facilitar su distribucin por la red de la forma ms eficiente posible. Para llevar a cabo todo este aprendizaje y hacer que los alumnos se familiaricen con estas tecnologas y las herramientas que las hacen posibles, se han planteado para el siguiente mdulo una serie de actividades que sern llevadas a cabo utilizando EditiX, un potente editor gratuito y multiplataforma de XML. 2 CONTEXTUALIZACIN La presente herramienta ser utilizada dentro del mdulo de Lenguajes de Marcas y Sistemas de Gestin de Informacin que se imparte en el primer curso del ciclo formativo de grado superior de Desarrollo de Aplicaciones Web, perteneciente a la familia profesional informtica y comunicaciones. Su uso ser fundamental para obtener los resultados de aprendizaje para el mdulo de Lenguajes de Marcas y Sistemas de Gestin de Informacin, estipulados en el Real Decreto 686/2010, de 30 de octubre: Resultado de aprendizaje 1: Reconoce las caractersticas de lenguajes de marcas, analizando e interpretando fragmentos de cdigo. Resultado de aprendizaje 2: Utiliza lenguajes de marcas para la transmisin de informacin a travs de la web, analizando la estructura de los documentos e identificando sus elementos. Resultado de aprendizaje 3: Genera canales de contenidos analizando y utilizando tecnologas de sindicacin.

-3-

Uso de EditiX en el mdulo de Lenguajes de Marcas Resultado de aprendizaje 4: Establece mecanismos de validacin para documentos XML utilizando mtodos para definir su sintaxis y estructura. Resultado de aprendizaje 5: Realiza conversiones sobre documentos XML utilizando tcnicas y herramientas de procesamiento. Resultado de aprendizaje 6: Gestiona informacin en formato XML analizando y utilizando tecnologas de almacenamiento y lenguajes de consulta. Resultado de aprendizaje 7: Opera sistemas empresariales de gestin de informacin realizando tareas de importacin, integracin, aseguramiento y extraccin de la informacin. Haciendo uso de esta herramienta, los estudiantes aprendern a crear y manipular documentos codificados usando lenguajes de marcado: XML, CSS, RSS, as como consultas en bases de datos nativas: Xquery y Xpath. 3 DESCRIPCIN DE LA HERRAMIENTA 3.1 Caractersticas generales EditiX Lite es la versin gratuita del editor comercial EditiX. La herramienta slo puede ser utilizada con fines no comerciales, lo cual la convierte en una estupenda alternativa para utilizarla dentro del mbito docente. Una de sus grandes ventajas es que es multiplataforma, por lo que adems de en Windows y MacOS, podremos instalarla en plataformas Linux, lo cual nos evitar tener que usar sistemas operativos propietarios, y tambin nos dar pie a la hora de tratar contenidos transversales como la Educacin para el consumidor dentro del ciclo formativo. La Aplicacin est basada en Java por lo que necesitaremos una versin de Java VM por lo menos superior a la 5.x. Acepta la validacin de ficheros mediante esquemas DTD/XML y XML RelaxNG, ofrece una ayuda sintctica para DTD/W3C y XML RelaxNG, transformacin XSLT y XSL-FO, ayuda para la formulacin de peticiones XPath, gestin de proyectos y plantillas, bsquedas multicriterio por etiquetas y/o atributos, parsing automtico, etc. Dispone de una extensa variedad de funcionalidades XML, accesibles a travs de una interfaz plagada de ayudas contextuales, que nos guan a travs de cada uno de los procesos, junto a un editor con apariencia de doble ventana para ms comodidad, soporte -4-

Uso de EditiX en el mdulo de Lenguajes de Marcas para plug-ins y cach en local para un uso desconectado. EditiX es un buen ejemplar de editor XML, quizs uno de los ms configurables y personales del mercado, con estas caractersticas. 3.2 Interfaz La interfaz del editor es altamente configurable, lo que permite aadir paneles en la parte izquierda de la ventana, para aumentar las funcionalidades, dejando en el centro la pantalla principal, dnde se introducir el cdigo.

A continuacin indicamos algunas de las opciones ms interesantes que posee la herramienta: 3.2.1 Archivo Desde esta opcin podemos crear archivos a partir de plantillas predeterminadas para los formatos: XML,DTD,XSLT,XHTML,DocBook,W3C XML Schema,XML RelaxNG,MathML,SVG,XSL-Fo,Ant oCSS. Tambin se pueden importar documentos HTML o CVS, o abrir o guardar archivos va FTP. 3.2.2 Edicin Desde esta barra podremos observar el rbol con la estructura de nuestro proyecto, con la ventaja de que los elementos se pueden arrastrar de forma visual de una zona a otra, lo cual cambia el cdigo de forma automtica para adaptarlo.

-5-

Uso de EditiX en el mdulo de Lenguajes de Marcas 3.2.3 Bsqueda Permite encontrar y reemplazar fragmentos de texto o cdigo, empleando varios criterios, as como utilizar expresiones Xpath.

3.2.4 Vista Adems de permitir configurar la forma en que trabajamos,dividiendo el rea de trabajo en zonas verticales u horizontales, tambin sirve para renderizar el cdigo para ver su representacin en HTML o SVG. 3.2.5 Editor Xquery La herramienta posee un motor para realizar consultas dentro de bases de datos nativas en XML, a travs de Xquery, lo cual simplifica enormemente la tarea de buscar entradas concretas cuando tenemos archivos con grandes volmenes de datos.

3.2.6 XML Diff Permite comparar dos archivos, para localizar diferencias en el cdigo o entre los diferentes nodos de una forma rpida y sencilla. 3.2.7 Otras funcionalidades El resto de funcionalidades pueden ser consultadas en su web oficial: http://www.editix.com/features.html

-6-

Uso de EditiX en el mdulo de Lenguajes de Marcas 3.3 Comparativa A continuacin incluimos una pequea tabla comparativa, en la que evaluamos las caractersticas de tres editores de XML disponibles en el mercado.
Caractersticas / Editor

Bluefish

Oxygen

EditiX

Logotipo

Precio SO

Gratis Multiplataforma

Pago (64 dlares) Multiplataforma S S S S S

Gratis (uso no comercial) Multiplataforma (JAVA) No S S S S

Compatible con No Eclipse Xquery Debbuger XML Diff XML database XML tree editor No No No No

Comparando estos tres productos, llegamos a la conclusin de que el ms completo es oXygen, aunque al ser un producto de pago no es el ms apropiado para el entorno educativo. Sin embargo, EditiX, es un editor casi tan bueno y completo como oXygen, pero presenta la ventaja de que es gratuito siempre y cuando se utilice sin fines comerciales, por lo que ser el que utilicemos en el presente mdulo, para trabajar lenguajes de marcas. 4 APLICACIN DIDCTICA Para que los alumnos se familiaricen con los lenguajes de marcas y con este editor, se realizarn a lo largo del mdulo las siguientes actividades:

-7-

Uso de EditiX en el mdulo de Lenguajes de Marcas Tema 1: Introduccin a XML Duracin total: 6 horas (2 sesiones de 3 horas) Para este tema introductorio se realizarn las tres actividades que describimos a continuacin. Actividad 0: Presentacin Duracin: 15 minutos Materiales: Proyector Pizarra digital Tareas: El profesor dar una breve charla para indicar cmo se trabajar durante el presente tema. Actividad 1: Conceptos iniciales Duracin: 2 horas 45 minutos Materiales: Proyector Pizarra digital Tareas: El docente expondr qu es XML y el concepto de metalenguaje. Se facilitar algunos ejemplos para identificar las necesidades de intercambio de datos y la importancia de estandarizar las estructuras de datos. Finalidad: Introducir a los estudiantes en lenguaje XML. Elementos a evaluar: Se evaluar el inters del alumno en la materia. Actividad 2: Estudio y prctica guiada de instalacin del entorno de trabajo con XML Duracin: 3 horas (1 sesin) Materiales: Proyector Pizarra digital Plataforma Moodle para la asignatura Un PC por estudiante (laboratorio de informtica) Tareas: El docente presentar a los alumnos varios editores de XML disponibles en el mercado: Bluefish editor oXygen EditiX Finalmente seleccionar EditiX, tras justificar los motivos de su decisin (arriba expuestos -8-

Uso de EditiX en el mdulo de Lenguajes de Marcas en el apartado 3 Descripcin de la herramienta) A continuacin los alumnos debern realizar las siguientes tareas por ellos mismos: Instalacin de EditiX en los PC's del aula. Configurar y mostrar las caractersticas generales del editor. Facilitar un documento de ejemplo a los estudiantes que debern modificar segn unas pautas: Aadir, borrar y modificar elementos. Insertar nuevos niveles de marcado. Intercambiar la posicin de dos elementos. - El alumno colgar en la plataforma Moodle habilitada para el mdulo, un archivo con los cambios realizados en el documento, y un PDF en el que indique las ventajas que presenta la herramienta utilizada. Finalidad: Identificar la importancia de XML como herramienta para resolver problemas de intercambio de datos. Conocer diferentes herramientas y entornos de desarrollo asociados a XML. Instalar y configurar un entorno de desarrollo concreto asociado a XML. Elementos a evaluar: Se evaluar que el alumno sea capaz de elegir un editor adecuado para su trabajo, y tambin que sea capaz de crear y modificar archivos XML sencillos. Tema 2: Sindicacin de contenidos (RSS) Duracin total: 2 horas Actividad 0: Presentacin Duracin: 15 minutos Materiales: Proyector Pizarra digital Tareas: El profesor dar una breve charla para indicar cmo se trabajar durante el presente tema. Actividad 1: Necesidad de la sindicacin Duracin: 45 minutos Materiales: Proyector Pizarra digital Plataforma Moodle para la asignatura Un PC por estudiante (laboratorio de informtica) Tareas: La/l docente expondr lo costoso que resulta consultar diferentes fuentes a travs de navegador, y esperar a que estos canales actualicen su contenido. -9-

Uso de EditiX en el mdulo de Lenguajes de Marcas Se pedir a los/as alumnos/as que instalen un agregador de feeds gratuito y que aadan algunas webs y blogs sobre tecnologa, para que comprueben su utilidad. Finalidad: Comprender por qu es necesaria la sindicacin de contenidos y conocer las diferentes alternativas de agregadores de feeds que existen en el mercado. Elementos a evaluar: Se evaluar el inters del alumno, as como su criterio a la hora de elegir un lector de feeds apropiado a sus necesidades. Actividad 2: RSS y ATOM Duracin: 1 hora Materiales: Proyector Pizarra digital Plataforma Moodle para la asignatura Un PC por estudiante (laboratorio de informtica) Tareas: Se mostrar un documento RSS de ejemplo, perfectamente estructurado Se pedir que investiguen y utilicen el validador de RSS de la W3 http://validator.w3.org/feed/ Crear, publicar y validar (W3C) su propio canal Trabajar con EditiX Declarar el tipo de documento Especificar el tipo de sintaxis de RSS que usaremos Creacin del canal Crear elementos no variables (por lo menos: ttulo, enlace y descripcin) Crear elementos variables Crear un documento HTML Enlazar RSS y HTML Los alumnos debern subir a Moodle una carpeta comprimida en formato .zip o .rar, con los archivos creados durante el transcurso de la actividad. Finalidad: Identificar la importancia de la sindicacin de contenidos para mejorar la usabilida y la productividad, as como conocer el funcionamiento interno de esta tecnologa. Elementos a evaluar: Se evaluar el que los alumnos sean capaces de crear su propio canal cumpliendo con el estndar W3C. Tema 3 : Consultas con XQuery y Xpath Duracin total: 3 horas Actividad 1: Consultas Duracin: 3 horas Materiales: - 10 -

Uso de EditiX en el mdulo de Lenguajes de Marcas Proyector Pizarra digital Plataforma Moodle para la asignatura Un PC por estudiante (laboratorio de informtica)

Tareas: El docente expondr la necesidad de poder buscar informacin de forma automtica en estructuras completas de XML. Se realizarn las siguientes tareas: El profesor facilitar un documento XML que contenga un listado de libros. Se darn emplos de sentencias XQuery y en grupo debern identificarse los resultados esperados. Los estudiantes harn bsquedas con expresiones xpath con editix. (For, Let, Where, Order By, Return). Analizarn por qu se obtiene cada uno de los resultados y comentarn los casos dudosos o inesperados. El docente formular una serie de consultas (entre 10 o 20), en lenguaje natural, de manera que los alumnos sean capaces de traducirlas a expresiones xPath, comprobando antes que funcionan correctamente. Finalmente los alumnos subirn a Moodle los resultados obtenidos en un documento PDF. Finalidad: Comprender la importancia y los mencanismos para trabajar correctamente con bases de datos nativas en formato XML. Elementos a evaluar: Se evaluar que los estudiantes comprendan correctamente el uso de xPath, y sean capaces de crear sus propias consultas. Tema 4 Lenguaje e estilos CSS Duracin total: 3 horas Actividad 1: Presentacin mediante CSS Duracin: 3 horas Materiales: Proyector Pizarra digital Plataforma Moodle para la asignatura Un PC por estudiante (laboratorio de informtica) Tareas: El docente presentar a los alumnos la importancia de separar back-end y front-end a la hora de desarrollar proyectos web, centrndose en las hojas de estilo CSS. Se facilitarn 3 hojas de estilo (CSS) y 3 documentos en HTML sin formato. Los alumnos debern probar a enlazar los diferentes CSS con cada documento. Visionar el cdigo de las hojas de estilo, y comprobar las reglas que se estn utilizando. - 11 -

Uso de EditiX en el mdulo de Lenguajes de Marcas Los alumnos modificarn uno de los CSS para crear un estilo propio que debern entregar al profesor. Finalidad: Saber separar correctamente cdigo y estilo, construyendo correctamente estructuras CSS. Elementos a evaluar: Se evaluar que los estudiantes distingan correctamente los conceptos de back-end y front-end, adems de saber codificar hojas de estilo sencillas en formato CSS.

5 CONCLUSIONES Tras realizar las actividades citadas en el apartado 4, se puede concluir diciendo que EditiX es una herramienta lo suficientemente verstil como para cumplir satisfactoriamente con todos los resultados de aprendizaje descritos en el currculo del mdulo de Lenguajes de Marcas y sistemas de gestin de informacin. La principal ventaja que aporta a la docencia, es que cuenta con una versin Lite (gratuita), perfectamente funcional para los ejercicios planteados, aunque tambin presenta algunos inconvenientes como la ausencia de traduccin al castellano, ya que la nica versin existente es en ingls. Finalmente si se diera el caso de tener que realizar alguna actividad que supusiera usar algunas de las funcionalidades de la versin de pago, se podra recurrir al editor de pago oXygen, el cual adems de ser algo ms completo que EditiX, cuenta con un periodo de prueba (trial) de un mes, tiempo suficiente para terminar esos ejercicios ms especficos. 6 RECURSOS ADICIONALES 6.1 Enlaces a webs oficiales: Web oficial EditiX W3C RSS Validator Tutorial XML XPath Ejemplos Xpath XML Wikipedia oXygen BlueFish http://www.editix.com/ http://validator.w3.org/feed/ http://www.w3schools.com/xml/ http://www.w3schools.com/xpath/ http://www.w3schools.com/xpath/xpath_examples.asp http://en.wikipedia.org/wiki/XML http://www.oxygenxml.com/ http://bluefish.openoffice.nl/index.html

6.2 Tutoriales y actividades varias: http://www.devjoker.com/contenidos/XML/270/C%C3%B3mo-crear-RSS.aspx http://lml.ls.fi.upm.es/~mcollado/xml/1011/ejemplos/xhtmltoc/ejercicios-toc.html#toc3

- 12 -