Seleccionando elementos

27 01 2010

En la entrada anterior explicábamos como podíamos editar elementos de un documento web, pero también tenemos que poder conocer que tipo de elemento estamos seleccionando para conocer que propiedades tiene asignadas y que podemos hacer con él (una tabla tendrá un tamaño, un enlace tendrá un destino…). Esto es posible gracias al elemento Select de la estructura DOM de HTML y XML, que nos permite conocer el rango de elementos seleccionados y conocer el nodo en la jerarquía del documento, ya que la estructura DOM ofrece una estructura arbórea del código HTML, conociendo como los elementos están introducidos unos dentro de otros, con la posibilidad de acceder a sus propiedades y contenido.

Más información sobre el elemento Select y sus propiedades en esta web de Mozilla.





La propiedad contenteditable

20 12 2009

Como explicamos en la presentación del proyecto, Skyweb permitirá crear y editar HTML a través de una aplicación web. No es que vayamos a usar elementos de alto nivel, como Java o Flash para crear un entorno de edición, sino que usaremos HTML para ello.

Editar el código es algo sencillo, tan sólo se necesita un área de texto con el código HTML a editar, pero ¿cómo permitir un entorno de edición visual WYSIWYG?. La respuesta es utilizando la propiedad “contenteditable” de HTML.

Esta propiedad, que puede añadirse a cualquier elemento como cualquier otra de las propiedades definibles en CSS o directamente sobre los objetos de que componen la estructura de una web, permite editar el contenido del HTML en una web. Es decir, la web se cargará con total normalidad, pero si pinchamos sobre un texto, podremos escribir y eliminar texto de él, podremos copiar y pegar elementos, o mover las imágenes de su posición. En esto se basará nuestra ventana de edición: el lugar donde esté contenido el código HTML que estemos editando tendrá esta propiedad activada.

Lo demás será reconocer la selección que hagamos de un elemento para leer sus propiedades, añadir herramientas que añadan nuevos elementos o modifiquen los seleccionados (por ejemplo, poner un texto en negrita). De esta forma conforme modifiquemos el diseño de la web, podremos ver como está quedando, ya que estaremos trabajando directamente sobre ella. De esta forma tan sencilla podemos tener nuestra vista de modo diseño, con la ventaja de que veremos todo renderizado con el motor del navegador que estemos usando, sin preocuparnos de la independencia del motor de la herramienta, como ocurre en soluciones de escritorio.

Más adelante iremos contando más cosas sobre DOM, la propiedad contenteditable, acceder a propiedades de un objeto HTML y muchas otras cosas que componen Skyweb.





¿A qué se parece Skyweb?

7 12 2009

Skyweb pretende aunar lo mejor de editores on-line como FCKEditor y la potencia de aplicaciones como Dreamweaver, de Adobe. Pero si estuviera ya terminado, ¿cómo podría ser? Aquí van unos bocetos:

Vista de código de SkywebEsta pantalla es la de vista de código fuente. Aquí, se edita el código de la página y los cambios se van reflejando inmediatamente si se cambia a vista gráfica (¡y si el código es válido, claro!). Es como un bloc de notas avanzado, muy parecido a como sería Notepad++ por ejemplo, en el que se pueden abrir etiquetas a través de menús contextuales, y cerrarlas tan pronto como se escriba “</”.

Vista gráfica de SkywebVista de formulario de metadatos de SkywebEn estas dos imágenes se observa la vista gráfica de Skyweb. Desde estas pantallas se puede editar la página web en modo WYSIWYG (“lo que ves es lo que obtienes”), y el código se va modificando internamente de manera dinámica. Es el método ideal para principiantes. Además, se podrán configurar parámetros básicos del documento a través de formularios que recuerdan a los cuadros de diálogo que ofrece Dreamweaver, lo que por supuesto también se puede editar a través de la vista de código.





Presentaciones

4 12 2009

¡Bievenidos al blog de ENELU y nuestro proyecto Skyweb!

ENELU (ENELU no es Linux/Unix) es un grupo formado en la Escuela Superior de Ingeniería Informática de Albacete (UCLM) por cinco estudiantes con motivo de la participación en el concurso de Software Libre regional y nacional. El grupo está constituido oficialmente por Carlos Vázquez, Juan Alberto Martínez y yo mismo, José Carlos Tapia, aunque tampoco podemos olvidar a los otros dos integrantes del grupo que colaborarán en este proyecto, aunque no participen oficialmente en el concurso: Javier Martínez y Carmen Rosa Useros.

Nuestro proyecto, Skyweb, es un desarrollo bajo licencia GNU que pretende disponer de una aplicación web para el desarrollo de páginas web, de momento centrándose sólo en HTML y CSS, pero con la idea de poder ampliarlo a otros lenguajes como PHP o JavaScript. El objetivo es disponer de un entorno de desarrollo cómodo, rápido y potente, que siga la filosofía introducida por las herramientas existentes de escritorio, pero que pueda permitirnos trabajar en cualquier momento y en cualquier lugar, sin necesidad de instalar nada.

Aun estamos perfilando el diseño de la aplicación, siguiendo las metodologías de Ingeniería del Software, pero estamos deseando ponernos manos a la obra y empezar a enseñaros como empieza a tomar forma la criatura. Espero que lo encontréis interesante y que aporteis posibles opiniones de lo que veais y leais en este blog, donde también aprovecharemos para comentar curiosidades del proyecto, como de donde surje su nombre o que fuentes de inspiración tenemos… incluso un poco más sobre el trabajo de cada integrante del grupo durante el desarrollo.

Bienvenidos a todos y espero que nos sigais a menudo. No olvideis seguir de cerca los concursos de software libre nacional y de Castilla La Mancha en sus webs oficiales, que podéis ver en la columna de la derecha de este blog.








Seguir

Get every new post delivered to your Inbox.