Source: http://www.spcripter.com/
Timestamp: 2014-10-25 10:08:45+00:00

Document:
Spcripter - >
Spcripter Buscar... InicioExtensionesTemplatesMapa Contacto
PrevNext Colorear código en joomla Buscando alguna extensión de joomla que me permitiera colorear código para mostrarlo en el blog he descubierto algo que posiblemente muchos joomleros ya sabrán pero que yo desconocía, joomla ya dis...	Mi primera plantilla para joomla 3.0 Ya esta disponible en la sección templates de la web mi primera plantilla para joomla 3.0. Blogus, es una plantilla responsiva, esto es, que se adapta a la resolución de cualquier dispositivo, puesto ...	Nueva plantilla Grayslider Grayslider es una plantilla para joomla que cuenta con un vistoso banner jquery con múltiples opciones de configuración disponibles desde su menú de administración, además, este template también cu...	Aprovechando bootstrap en joomla 3.0 (Parte 1) Voy a empezar por algo simple pero que hasta que no lo sabes te quita muchas opciones de personalización en tu web de joomla 3, se trata de personalizar los botones de los menús haciendo referencia a ...	Curiosidades de las posiciones fijas. Centrar position:fixed o adaptarlo al resto del contenido a nuestro... Googleando he encontrado diversos artículos acerca de como centrar una posición fixed, la idea básicamente es fijarlo al 50% de la pantalla y restarle la medida del div a centrar con un margin, per...	Poner una imagen como fondo de web que se adapte a cualquier resolución con Jquery... En esta ocasión y para dar continuidad al anterior articulo de como poner una imagen como fondo de web que se adapte a cualquier resolución con css, expondré como hacer lo mismo con jquery. La difere...	2
Martes, 21 Mayo 2013 18:57	Curiosidades de las posiciones fijas. Centrar position:fixed o adaptarlo al resto del contenido a nuestro gusto.	Googleando he encontrado diversos artículos acerca de como centrar una posición fixed, la idea básicamente es fijarlo al 50% de la pantalla y restarle la medida del div a centrar con un margin, pero la cuestión es que jugando con estos valores en el código, podemos fijar este div al centro o a cualquier otra posición y hacer que se desplace acorde con el resto de la web aunque esta se encuentre en relativo. A continuación voy a poner algunos ejemplos para mostrar las posibilidades de este truquillo:
Esta es la idea general extraída de otros internautas:
Supongamos que tenemos un div de unos 200px de ancho y queremos centrarlo abajo de la pantalla a 20px de forma fija, para ello usaríamos el siguiente código css situándolo a la mitad de la pantalla y desplazándolo a la izquierda la mitad de su tamaño.
#centrado&#123;
Ahora bien, de esta manera también podríamos poner el div a la izquierda de la pantalla pero de forma que se situara en una esquina del div superior en cualquier resolución jugando con los margenes.
#div_superior&#123;
Si tenemos un div de 900px de ancho centrado como este de arriba tendriamos que modificar el div fijo de la siguiente forma para que siempre se situara en la esquina inferior izquierda de esta.
#centrado_izquierda&#123;
La cuestión es que siempre quedaría en esa posición con respecto al div relativo a pesar de la resolución, lo cual abre un mundo de posibilidades. Dejo un ejemplo para mostrar el efecto: DEMO
ejemplo3.rar	(284 Descargas)
¡Escribe el primer comentario!	Leer más ...	Jueves, 16 Mayo 2013 16:43	Colorear código en joomla	Buscando alguna extensión de joomla que me permitiera colorear código para mostrarlo en el blog he descubierto algo que posiblemente muchos joomleros ya sabrán pero que yo desconocía, joomla ya dispone de un plugin para presentar y colorear código llamado geshi. Geshi es una clase en php creada para generar sintaxis coloreada disponible en todas las versiones de joomla.
Estos son los que vienen por defecto con joomla pero podemos ponerle infinidad de lenguajes disponibles en su web: http://qbnz.com/highlighter/ Modo de uso
Buscar el plugin geshi en el gestor de extensiones de joomla y activarlo ya que por defecto viene desactivado y después en el articulo poner el código que queramos colorear entre las etiquetas <pre xml:lang="lenguaje"> </pre>
#contenido &#123;
Si no gusta como queda también se pueden personalizar los colores de la siguiente forma:
Entramos dentro de nuestro joomla en "plugins/content/geshi/geshi/geshi" y seleccionamos el lenguaje al que queramos cambiar los colores, en este caso css. (ojo la ruta puede variar en función de la versión de joomla, la cuestión es llegar a la carpeta donde se almacenan los archivos php para los diferentes lenguajes dentro del plugin geshi)
Abrimos el archivo a cambiar, en este caso css.php
Buscamos lo que queremos cambiar, por ejemplo las llaves, y modificamos el color:
0 =&gt; 'color: #00AA00;'
Simplemente cambiamos el código de color y..
..ahora las llaves son azules al mostrar css.
¡Escribe el primer comentario!	Leer más ...	Martes, 07 Mayo 2013 17:38	Nueva plantilla Grayslider	Grayslider es una plantilla para joomla que cuenta con un vistoso banner jquery con múltiples opciones de configuración disponibles desde su menú de administración, además, este template también cuenta con un menú desplegable para mostrar submenus. En la ultima versión también es compatible con joomla 3.
La demo de la plantilla así como su descarga se encuentra en la sección templates, accesible desde AQUÍ También es posible descargarla directamente desde este mismo articulo.
grayslider.zip	(327 Descargas)
¡Escribe el primer comentario!	Leer más ...	Lunes, 11 Marzo 2013 00:25	Galería jquery usando backstretch	En mi ultimo proyecto la necesidad de usar una galería a pantalla completa me ha hecho redescubrir este plugin de jquery, que aunque pueda parecer un background escalable en realidad es mucho mas. A continuación explicare como montar una galería aprovechando las características de backstretch. Podéis descargarlo de aquí: http://srobbin.com/jquery-plugins/backstretch/
Comenzare por la estructura html del ejemplo:
&lt;li&gt;&lt;a href=&quot;#&quot; id=&quot;imagen1&quot;&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; id=&quot;imagen2&quot;&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; id=&quot;imagen3&quot;&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; id=&quot;imagen4&quot;&gt;&lt;/a&gt;&lt;/li&gt;
&nbsp; Es una lista normal y corriente en la que identifico los enlaces para poder hacer referencia a ellos mas tarde desde backstretch y ponerles su correspondiente thumbnail.
Ahora vamos con los estilos para que esta galería tome forma y posición:
#galeria&#123;
background-color: rgba&#40;247, 236, 236, 0.50&#41;;
#galeria ul&#123;
#galeria ul li&#123;
#galeria ul li a&#123;
#imagen1&#123;
background: url&#40;imagen1_tb.jpg&#41; no-repeat center;
#imagen2&#123;
background: url&#40;imagen2_tb.jpg&#41; no-repeat center;
#imagen3&#123;
background: url&#40;imagen3_tb.jpg&#41; no-repeat center;
#imagen4&#123;
background: url&#40;imagen4_tb.jpg&#41; no-repeat center;
Básicamente aquí lo que hago es fijar la galería abajo a la derecha y darle forma, también añado un fondo blanco con opacidad y unas sombras a las miniaturas para que estas se vean bien.
y finalmente la parte del script:
$.backstretch&#40;&#91;
&quot;imagen1.jpg&quot;
, &quot;imagen2.jpg&quot;
, &quot;imagen3.jpg&quot;
, &quot;imagen4.jpg&quot;
&#93;, &#123;duration: 5000, fade: 2000&#125;&#41;;
$&#40;&quot;#imagen1&quot;&#41;.click&#40;function&#40;e&#41; &#123;
$.backstretch&#40;'imagen1.jpg'&#41;;
$&#40;&quot;#imagen2&quot;&#41;.click&#40;function&#40;e&#41; &#123;
$.backstretch&#40;'imagen2.jpg'&#41;;
$&#40;&quot;#imagen3&quot;&#41;.click&#40;function&#40;e&#41; &#123;
$.backstretch&#40;'imagen3.jpg'&#41;;
$&#40;&quot;#imagen4&quot;&#41;.click&#40;function&#40;e&#41; &#123;
$.backstretch&#40;'imagen4.jpg'&#41;;
En la primera llamada a backstretch lo que hago es pasarle todas las imágenes para que al iniciar la web los fondos vayan cambiando (usa solo esta parte si lo que quieres es un fondo cambiante sin galería ), "duration = 5000" es el tiempo que las imágenes estarán en pantalla en milisegundos y "fade = 2000" el tiempo que durara la transición de una imagen a otra, en esta caso 5 y 2 segundos respectivamente.
Las funciones posteriores lo que hacen es capturar el evento onclick de los enlaces, en este caso las miniaturas, para que backstretch únicamente muestre la imagen que corresponda a esa miniatura. Al hacerlo la velocidad de transición sera igual que la que hayamos puesto mas arriba en "fade" a no ser que también le pongamos un "fade" a estas funciones así:
&#93;, &#123;fade: 1000&#125;&#41;;
Y así es como conseguimos hacer una galería con el fondo de pantalla: DEMO Adjunto ejemplo mas abajo para su descarga. Hasta la próxima.	Tweet	Publicado en
galeria_backstretch.rar	(373 Descargas)
¡Escribe el primer comentario!	Leer más ...	Martes, 05 Marzo 2013 13:45	Mi primera plantilla para joomla 3.0	Ya esta disponible en la sección templates de la web mi primera plantilla para joomla 3.0. Blogus, es una plantilla responsiva, esto es, que se adapta a la resolución de cualquier dispositivo, puesto que aprovecha la integración del bootstrap de twitter de esta nueva versión de joomla. Es un template muy configurable desde el gestor de plantillas con múltiples opciones para cambiar los colores, ademas he incluido una opción para cambiar el fondo de pantalla por la imagen que se desee, la cual también se adapta a la resolución. En cuanto a su configuración las posiciones se disponen en forma de blog.
Accede a la demo y descargala desde la sección templates pinchando AQUI La propia plantilla también se puede descargar con el enlace que hay al final de este articulo. Para cualquier duda los comentarios están abiertos, me gustaría saber que tal funciona. Salu2
blogus.zip	(352 Descargas)
2 comentarios	Leer más ...	Martes, 26 Febrero 2013 00:00	Poner una imagen como fondo de web que se adapte a cualquier resolución con Jquery	En esta ocasión y para dar continuidad al anterior articulo de como poner una imagen como fondo de web que se adapte a cualquier resolución con css, expondré como hacer lo mismo con jquery. La diferencia entre las dos formas de hacerlo radica en que de esta manera obtendremos compatibilidad con internet explorer.
En primer lugar descargaremos el plugin backstretch de aqui:
Después de descomprimirlo tomaremos el archivo jquery.backstretch.min.js y lo copiaremos en la carpeta de nuestro proyecto.
El siguiente paso es incluirlo entre las etiquetas <head></head> de la pagina donde queremos tener el fondo sin olvidar incluir también la librería Jquery puesto que este plugin usa sus funciones. No es necesario descargar también la librería Jquery puesto que la podemos incluir directamente desde Google Code como se muestra en el ejemplo:
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.backstretch.min.js&quot; &gt;&lt;/script&gt;
Finalmente solo nos queda llamar al plugin cuando el documento termine de cargarse por lo que tendremos que hacerlo justo antes de la etiqueta </body> de la siguiente forma:
$.backstretch&#40;&quot;background.jpg&quot;&#41;;
DEMO	Tweet	Publicado en
ejemplo2.rar	(331 Descargas)
¡Escribe el primer comentario!	Leer más ...	Lunes, 25 Febrero 2013 19:24	Poner una imagen como fondo de web que se adapte a cualquier resolución con css	Un problema habitual en desarrollo web es el escalado de imágenes al usarlas como fondo de pantalla dada la gran cantidad de resoluciones existentes. La solución es bastante simple usando css, si bien no es valida para los usuarios de explorer, para los que tendremos que usar jquery, solución que detallare en el próximo articulo.
Con css usaremos la propiedad “background-size: cover” en nuestra hoja de estilos o directamente en el HTML insertando el código entre las etiquetas <style></stiye> como muestro a continuación:
background: url&#40;background.jpg&#41; no-repeat center center fixed;
Puedes comprobar como quedaría pinchando aquí abajo o descargar el ejemplo adjunto al articulo.
ejemplo.rar	(405 Descargas)
3 comentarios	Leer más ...	Jueves, 21 Febrero 2013 17:04	Aprovechando bootstrap en joomla 3.0 (Parte 1)	Voy a empezar por algo simple pero que hasta que no lo sabes te quita muchas opciones de personalización en tu web de joomla 3, se trata de personalizar los botones de los menús haciendo referencia a las clases del bootstrap de twitter incluido en este paquete de joomla. Debido a esto podemos usar las características de este framework en nuestras creaciones, algunas de ellas sin necesidad de tocar el código, simplemente usando el menú de administración como os voy a mostrar a continuación.
Vamos a tomar una instalación joomla 3 con datos de ejemplo, si nos fijamos en los botones del menú superior estos son característicos de bootstrap, esta clase según su documentación se llama nav-pills y podemos verla en su web en la siguiente dirección, en el apartado navs:
Como podemos observar investigando la web de bootstrap hay diferentes estilos de botón así como muchos otros controles mas complejos, los cuales pueden ser usados en joomla 3, para ello entraremos en el menú de administración y en extensiones - módulos buscaremos el modulo tipo menú que queremos modificar, en mi caso el modulo "top" y en la pestaña "opciones avanzadas" modificaremos la casilla donde pone "sufijo clase de menú" añadiendo la clase que queremos, o dicho de otro modo, pondremos el nombre del botón que nos interesa. Ojo es MUY IMPORTANTE añadir un espacio en blanco delante de la palabra al añadirla a la casilla para que funcione correctamente, como se puede apreciar en la captura del ejemplo.
Lo único que tenemos que hacer es sustituir ese "nav-pills" por "nav-tabs" por ejemplo y nuestro menú pasara a ser de pestañas como por arte de magia, con lo que este quedaría de la siguiente forma:
Para finalizar, recordar, por si alguien no lo sabe, que en la pestaña anterior de ese mismo modulo menú, "opciones básicas" , podremos determinar que pestaña o botón queremos que aparezca activada o si queremos que vayan activándose o desactivándose según la pagina en la que nos encontremos mediante el desplegable "elemento base". Tweet	Publicado en
¡Escribe el primer comentario!	Leer más ...	Mientras tanto en No solo Css..
Mostrar sólo el título de cada página en wordpress con Yoast SEO	Mostrar sólo el título de cada página en wordpress con Yoast SEO
Si usas Wordpres de forma habitual y cuidas el SEO de tu blog seguramente ya tengas instalado Yoast Wordpres SEO, uno de los mejores plugin, si no el mejor para gestionar el SEO en Wordpress. La cuestión es que este[…]	Ventanas emergentes con jquery ui	Ventanas emergentes con jquery ui
En diversas ocasiones durante el desarrollo de una web es necesario mostrar ventanas con mensajes de aviso, imágenes o cualquier otro contenido, dejando en un segundo plano la web o aplicación, esto es posible usando javascript pero es mucho mas[…]	Como crear pestañas o tabs usando solo CSS	Como crear pestañas o tabs usando solo CSS
En esta entrada voy a mostrar como crear una serie de pestañas o tabs como las que se muestran en el ejemplo. Para ello voy a usar "radio buttons" para simular el evento onclick y poder cambiar de una pestaña[…]	Junio 2013 (1) Mayo 2013 (4) Marzo 2013 (2) Febrero 2013 (3) bootstrap	botones	centrado	codigo	css	desarrollo web	fixed	galeria	geshi	guia	joomla	jquery	menu	php	plantillas	plugin	slider	templates	© Agustín Baraza 2014 - Desarrollo web y programación.

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución