Nov
29
2009
2

Tron

Hoy se cumplen 240,120 horas (10,005 días) desde que se estrenara la película TRON. Eso merece una celebración.

 


Afiche Promocional

Tron


 

Trailer original – 1982


 

Trailer para VHS – 1982


 

Tron Legacy (2010) Trailer (HD)


 

Tron en wikipedia
Tron Sector – Combatiendo por los usuarios contra Sark y el programa de control maestro MCP
The GLtron Homepage – Juego Tron para linux
Ver Tron en línea

Escrito por NomikOS en: Personal |
Hoy 3 lectores.
Nov
29
2009
0

jQuery –Introducción

Bedtime reading
Creative Commons License photo credit: NatBat

Codificar en javascript siempre ha sido disgustante y fascinante la vez. Disgustante cuando te das cuenta que estas gastando demasiado tiempo haciendo debugging. Y fascinante cuando finalmente logras tu objetivo.

Cuando le sumas el problema de incompatibilidad entre navegadores y sus versiones llegar a ser muy desazonante.


Ya no más. Hace un par de trabajos en que vengo usando jQuery para:

1.- Cargar asincrónicamente (AJAX) un elemento SELECT con la lista de ciudades apropiadas a medida que se intercambia entre estados de USA.
2.- Realizar suaves desplazamientos entre secciones de una misma página a medida que el usuario los va completando.
3.- Permitir al usuario ordenar una lista de palabras simplemente arrastrando y soltando las filas de la tabla que los contiene (plugin jquery.tablednd)

Para esto no he tenido más que modificar algunos scripts encontrados por ahí o hacer rápidas consultas a la excelente documentación http://docs.jquery.com/ disponible con abundantes ejemplos y demos con sus códigos fuentes a la vista.

Esto no quiere decir que sea una herramienta para principiantes. jQuery hace uso de muchos conceptos y tecnologías. Principalmente:

1.- Programación orientada a objetos –OOP.
2.- Modelo del objeto documento –DOM.
3.- Hojas de estilo en cascada -CSS.

Un conocimiento más que básico en CSS (en especial el uso de selectores) es mandatorio para poder aplicar los métodos de jQuery a los nodos apropiados dentro del árbol jerárquico de un documento HTML.

Si eres principiante no quisiera quitarte las ganas de aprender a usar jQuery, sino todo lo contrario. Si has editado algún archivo con extensión .js y algún otro con extensión .css es suficiente para comprender código jQuery.

Existen también otras bibliotecas dedicadas a lo mismo. Fíjate en el éxito que ha tenido jQuery:

prototype javascript jquery javascript yui javascript mootools javascript scriptaculous javascript

Fuente: http://google.com/trends –compara cantidad de búsquedas en google

Muy bien, como vemos esta biblioteca –o framework– es bastante poderosa y con tanto futuro que vale la pena aprender a usarla completamente. Voy a continuar escribiendo posts basados en la mejor documentación que encuentre y en mi propia experiencia.

Tutoriales recomendados para javascript y CSS:

Antes de iniciarte en jQuery, asegurate de saber muy bien lo que se ve en las siguientes (y concisas) páginas:

Programación orientada a objetos (OOP) con Javascript –contiene gatos :)
Principios básicos de CSS
Selectores básicos
Selectores avanzados

Escrito por NomikOS en: jQuery y OOP Javascript |
Hoy 3 lectores.
Nov
29
2009
0

jQuery esencial –Parte 1

(Este posts está basado en una presentacion powerpoint hecha por Marc Grabanski)

jQuery es una biblioteca javascript diseñada para ocultar los penosos asuntos de incompatibilidades entre navegadores web al tiempo que entrega una solida y reutilizable API (Application Programming Interface).

Nota: Para usar jQuery es necesario saber lo básico de CSS (Cascade Style Sheets)

Evolución de las principales bibliotecas javascript

prototype javascript jquery javascript yui javascript mootools javascript scriptaculous javascript

Fuente: http://google.com/trends –compara cantidad de búsquedas en google

Filosofía tras jQuery

Simplificar la interacción entre HTML y javascript, es decir:

1.- Encontrar algo en HTML
2.- Hacer algo con él

Por ejemplo:

1.- Encontrar todos los elementos div
2.- Agregarles la clase foo

1
2
3
4
5
6
7
8
9
10
La instrucción jQuery:
$("div").addClass('foo');

resultaría en:
<html>
    <body>
        <div class="foo">Ejemplo</div>
        <div class="foo">jQuery</div>
    </body>
</html>

Método Factory de jQuery

Esencialmente lo que hace jQuery es proveer un objecto llamado jQuery() mediante el cual podemos acceder a todas las funciones que provee la biblioteca. Estas funciones son los métodos del objeto jQuery.

Nota: $() es un alias de jQuery().

Encontramos elementos HTML pasando los selectores CSS apropiados a $()

1
2
3
$("#myId")
$(".myClass")
$("table")

También podemos encadenar selectores:

1
$("#myId .myClass, table")

Aquí estamos llegando a todas las tablas que se encuentran dentro de todos los elementos con clase “myClass”. A su vez estos elementos con clases “myClass” deben estar dentro de un elemento con id “myId”.

Nota: Los identificadores id deben ser únicos en cada documento.

Ejemplos de selectores

La gran variedad de selectores con sus modificadores permiten llegar hasta el último rincón de un documento HTML.

1
2
3
4
5
$("#content") toma el elemento con id "content"
$("li:first") toma el primer item li
$("tr:odd") toma las filas pares de una tabla
$("a[target=_blank]") toma todos los links cuyo target es "_blank"
$("form[id=^step]") toma todos los formularios cuyo id empieza con "step"

Ejemplos en vivo de selectores en jQuery

Visita http://codylindley.com/jqueryselectors/

Más sobre el método Factory de jQuery

También podemos pasar a $() una función para ser ejecutada una vez que la página se haya cargado:

1
2
3
$(function(){
    alert("La página se ha cargado...");
});

Nota: Esto es esencialmente lo mismo que:

1
2
3
$(document).ready(function(){
    alert("La página se ha cargado...");
});

Esta útima forma es la más vista en Internet. Quizás porque explícitamente indica que se ejecutará cuando el DOM (Document Object Model) se haya cargado completamente –documento listo: $(document).ready(…)

Escrito por NomikOS en: jQuery y OOP Javascript |
Hoy 3 lectores.
Nov
28
2009
1

jQuery esencial –Presentación PowerPoint

Como una primera aproximación a jQuery veremos una presentación muy clara y concisa hecha por Marc Grabanski.

Fuente: http://marcgrabanski.com/article/jquery-essentials-presentation-minnewebcon

Escrito por NomikOS en: jQuery y OOP Javascript |
Hoy 3 lectores.
Nov
25
2009
0

Configurar subdominios en localhost

Para obtener subdominios en localhost (en servidor apache) como http://misubdominio.localhost o para instalar Wordpress MU (WP multiusuario) http://localhost.localdomain

En httpd.conf (en /etc/apache/httpd.conf o similar) agrega algo como:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<VirtualHost *:80>
ServerName localhost.localdomain
ServerAdmin nomikos@localhost.localdomain
DocumentRoot /var/www/html/
    <Directory /var/www/html/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Order allow, deny
        Allow from All
    </Directory>
</VirtualHost>

# asegúrate también de cargar mod_rewrite
LoadModule rewrite_module libexec/apache/mod_rewrite.so

En /etc/hosts especifica:

1
2
127.0.0.1       localhost
127.0.0.1       localhost.localdomain

Reinicia apache

1
root[nomikos]# service restart httpd
Escrito por NomikOS en: Linux |
Hoy 3 lectores.
Nov
24
2009
0

Perfiles y múltiples instancias en Firefox

Esto es muy útil si desarrollas extensiones para Firefox.

Perfiles

Para abrir el manejador de perfiles usa uno de los siguientes comandos

1
2
firefox -P
firefox -ProfileManager

profilemanager

Para iniciar con algún perfíl determinado –en este caso: dev

1
firefox -P dev

Múltiples instancias

Generalmenet cuando tienes abiertas varias ventanas, estas pertenecen a la misma instancia del navegador. Por eso si una se cuelga y decides matarla, todas las demás son cerradas también.
Si desarrollas o pruebas extensiones debes reiniciar el navegador a cada rato. Lo mejor es crear una instancia separada para estos trabajos con la opción -no-remote que no afecte a otras ventanas que tengas abiertas.

1
firefox -no-remote

Conclusión

La mejor manera de iniciar una instancia para trabajar es usando un perfíl (-P nombre-perfil) dedicado que use sólo un mínimo de extensiones. Las esenciales como por ejemplo firebug, dafzilla, etc… y que sea autónoma (-no-remote)

1
firefox -P dev -no-remote

No está de más conocer la opción -safe-mode que deshabilita todas las extensiones y temas en una instancia.

1
firefox -safe-mode

Hay una extensión muy útil para reiniciar rápidamente una instancia de Firefox:
QuickRestart

Agregado:

A veces puede pasar que abres el manejador de perfiles (firefox -P) y no salen todos los que habías creado! Bueno, a mi me ha pasado varias veces y era simplemente porque estaba lanzando firefox como root :\ Los perfiles se guardan en tu directorio personal de mozilla, en mi caso /home/nomikos/.mozilla/firefox –el punto frente a .mozilla significa que es un directorio oculto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
[~/firefox-extensions-dev]
[16:18:28 nomikos@zenwalk]$ ll ~/.mozilla/firefox/
total 16
drwx------ 15 nomikos users 4096 2009-11-25 15:59 3w8p16at.default
drwx------  9 nomikos users 4096 2009-11-25 16:17 7qo4m1w2.dev
drwx------  3 nomikos users 4096 2009-11-23 12:14 Crash Reports
-rw-r--r--  1 nomikos users  156 2009-11-25 02:11 profiles.ini
[~/firefox-extensions-dev]
[16:18:32 nomikos@zenwalk]$ cat ~/.mozilla/firefox/profiles.ini
[General]
StartWithLastProfile=1

[Profile0]
Name=default
IsRelative=1
Path=3w8p16at.default
Default=1

[Profile1]
Name=dev
IsRelative=1
Path=7qo4m1w2.dev
Escrito por NomikOS en: Firefox |
Hoy 1 lectores.

Powered by WordPress. Theme: TheBuckmaker. Modifications by NomikOS