El Comercio Digital

Webmaster Libre

Desarrollo Web con Software Libre

Estás navegando por el archivo de la categoría Codigo

PHP Quick Profiler, librería para hacer debug en PHP

php quick profiler

PHP Quick Profiler es una completa y vistosa libería con la que puedes obtener datos tan interesantes de tus aplicaciones hechas en PHP como: tiempos de carga, uso de memoria, archivos incluídos y consultas a la base de datos.

Todo el aspecto visual de la interfaz está encapsulado en la librería, de modo que no tendrás que preocuparte de agregar archivos CSS o js.

Ponerlo a funcionar en tus aplicaciones tiene algo de truco, así que si te interesa lo mejor es que te pases por su página y eches un vistazo al completo tutorial de instalación y a la demo online.

PHP Quick Profiler:
http://particletree.com/features/php-quick-profiler/

wp-phpquickprofilerY para los usuarios de WordPress que quieren optimizar el rendimiento de sus instalaciones existe un plugin, llamado WP-PHP Quick Profiler que usa una version modificada de PQP.

Con él podrás comprobar tiempos de carga y uso de la base de datos. Sólo los administradores con privilegios para activar plugins podrán verlo, aún así no se recomienda para sitios en producción ya que podría revelar información sensible.

WP-PHP Quick Profiler: http://www.zy.sg/wp-phpquickprofiler/

Vía Sentido Web

PHP

1 Comentario

ByScripts, plugins libres para MooTools

ByScripts es un pequeño sitio en el que podemos descargar tres estupendos plugins para MooTools liberados bajo licencia MIT.

Desconozco si se irá ampliando la colección pero estaría bien ¿no?. Los scripts disponibles son:

  • BySlideMenu: un plugin con el que crear menús en acordeón con bastantes opciones y un resultado vistoso y agradable.
    byslidemenu
  • ByZoomer: con él podremos permitir a nuestros usuarios hacer zoom en, por ejemplo, las imágenes de nuestra página sin interrumpir su navegación ni llevarlo a un sitio nuevo.
    byzoomer
  • ByCropper: un plugin con el que ofrecer a nuestros usuarios la posibilidad de recortar sus imágenes.
    bycropper

ByScripts: http://www.byscripts.info

Javascript, Scripts

Comenta

Glimmer, jQuery sin escribir ni una línea de código

glimmer-logo

Creo que para muchos jQuery ya es nuestra librería javascript de cabecera, es sencilla de usar y potente.

Aún así, para muchos no tan hábiles desde el lado del código siempre viene bien cualquier ayuda posible, sobre todo si convierte la tarea de crear efectos en algo tan sencillo como seguir un asistente.

Glimmer es una aplicación de escritorio para WIndows (con los fuentes disponibles así que espero que pueda compilarse para otros sistemas) que te permitirá crear menús desplegables, tooltips, rotación de imágenes y otros efectos cómodamente desde tu escritorio y sin tocar ni una línea de código.

jquery-desktop-tool

Glimmer: http://visitmix.com/Lab/Glimmer

Vía Web Resources Depot

Aplicaciones, Javascript

10 Comentarios

Soluciones libres para montar clones de Tinyurl

Para mí, el espacio para acortadores de direcciones web está claramente superpoblado. Cada dos días surge un nuevo sitio, unos con dominios más cortos, otros con alguna característica nueva…

Aún así, estoy segura que seguirán surgiendo más. Si no te has desanimado viendo la cantidad de competencia que tendrás si te introduces en este “mercado” hoy te traigo unas cuantas soluciones libres para que te pongas a lo que realmente importa: conseguir un dominio corto y bonito y montar un sitio que de gusto navegar.

En esta ocasión nos vamos a centrar en las opciones que requieren PHP y MySQL para funcionar:

  • Kissa.be: De todas las soluciones de las que vamos a hablar hoy es la más completa y la que, personalmente, recomendaría.
    Kissabe te permite ofrecer a tus usuarios redirección de url pero además les permitirá compartir fragmentos de texto, imágenes y direcciones de correo electrónico.
    Puedes descargarlo en google code y verlo en funcionamiento en http://kissa.be
  • Phurl: Muy sencillo de instalar y usar, protegido mediante captcha para evitar abusos y compatible con reCaptcha. Su punto más fuerte, para mi gusto, es el control de las direcciones que ya han sido acortadas previamente y su capacidad para acortar URL sin el prefijo http://.
    Dispone de un panel de administración muy simple desde el que podrás borrar entradas.
    http://www.hido.net/projects/phurl/
  • PHPurl: Permite a tus usuarios obtener una dirección corta aleatoria o especificar una palabra clave. Desde su panel de control podrás además obtener estadísticas de hits y direcciones ip.
    http://blondish.net/scripts/phpurl/
  • TightURL: Un script de funcionamiento muy similar a todos los anteriores pero con una ventaja importante: comprueba las direcciones que acortan tus usuarios en SURBL y URIBL para asegurarse de que tu servicio no es empleado por spammers.
    http://tighturl.com/project/

Estoy segura de que existen muchas más alternativas libres y gratuitas, a mi me gustan estas y creo que cubren casi cualquier tipo de necesidad pero ¿usáis o conocéis algún otro script que valga la pena mencionar?

PHP, Scripts

2 Comentarios

Hacks CSS para todos los navegadores

Personalmente no soy muy partidaria de usar hacks en las hojas de estilo para solucionar las deficiencias de uno u otro navegador, aún así comprendo que hay circunstancias en las que se hace necesario y siempre viene bien tener el conocimiento por si llegase ese momento.

Paul Irish nos ha ahorrado mucho trabajo haciendo una recopilación de hacks que podremos emplear para los diversos navegadores disponibles. Aquí os la dejo, con los comentarios traducidos:

/***** Hacks con selectores ******/

/* IE 6 y anteriores */
* html #uno  { color: red }

/* IE 7 y anteriores */
*:first-child+html #dos { color: red } 

/* IE 7 y navegadores modernos */
html>body #tres { color: red }

/* Navegadores modernos (IE 7 no) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 y anteriores */
html:first-child #cinco { color: red }

/* Safari */
html[xmlns*=""] body:last-child #seis { color: red }

/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { background: #FFDECE; border: 2px solid #ff0000  }
}

/***** Hacks con Atributos ******/

/* ie6 y anteriores */
#once { _color:blue }

/* ie7 y anteriores */
#doce { *color: blue } /* or #color:blue */

/* 'Navegadores Modernos' incluye IE8, estés o no de acuerdo.. :)  */

Paul además nos ha dejado una página de prueba con todos los hacks y un enlace a browsershots donde podréis comprobar como funcionan en los diversos navegadores.

CSS

8 Comentarios

tabSwitch, pestañas y sliders sencillos con jQuery

tabswitch jquery tabs

Ya hay muchos plugins y scripts con y sin jQuery para crear sistemas de pestañas y sliders con javascript, no obstante este me ha llamado la atención por la sencillez de uso y los efectos que incluye.

tabSwitch es completamente personalizable con CSS y requiere muy poco código para empezar a funcionar, además el código es muy sencillo y está bastante bien explicado para que no te cueste nada adaptarlo a tus necesidades.

El HTML debería ser algo como esto:

<div id="tabSwDisplay">
<div class="SlideTab" id="Tab0">
...
</div>
<div class="SlideTab" id="Tab1">
...
</div>
<div class="SlideTab" id="Tab2">
...
</div>
<div class="SlideTab" id="Tab3">
...
</div>
<div class="SlideTab" id="Tab4">
...
</div>
</div>

Y el javascript:

//Con este código creamos la pestaña
$('.SlideTab').tabSwitch('create', {type: 'slide', height: 300, width: 440});
//Este código sirve para movernos adelante y atrás entre las pestañas
$('.SlideTab').tabSwitch('moveStep',{step: parseInt($(this).attr('rel'))});
//Este para movernos a una determinada pestaña en base al atributo rel
$('.SlideTab').tabSwitch('moveTo',{index : $(this).attr('rel') });

tabSwitch: http://www.hieu.co.uk/blog/index.php/tabswitch/

Vía Web Resources Depot

Javascript

1 Comentario

IE 6 Update, ¿engañar a tus usuarios para que actualicen el navegador?

Veo en Anieto2k un enlace a otro “metodo infalible” para erradicar el Internet Explorer 6 y no salgo de mi asombro.

IE 6 Update
es un plugin desarrollado con jQuery que se basa en, ni más ni menos, hacerse pasar por uno de esos avisos propios del navegador y hacer creer al usuario que debe descargarse una actualización del navegador para poder visitar el sitio.

ie6update

A pesar de que la idea de hacer desaparecer el IE6 de la faz de la tierra me parece buena, tratar de engañar a los usuarios para que se actualicen no me parece que sea el camino a seguir.

Básicamente, estamos timando al usuario. Eso no es un aviso de sistema, ni mucho menos, somos nosotros usando un aviso de sistema para que hagan lo que queremos. A nadie nos gusta que nos engañen ¿Verdad? A mi me recuerda sospechosamente a esos anuncios de antivirus fraudulentos que te lanzan lo que parece una ventana de diálogo del sistema operativo para que pulses sobre su banner sin darte cuenta de lo que es.

Si queremos notificar a nuestros usuarios para que se actualicen estoy segura que hay métodos mejores, desde incluir un par de líneas de texto redactadas con cortesía mediante un comentario condicional para usuarios de IE6 hasta poner un banner de esos de “Usa Firefox”. Lo que sea siempre que no interfiera en las actividades del usuario (como los scripts que bloquean a usuarios de IE6) ni le engañe para que haga cosas que no sabe si quiere hacer (como este caso). Prefiero la aproximación de educar y dejar escoger que la de obligar e imponer.

En mi caso, como ya os he dicho mil veces, este sitio en Internet Explorer 6 se ve, feo pero se ve, no le falta nada esencial pero no está optimizado. Ese es mi acercamiento a dejar de dar soporte a IE6, siempre que se pueda claro.

Para mí el fin no justifica los medios ¿y para vosotros?

Javascript, Navegadores, Opinión

15 Comentarios

Use jQuery, galería de sitios que emplean jQuery

use jquery

Hala, una más para la lista de galerías de sitios. Esta vez es una galería de sitios que usan jQuery, por lo menos es original.

En Use jQuery la idea es recopilar sitios que usan esta librería javascript y mostrarnos cómo lo hacen. Para ello se incluyen las líneas de código correspondientes al trabajo con jQuery para que podamos ver como programan otros, aprender de ellos, de sus errores y aciertos.

El sitio viene acompañado de un blog con tutoriales y experimentos.

Use jQuery: http://usejquery.com/
Blog: http://thisblog.usejquery.com/

Vía Xyberneticos

Inspiración, Javascript

1 Comentario

ie6fixer se encarga de la compatibilidad de tus CSS con IE6

ie6fixer

Cuando vi la noticia sobre esta aplicación tuve que revisarla varias veces porque pensaba que era una broma del April’s Fools (ya sabéis, el dia de los inocentes anglosajón).

ie6fixer es una aplicación web que ojalá pronto sea innecesaria cuya finalidad es generar los correspondientes hacks para que tus hojas de estilo sean 100% compatibles con Internet Explorer 6.

Para trabajar con la aplicación simplemente copiaremos y pegaremos el código de nuestras hojas de estilo y escogeremos si queremos crear una hoja específica para ie6 que introduciremos mediante comentarios condicionales (opción recomendada) o si lo que preferimos es introducir hacks en nuestra hoja.

ie6fixer: http://www.onderhond.com/tools/ie6fixer/

Vía anieto2k

CSS, Herramientas Online

3 Comentarios

Icono personalizado para las imágenes que no cargan con Mootools

Imagen de error personalizada

Vale, el título me ha quedado un poco críptico pero básicamente la idea es que, al igual que personalizamos nuestras páginas de error 404, podamos mostrar a nuestros usuarios un icono personalizado que sustituya a esa fea X roja que suele aparecer en el navegador cuando una imagen no se encuentra disponible.

David Walsh ha creado un sencillo script con Mootools que nos permitirá darle a nuestros sitios un toque más de refinamiento, incluso cuando se produzcan errores tan molestos como que se corrompa una imagen, desaparezca del disco duro donde se encuentra o, simplemente, hayamos metido la pata al llamarla.

Use Custom Missing Image Graphics Using MooTools
Demo: http://davidwalsh.name/dw-content/image-error-moo.php

Javascript

2 Comentarios

Información:

Webmaster Libre es un blog de Alma Fernández Página alojada en Redcoruna