Archive for the ‘ javascript ’ Category

Minifyme, como comprimir código javascript y css


comprimiendo código javascript y css

la velocidad de la carga de una web a veces, cuando no todas, resulta un factor decisivo tanto en la navegación como en el posicionamiento, sobre todo cuando por agregarle demasiado código, la pagina resulta pesada y lenta, minifyme se convierte en una gran pequeña solución, comprimiendo código javascript y css,  reduciendo las llamadas http nesesarias para renderizar la página

minifyme, utilidad para comprimir codigo javascript y css

los 10 mejores frameworks para javascript


los diez mejores frameworks javacript

frameworks javascripts

frameworks javascripts

esta es una review de los diez mejores framworks javascript que podemos encontrar, aunque me parecen divertidos tanto jquery como mootools, mucha gente se decanta rápidamente por jquery como lo muestra el siguiente diagrama, a continuacion una lista con 10 frameworks para javascript

tendencia en el uso de frameworks javascript

colores:

jquery javascript

, yui javascript en amarillo yui javascript

dojo javascript

prototipe javascript

mootools javascript

que framework javascript elegir para empezar

como lo muestra el grafico, el framework jquery javascript es el mas popular de los frameworks javascript, aunque mootools tiene mas prestaciones y velocidad (segun slick), y prototipe es de los mas viejos,  jquery tiene a favor la gran cantidad de material como tutoriales y soporte, y en este caso si, hace la diferencia

Microsoft Adopts jQuery Javascript Library
Microsoft renews vows with JQuery Javascript

en tiempo real: http://www.google.com/trends?q=prototype+javascript%2C+jquery+javascript%2C+YUI+javascript%2C+dojo+javascript%2C+mootools+javascript&ctab=0&geo=all&date=all&sort=0

a continuacion la lista detallada de los frameworks javascript

http://www.ajaxline.com/10-most-popular-javascript-frameworks

star rating con html, php, js y un txt


Para la parte del css me he basado en el código de Komodo Media, e cual pueden encontrar aqui
Lo interesante de este script es que uso jquery y guardo la votación en un archivo de texto y así ya no requiero una base de datos

El diseño de las star rating en el form html

Las instrucciones detalladas como ya indique las pueden encontrar en Komodo Media, asi que yo me voy a limitar a copiar el código del formulario.

1
2
3
4
5
6
7
8
9
10
11
12
13
<form method=”post” action=”index.php”>
<ul class=’star-rating’>
<li class=’current-rating’ style=’width:<?php echo 25 * round($promedio);?>px;’>Currently 3.5/6 Stars.</li>
<li><a href=’#’ title=’1′ class=’one-star’>1</a></li>
<li><a href=’#’ title=’2′ class=’two-stars’>2</a></li>
<li><a href=’#’ title=’3′ class=’three-stars’>3</a></li>
<li><a href=’#’ title=’4′ class=’four-stars’>4</a></li>
<li><a href=’#’ title=’5′ class=’five-stars’>5</a></li>
<li><a href=’#’ title=’6′ class=’six-stars’>6</a></li>
</ul>
<input value=”0″ />
<input value=”Votar” />
</form>

La hoja de estilos y el grafico de las estrellas lo encuentran en el archivo zip al final del tutorial

AJAX

Ahora necesito que cuando se le de click a una estrella, esta se marque y el valor del campo hiddden “my_vote” se modifique
Para eso voy a hacer un simple javascript invocando mi librería jquery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src=”jquery-1.2.6.min.js”></script>
<script>
$(document).ready(function(){
// Detecto la estrella que es presionada
$(“li.star a”).click(function(event){
// Recojo el valor de la estrella
valor_actual=$(this).attr(“title”);
// Cambio el estilo para mostrar la estrella seleccionada
$(“li.current-rating”).css(“width”, valor_actual*25);
// Cambio el valor del campo hidden
$(“#my_vote”).attr(“value”, valor_actual);
});
});
</script>

Ya tenemos las estrellas, tambien se marcan las estrellas, ahora nos falta guardar la votación
<h2>Guardar la votación</h2>
Para eso debemos crear un archivo llamado datos.txt y deben asegurarnos que sea escribible, el codigo php requerido es:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// Verificamos si se ha votado
if (isset($_POST[‘my_vote’])) {
Abrimos el archivo datos.txt
$filename = ‘datos.txt’;
// Capturamos el valor del voto
$somecontent = $_POST[‘my_vote’].”\n”;
// Verificamos que nuestro archivo sea escribible
if (!$handle = fopen($filename, ‘a’)) {
echo “Cannot open file ($filename)”;
exit;
}
// Escribimos $somecontent en nuestro archivo
if (fwrite($handle, $somecontent) === FALSE) {
// Marcamos error de escritura
echo “Cannot write to file ($filename)”;
exit;
}
// El archivo se escribio correctamente y lo cerramos
fclose($handle);
}
//abro el archivo para lectura
$archivo = fopen (“datos.txt”, “r”);
$num_lineas = 0;
while (!feof ($archivo)) {
// Leo linea por linea las votaciones pasadas
if ($linea = fgets($archivo)){
// Guardo la cantidad de votaciones y sus valores
$num_lineas++;
$valores[$num_lineas]=$linea;
}
}
fclose ($archivo);
//print_r($valores);
// Calculo el total
$total=0;
for ($i=1; $i&lt;=$num_lineas; $i++) {
$total=$total+$valores[$i];
}
// Hallo el promedio y lo redondeo
$promedio=$total/$num_lineas;
echo “total: “.round($promedio);
?&gt;

Las 12 mejores librerias y frameworks para programación web


Las 12 mejores librerías

Esta es una lista de las 12 librerías más útiles que he encontrado y que utilizo a menudo, es una manera sencilla de utilizar la últimas tecnologias con un ahorro de tiempo considerable y resultados excelentes.
Estas librerías se basan en lenguajes como javascript,php,ajax,css…

1) Moo.fx – Su principal cualidad es que es muy ligera,más bien la podríamos definir como una diminuta libreria de efectos javascript escrita con prototype.js. Es fácil de usar,rápida y nos ofrece controles para modificar atributos como Height, Width, y Opacity con un gran rendimiento.Esta tambien optimizada para que escribas el menor código posible.

2) Rico – Una librería de uso abierto en JavaScript para crear aplicaciones amigables. Utiliza tecnologia Ajax, manejo de drag and drop , y otros muchos efectos.

3) Swat – Desarrollada por silverorange, Swat es un conjunto de herramientas open source para aplicaciones web escrito en PHP.

4) ColorCombos – ¿Quien no ha pensado nunca como una libreria de colores podria ahorrarnos cantidad de tiempo probando combinaciones?.Bien con esta aplicación podremos encontrarmultitud de combinaciones de colores solo seleccionas un color y se te mostraran diferentes combianaciones optimizadas.

5) script.aculo.us -Fácil de utilizar, compatible y potente ademas de proveerte de herramientas que dan a tu web un estilo Web 2.0.

6) Mochikit – Ligera y fácil de utilizar conseguirás resultados excelentes en muy poco tiempo.

7) Dynamic Drive CSS Library – Sin duda alguna podrás encontrar original y práctico código CSS tales como menus o botones que mejoraran el impacto visual de tu Web.

8 ) PEAR – Un framework y sistema de distribución de utilidades Php. PEAR nos ofrece complementos php agrupándolos en “Packages”.

9) DHTML Goodies – Una buena librería de scripts DHTML y AJAX.

10) dojo – Conjunto de herramientas open source JavaScript con la que obtienes resultados profesionales de manera facil y rápida.

11)jQuery es una biblioteca o framework de Javascript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el arbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web

12) MooTools es un Framework web orientado a objetos para JavaScript, de código abierto, compacto y modular. El objetivo de MooTools es aportar una manera de desarrollar JavaScript sin importar en qué navegador se ejecute de una manera elegante. MooTools aporta una API documentada más enfocada a la orientación de objetos que la implementación estándar soportada por los navegadores web.


mandame a Menéame


mandame a Fresqui


mandame a Twitter