Mostrando entradas con la etiqueta html. Mostrar todas las entradas
Mostrando entradas con la etiqueta html. Mostrar todas las entradas

miércoles, 30 de marzo de 2011

jWYSIWYG - Editor HTML en Javascript

De toda la vida, no sé si por costumbre o por qué razón, hemos usado TinyMCE como editor HTML en Javascript para todos los campos de formulario en los que es necesario insertar código HTML.


El caso es que últimamente se nos hace pesado y complicado de mantener. Necesitamos algo más ligero y flexible. Seguro que es por torpeza nuestra.


Investigando en StackOverflow (una de nuestras páginas de cabecera), llegamos a jWYSIWYG.


Las premisas de la búsqueda fueron que el editor fuera fácilmente configurable y basado en jQuery. De esa forma, con la experiencia que estamos cogiendo últimamente con este framework, nos sería más fácil su integración y manejo.


Una de las cosas que pretendíamos conseguir, y que hemos conseguido con jWYSIWYG, era cargar sólo una instancia del editor en el momento en que hacemos clic en un textarea, y descargarlo cuando terminamos la edición. También queríamos tener un editor sencillito con los 3 ó 4 botones básicos (negrita, cursiva, etc.). Todo eso seguro que se puede hacer con TinyMCE, y con las decenas de soluciones semejantes que hay, tanto libres como de pago. Pero con jWYSIWYG lo hemos logrado en apenas un rato de investigación y cacharreo.

viernes, 25 de marzo de 2011

JSFiddle - Desarrollo sobre la marcha

A la hora de desarrollar, muchas veces tenemos la necesidad de probar cosas sobre la marcha, especialmente cuando hacemos desarrollos cliente (HTML, CSS, Javascript) sobre temas que no dominamos. En esos casos, tener un mecanismo de pruebas ágil nos puede ahorrar mucho tiempo.


Pero siempre tendremos que editar, publicar, y abrir en el navegador. También tendremos que bajar e instalar recursos externos (CSS, JS) cuando queramos probarlos, aun cuando no nos vayamos a quedar con ellos al final.


JSFiddle es una herramienta de prototipado que permite probar código HTML, CSS y JS en la misma ventana del navegador, sin necesidad de todo lo anterior.


Tenemos tres ventanas en las que podremos editar HTML, CSS y JS. Podremos cargar recursos externos, así como algunos de los frameworks JS más usados (Mootools, jQuery, Prototype...). Además, aporta extras como validar nuestro JS o limpiar el código que hayamos introducido.


Por último, si nos registramos, podremos almacenar nuestros "fiddles" para usarlos en otro momento.

jueves, 17 de marzo de 2011

Vídeos para Flash e iPhone

Andaba buscando la forma de que los vídeos de 20minutos.tv se puedan reproducir también en el iPhone, aunque sea a pantalla completa, y he encontrado esta página: http://code.google.com/p/swfobject/wiki/iphone_mp4. Ahí exponen una forma de codificar el tag de vídeo que funciona en todos los navegadores y también en el teléfono, sin llegar a usar los tags de HTML5 (ya que usamos un player Flash personalizado para servir el vídeo en streaming pudiendo ver capturas al hacer seeking y también para poder servir publicidad).


El código, adaptado a nuestras necesidades, sería algo así:




<object id="videoContent" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="544" height="330">
<param name="movie" value="http://estaticos.20minutos.es/player/player.swf" />
<param name="flashvars" value="status=200&dynconf=http://www.20minutos.tv/videoconfig/4340dsm330XX/d/&still=http://estaticos.20minutos.es/20minutostv/img/abcd7.jpg" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://estaticos.20minutos.es/player/player.swf" width="544" height="330">
<param name="flashvars" value="status=200&dynconf=http://www.20minutos.tv/videoconfig/4340dsm330XX/d/&still=http://estaticos.20minutos.es/20minutostv/img/abcd7.jpg" />
<object type="video/mp4" data="http://estaticos.20minutos.es/20minutostv/img/abcd7.jpg" width="544" height="330">
<param name="controller" value="false" />
<param name="src" value="http://estaticos.20minutos.es/20minutostv/img/abcd7.jpg" />
<param name="href" value="http://download.cdn.com/4340dsm330XX.mp4" />
<param name="target" value="myself" />
<!--<![endif]-->
<img src="http://estaticos.20minutos.es/20minutostv/img/abcd7.jpg" alt="" />
<!--[if !IE]>-->
</object>
</object>
<!--<![endif]-->
</object>


El object de tipo video/mp4 es el que hace el "milagro" de que el vídeo se pueda ver en el iPhone. Eso y que está codificado con un codec que es compatible con el terminal.

martes, 15 de febrero de 2011

Rendera – Un editor online de HTML5 y CSS3

Rendera es una aplicación online mediante la cual, sin necesidad de instalar nada, podemos escribir código HTML5, CSS3 y Javascript (con soporte para jQuery) y ver cómo queda en tiempo real.


Es una buena opción para hacer pruebas rápidas. Además, la página incluye algunos ejemplos que nos pueden servir de inspiración.


Lógicamente, los resultados dependerán del navegador que estemos utilizando. No todos ellos dan soporte a todas las funcionalidades de estas nuevas versiones de los estándares.


Vía wwwhat’snew.

Parseando HTML

Lo ideal, cuando necesitamos obtener datos de un proveedor, es acceder a un servicio web que nos los proporcione en algún formato estructurado (XML, JSON o similar). Lamentablemente, no siempre disponemos de este servicio, pero sí que es posible que podamos obtener la información en alguna página web, en formato HTML.


Para ello, lo que tenemos que hacer es interpretar el HTML, extrayendo los datos que nos interesen. En nuestra ayuda viene una librería como PHP Simple HTML DOM, que nos permite realizar esta función de manera sencilla, empleando selectores como los de jQuery.


La pega (que no debería ser tal): sólo funciona con PHP 5 en adelante.


Por descontado, nuestro parser estará íntimamente ligado al código HTML de la página. Cualquier mínimo cambio puede dejar nuestro script inutilizable. Pero al construirlo con esta librería, como las reglas de selección son bastante claras, es fácil adaptarlo.