Posts etiquetados ‘JavaScript’


You can read the English version of this post in http://phpsblog.agustinvillalba.com/improvedcode-new-plug-tinymce/

En mi trabajo se utiliza mucho el editor web TinyMCE (http://www.tinymce.com), y me pidieron, si fuera posible, que el editor de código fuente HTML mostrara el código correctamente indentado y con los tags remarcados en distintos colores. Me puse a buscar plug-ins en la red para este editor que hicieran justamente lo que me pedían, pero no encontré ninguno que se ajustara exactamente a nuestras necesidades, por lo que me dispuse a hacerlo yo mismo basándome en el ya existente en el propio editor y utilizando la librería CodeMirror (http://codemirror.net) para el remarcado del código fuente. Así nació mi plug-in ImprovedCode para TinyMCE.

Descarga

Puedes descargarte el plug-in en su repositiorio de GitHub:

https://github.com/aguvillalba/improvedcode

Su licencia es LGPL v3 (http://www.gnu.org/copyleft/lesser.html) por lo que eres totalmente libre de modificar su código o incluir el plug-in en cualquier editor TinyMCE.

Instalación

Para instalar el plug-in ImprovedCode en tu editor TinyMCE, simplemente tienes que seguir estos 3 sencillos pasos:

  1. Extrae el archivo .zip en la carpeta plugins de tu editor TinyMCE
  2. En la sección de configuración, donde insertas tu editor, añade “improvedcode” a la lista de plugins
  3. Añade “improvedcode” en la barra de herramientas donde desees que se visualice el botón que lanza el plug-in. Habitualmente llamada “theme_advanced_buttonsN”, donde “N” es el número de la barra de herramientas en cuestión.
  4. Haz de asegurarte que el theme de tu editor TinyMCE está en modo “advanced”. Lo puedes comprobar en la opción de configuración de tu editor, en el mismo código dónde lo insertas en tu HTML:
tinyMCE.init({ 
        // General options 
        mode : "specific_textareas", 
        editor_selector: "mceEditor", 
        theme : "advanced", 
        plugins : "..., improvedcode, ...",
        theme_advanced_buttons1 : "..., improvedcode, ..."
});

Configuración

El plug-in dispone de varias opciones de configuración, permitiendo así que se ajuste mejor a tus necesidades. Como su propio nombre indica, estas son opciones de configuración, por lo que no es obligatorio establecer ninguna de ellas para el correcto funcionamiento del plug-in. Estas opciones son:

  • height: <int>, Valor entero que establece la altura inicial que ha de tener el editor. Por defecto: 580 (px).
  • indentUnit: <int>, Valor entero que establece el número de tabulaciones que ha de haber entre un bloque padre y un bloque hijo. Por defecto: 1
  • tabSize: <int>, Valor entero que determina cuántos espacios componen una tabulación. Por defecto: 4.
  • lineWrapping: <bool>, Valor booleano (true o false) que determina si ha de ajustarse las lineas al editor. Por defecto: true.
  • lineNumbers: <bool>, Valor booleano (true o false) que determina si han de mostrarse los números de línea en el margen izquierdo. Por defecto: true.
  • autoIndent: <bool>, Valor booleano (true o false) que determina si han de indentarse las líneas del editor cuando éste se inicia. Por defecto: true.
  • optionsBar: <bool>, Valor booleano (true o false) que determina si ha de mostrarse la barra de casillas de opciones en la parte superior del editor. Por defecto: true.
  • theme: <string>, Nombre de el tema estético que ha de aplicarse al editor. Por defecto: default. Esta es la lista de los posibles themes a aplicar:
    • ambiance
    • ambiance-mobile
    • blackboard
    • cobalt
    • eclipse
    • elegant
    • erlang-dark
    • lesser-dark
    • monokai
    • neat
    • night
    • rubyblue
    • solarized
    • twilight
    • vibrant-link
    • xq-dark
    • xq-light

Más información

Para más información puedes consultar el archivo “README” incluido en el propio plug-in.

Colaboración

Si encuentras algún error en el funcionamiento o código fuente del plug-in, o si tienes alguna idea o necesidad para añadirle más funcionalidades al plug-in, por favor, no dudes en ponerte en contacto conmigo en mi formulario de contacto

Cómo incluirlo en Joomla

Para añadir el plug-in en Joomla tan sólo tienes que seguir estos pasos:

  1. Descomprimir la última versión del plug-in en el siguiente directorio:
    dir_instalacion_Joomla/media/editors/tinymce/jscripts/tiny_mce/plugins/
  2. Una vez descomprimido, asegúrate de que el directorio del plugin tenga permisos de lectura por parte del servidor web (permisos 755).
  3. Accede a la parte de administración de tu Joomla y haz de ir a Extensiones -> Gestor de plugins -> Editor – TinyMCE
  4. En “Opciones básicas” asegúrate de que la Funcionalidad esté en “Extendida”.
  5. En el bloque “Parámetros extendidos”, en la parte final, en el campo “Plugin personalizado” añade “improvedcode”
  6. Añade “improvedcode” en el campo “Botón personalizado”
  7. Guarda los cambios

Con estos pasos ya deberías tener disponible el botón “HTML+” que lanza el editor HTML de ImprovedCode.

You can read the English version of this post in http://phpsblog.agustinvillalba.com/improvedcode-new-plug-tinymce/


You can read the English version of this post in http://phpsblog.agustinvillalba.com/javascript-difference-null-undefined/

Programando en JavaScript, seguramente todos alguna vez nos hemos encontrado en la situación de tener que ejecutar un bloque de código u otro dependiendo de si una variable es “null” o “undefined”. Hoy vamos a analizar la diferencia que existe en JavaScript entre “null” y “undefined“, dado que hemos de ser muy cuidadosos a la hora de compararlos.

“undefined” en Javascript

En primer lugar, para poder hablar de null y undefined en Javascript hemos de tener claro que “undefined” es un tipo de dato, al igual que lo son el Number, String, Boolean, Object o el Array. En Javascript, a diferencia de otros lenguajes de programación con fuerte tipado, podemos tener variables de tipo “undefined”. A priori puede sonar un poco extraño, pero si lo pensamos un momento, tiene sentido dado que Javascript, al ser un lenguaje débilmente tipado, nos permite declarar variables sin especificar de qué tipo serán los valores que contenga. De esa forma, Javascript considerará a la variable de un tipo de dato u otro en función de su contenido, por ejemplo:

var number1 = 123; // Tipo Number
var number2 = "123" // Tipo String
var number3;

En vista de que la variable “number3” no tiene un valor asignado, ¿de qué tipo es? Dado que todas las variables han de tener siempre un tipo, en este caso Javascript considera la variable “number3” de tipo undefined.

En resumen, en Javascript, todas aquellas variables que no han sido definidas (por lo tanto, no existen) o que han sido definidas sin asignárseles un valor, son siempre de tipo undefined.
(más…)


You can read the English version of this post in http://phpsblog.agustinvillalba.com/javascript-css-minified-carabiner-codeigniter/

Hoy vamos a hablar de una potente librería disponible para el framework CodeIgniter, es: Carabiner. Esta librería nos permite incluir de forma específica para cada vista de nuestro sitio los archivos JavaScript y CSS que son necesarios, ahorrándonos tener que incluirlos todos, y además, los envía al usuario en un único archivo “.js” y “.css” con todos los que hemos ido incluyendo pero minimizados, con lo que el tamaño del “.js” y “.css” que se envía al usuario es mucho menor, con la consiguiente mejora de tiempo de carga del sitio que ello implica.

Instalando Carabiner en nuestro proyecto

Lo primero para instalar Carabiner en nuestro proyecto es descargarlo, podemos hacerlo desde su hilo en el foro de CodeIgniter. Para instalarlo simplemente hemos de colocar los archivos carabiner.php, cssmin.php y jsmin.php en el directorio /application/libraries de nuestro proyecto. Una vez hecho esto, hemos de colocar el archivo de configuración carabiner.php en el directorio application/config. En este archivo hemos de especificar la ruta de los directorios que contendrán nuestros archivos “.js” y “.css”.
(más…)


You can read the English version of this post in http://phpsblog.agustinvillalba.com/upload-progress-bar-in-codeigniter-without-flash/

Hoy vamos a ver cómo podemos crearnos una barra de progreso de subida de archivos en CodeIgniter sin la necesidad de recurrir a librerías o plug-ins hechos en Flash (del tipo SWFUpload, etc) que escapan a nuestro control, dado que habitualmente estas librerías nos ofrecen los archivos .swf ya compilados, por lo que nos es imposible modificar nada en ellos, en el caso de que tengamos conocimientos de programación en ActionScript 2 o 3.

Antes que nada hemos de decir que crear una barra de progreso de subida de archivos en PHP no es tan sencillo como pudiera parecer. El primer problema es que las versiones de PHP anteriores a la 5.2 no ofrecen las herramientas necesarias para poder ofrecer información sobre cómo la subida del archivo en cada momento. El segundo problema es que AJAX, por sí solo, no nos permite consultar el estado de la subida del archivo, dado que, por razones de seguridad obvias, JavaScript no tiene acceso a los archivos del sistema operativo del cliente, por lo que necesitaremos un “truco” utilizando un iframe.

(más…)


You can read the English version of this post in http://phpsblog.agustinvillalba.com/scrollto-jquery-plug-in-css/

Hoy vamos a hablar un poco del plug-in para jQuery scrollTo y su dependencia “oculta” con la carga de nuestros archivos CSS.

scrollTo de jQuery

El plug-in scrollTo de jQuery (desarrollado por Ariel Flesler) nos permite que nuestra página web realice un scroll (desplazamiento de la barra vertical) hasta cualquier elemento de nuestro documento web que necesitemos, de esta forma podemos centrar la atención del usuario en dicho elemento cada vez que se recarga la página (por ejemplo, una entrada del menú de la izquierda en nuestra web), evitándole al usuario tener que hacerlo él manualmente. En la web del proyecto del plug-in podrás encontrar toda (o casi toda) la documentación necesaria para integrarlo en tu proyecto web. De más está decir que para poder utilizarlo has de incluir también en tu proyecto el propio framework JavaScript jQuery. A este plug-in que tan útil me ha sido sólo le encontré un pequeño fallo de documentación…
(más…)


You can read the English version of this post in http://phpsblog.agustinvillalba.com/bug-fix-imageflow-1-3/

Hoy vamos a solucionar un bug que encontré en la actualización de ImageFlow, pasando de la versión 1.2.1 a la 1.3. La nueva versión, pretende entre otras cosas solucionar el problema que había en Internet Explorer cuando únicamente había una imagen en la galería. Este problema era que no se mostraba nada si sólo teníamos una imagen en la galería en IE. Pues bien, la versión 1.3 ya muestra la imagen si sólo tenemos una, pero si además esa imagen tiene un “caption” (pie de foto), pues resulta que el caption no nos los muestra, ni en Internet Explorer ni en ningún otro navegador. Pues bien, aquí les dejo la solución al bug para aquellos que deseen (y se atrevan) a meterle mano al código de la librería.

Solucionando el bug

Para solucionar el problema hemos de abrir el archivo imageflow.js que nos encontramos en el .zip que nos hemos descargado. Vamos a la línea 526 aproximadamente donde nos encontramos el siguiente bloque de código:
(más…)


You can read the English version of this post in http://phpsblog.agustinvillalba.com/swfupload-codeigniter/

En esta entrada vamos a explicar un poco qué es y cómo podemos utilizar la librería SWFUpload en nuestra aplicación hecha con el framework php CodeIgniter para que nuestros usuarios puedan subir sus archivos a la aplicación de una forma elegante y muy visual, y todo ello combinado con la seguridad y facilidad que nos ofrece CodeIgniter para la subida de archivos al servidor.

Qué es SWFUpload

SWFUpload es una librería que permite a los usuarios de nuestro sitio subir archivos al servidor, mediante la combinación de Flash y JavaScript. Aquí pueden ver unos ejemplos de uso de la librería.

Integrando SWFUpload en CodeIgniter

Lo primero que necesitamos para integrar la librería es, lógicamente, descargarla. Necesitaremos descargarnos el archivo de “core” y los “samples”. Una vez la tenemos descargada y descomprimida, crearemos una carpeta en el directorio raíz de nuestra aplicación CodeIgniter llamada swf/, y dentro de esta a su vez crearemos otra llamada swfupload/, de tal forma que la ruta a nuestra librería SWFUpload es /swf/swfupload/. En este último directorio colocaremos los archivos “swfupload.swf” y “swfupload_fp9.swf” (este último para los usuarios con Flash Player 9) que encontraremos en la carpeta del “core”. Bien con esto tenemos los swfs en su sitio.
(más…)