27 Nov

Jquery Tips (Metodos)

Codigo Fuente

Después de aprender a seleccionar con jquery los elementos del documento html por medio de los selectores anteriormente comentados, esa importante saber que hacer con estos, por lo cual vamos a ver como aplicar métodos a un elemento seleccionado.

Ejemplos de aplicación de métodos con jquery


// Aplica propiedad CSS al elemento seleccionado 
$(". className"). css(" border", "1px solid red"); 

// Aplica CSS de un elemento usando un objeto
$(". className"). css({" border": "1px solid red"}); 

// Aplica dos CSS a los objetos seleccionados 
// (notese que este ejemplo usa una notación de objeto para el caso de las propiedades que 
// se desean establecer por medio del método CSS de jquery, por esta razon se 
// puede usar para aplicar mas de una propiedad) 
$(". className"). css({ "color": "red", "font-weight": "bold" });

// Esconde la segunda fila de la tabla
$(" table tr:nth-child( 2)"). hide(); 

// Convierte la lista < ul id = "list" > en una lista ordenable 
$(" ul# list"). sortable(); 

// Selecciona todos  los elementos y los filtra usando el metodo "is" 
$("*"). is(" p"); 

// El metodo "is" es usado con la variable "this" dentro de los callback para poder indetificar su tipo
$(this). is("div"); 

// Selecciona un elemento y con el metodo "parent" selecciona el elemento padre 
$("p#short"). parent();

// Selecciona todos los inputs si estos tienen como padre el elemento "form"  
$(" input"). parent(). is(" form"); 

// Selecciona y aplica el estilo CSS, limpia la cola, hace una nueva seleccion y aplica nuevo CSS, en otras palabras los elementos 

quedan con fuente de color azul y los elementos quedan con fuente de color rojo 
$(" p"). css(" color", "blue"). end(). add(" b"). css(" color", "red"); 

// si se hace sin el metodo "end" entre los elementos ambos quedan con fuente de color rojo.
$(" p"). css(" color", "blue"). add(" b"). css(" color", "red");

27 Nov

Jquery tips (Selectores)

Codigo Fuente

JQuery es sin duda el framework javascript mas popular en la web, por esto en ocasiones es importante tener a la mano información que aunque es básica, nos ayudara a resolver varios problemas.

Empecemos con lo basico

$(" div");

Es lo mismo que

jQuery(" div");

selectores

// Selector por tag
$("body"); 

// Selector por id del elemento 
$("# id"); 

// Selector por clase del elemento 
$(".className"); 

// Selector usando pseudo-selector CSS :nth-child 
$(" div:nth-child( 2)"); 

// Selector de todos los elementos del documento html 
$("*"); 

// Selector de todos los elementos párrafo
$("p"); 

// Selector para párrafos spans y divs 
$("p, span, div"); 

// selector de párrafo con id 
$(" p# short");

// selector de div con clase
$(" div.option"); 

// Selector con elemento y pseudo-selector :first o :last
$(" p:first"); 
$(" p:last"); 


// Selector con elemento y pseudo-selector nth-child (nos permite seleccionar cualquier posición de una lista de elementos )
$(" p:nth-child( 1)"); // primero
$(" p:nth-child( 2)"); // segundo
$(" p:nth-child( 3)"); // tercero

// Selector con elemento y pseudo-selector nth-child con palabras clave even o odd
// even para seleccionar todos los pares 
// odd para seleccionar los impares
$(" p:nth-child( even)"); 
$(" p:nth-child( odd)"); 

// Selector con los paréntesis cuadrados para seleccionar cualquier elemento con un atributo llamado "xxx"
$("[xxx]"); 

// Selector para seleccionar todos los párrafos hijos pero solo después de cualquier elemento con clase "s"
$(".s ~p"); 

// Selector para los inputs de type definido ejemplo tipo "text"  
$(" input[ type = text]");

// Selector para todos los checkbox seleccionados usando el selector de atrubuto [] o el psudo-selector :checked, selector que tambein sirve para los radio buttons 
$(" input:checked"); 

// Selector poara seleccionar solo checkboxes 
$(" input[ type = checkbox]: checked"); 

// Selector para todos los elementos inputs contenidos en el elemento form
$("form input"); 

// Selector para todos los elementos a dentro de la tabla 
$("table tr td a"); 

Aqui terminan los tips de selectores.

28 Ago

Recursos y webs para aprender Jquery, CSS y HTML5

Code Academy

Codeacademy es una web que ofrece una manera diferente a lo que estamos acostumbrados ver en internet, en cuanto a webs de aprendizaje o tutoriales, pues ofrece variedad de cursos online en donde puedes ir aprendiendo paso a paso, ideal para los que quieren comenzar a avanzar en el mundo del desarrollo web.

La gran diferencia de esa web es que puedes ir practicando y escribiendo código en la misma página, la web se encarga de revisar que este bien desarrollada la lección.

http://www.codecademy.com

Libros Web

Excelentes manuales de CSS, AJAX, Javascript, y Symphony, la primera vez que visite esta web los libros se iban actualizando, ya que algunos no estaban terminados del todo, pero hoy en día ofrece manuales completos y los puedes descargar en pdf ompletamente gratis.

lenguaje es bastante comprensible, si eres principiante veras que son muy fácil de entender, y también para usuarios avanzados.

http://librosweb.es/

Guía completa de CSS3

Tal cual lo dice el titulo, una guía completa de CSS3, muy bien explicada, con ejemplos. Esta guía la puedes descargar gratuitamente de la pagina del autor, lo único que debes hacer es colocar un tweet para que descargues el pdf.

Esta web también la recomiendo ya que contiene articulos de diseño y tutoriales, como lo dice en su web Antonio Navajas :» director artístico, desarrollador web y diseñador de experiencias de usuario. Se puede decir que soy de la generación que vive intensamente internet y estoy 24/7 conectado. Busco el mejor resultado, por lo que siempre entrego una parte de mi alma en cada proyecto.»

http://www.antonionavajas.com/

Cristalab

Web dedicada al aprendizaje, contiene numerosos tutoriales de diferentes temas enfocados a la web, si quieres aportar con tus conocimientos puedes registrarte y tener un rankin dependiendo tus post.

John Fredy Vega (@freddier) es el fundador, tambien es conocido por ofrecer numerosos cursos presenciales, yo he asistido a un par de ellos, y la verdad aprenderas muchas cosas, ya que tiene una metodologia que se basa en» lo que se esta manejando» actualmente,  con tips y situaciones del mundo real.

«Cristalab es una comunidad de entusiastas, novatos, expertos y emprendedores de Internet. Enseñamos, aprendemos y compartimos el conocimiento de todos» -Cristalab.

Bueno, como punto aparte, y que no se note la «publicidad»;la caricatura mostrada fue cortesia de nosotros (http://www.iguazoft.com), la cual tiene un origen que puedes ver en nuestro post: Caricatura de @freddier.

http://www.cristalab.com/

Maestros del Web

Maestros del Web (creada por @cvander) junto con Cristalab son unas de las comunidades web reconocidas, que se han preocupado por temas acerca del desarrollo de la web y sus estándares, para llevar todo de la mejor manera.

Estos dos «pesados» de la web tienen un «programa» en vivo que es mejorando la Web en donde se hablan de diferentes temas, novedades, nuevas tecnologias y sobre todo nos ayudan a manejar y conocer los estándares.

Acá puedes encontrar pdfs gratuitos.

http://www.maestrosdelweb.com/

Jquery Essentials

Es una presentación de 115 slides en donde e enseñan desde lo básico y hacen una comparativa con la sintaxis de javascript nativo, en donde te podrás dar cuenta que es más sencillo trabajar con jquery. Muy recomendado

http://marcgrabanski.com/articles/jquery-essentials-slideshow

Tutoriales de diseño y maquetacíon Web

RAYMI es una maquetadora web, me entere de ella gracias a Cristalab (http://www.cristalab.com), ella ofrece variados tutoriales desde su web referentes a la maquetación, incluyendo diseño. Incluye tambien maqueación para wordpress.

Tiene una manera muy didáctica de explicar, de manera que es apropiado para las personas que estén comenzando en maquetación.

http://raymicha.com/

23 Jul

Checks y radio buttons personalizados con jquery

Checks y Radios en jquery.

Llevo un tiempo practicando con jquery, y  me vi en la necesidad de colocar unos forms personalizados, algunos de los que hay en la nube no soportan eventos como los «onClick», pero estos si soportan cualquier tipo de evento.  Son compatibles en todos los navegadores, pueden personalizarlos con la imagen que gusten, es un sprite de 36×36 con los 4 estados de los botones.
Leer más