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");

23 Abr

Como limpiar Floats en CSS

Quien no ha experimentado problemas al iniciar con css y se encuentra con algo como esto:

explain

Pero, qué pasa con el contenedor, si ambos objetos, tanto el contenido general como el contenido del sidebar están dentro del contenedor?

Pues para este problema es cuando nos referimos a limpiar floats, ya que tanto contenido general como  contenido del sidebar tienen propiedad float y debemos hacer un clear. Aquí te mostramos 3 posibles soluciones:

Método 1: colocar un elemento justo antes de cerrar el contenedor (solución «clásica»)

clasicClear

Esta es una solución clásica, o una de las primeras soluciones, consiste en colocar algún elemento, ya sea un <div> o un <br> por ejemplo, con un clear:both:

HTML:

<div id="contenedor">

 <section class="left">
 <h3>Contenido General</h3>
 </section>

 <aside class="right">
 <h3>Contenido Sidebar</h3>
 </aside>

 </div>

CSS:

#contenedor{
 border: 2px solid #CFC4BA;
 color: white;
 display: block;
 font-size: 13px;
 margin:0 auto;
 padding: 5px;
 width: 600px;
 margin-top: 10px;
 }
 #contenedor .left{
 background: #9ED233;
 display: block;
 float: left;
 text-align: center;
 width: 69%;
 }
 #contenedor .right{
 background: #5EACC6;
 display: block;
 float: right;
 text-align: center;
 width: 30%;
 }
 .limpiar{
 clear: both;
 content: "";
 display: block;
 }

Método 2: Overflow Hidden

Captura de pantalla 2014-04-22 a las 23.44.05

Overflow hidden en el contenedor es una mejor solución, no tenemos que crear un div o elemento para limpiar floats, esto se debe a que overflow recalcula el contenido de la caja y nos da una alternativa de limpiar los float.

DESVENTAJA: la única desventaja es que si tenemos algun elemento detro de ·contenedor con posicion absoluta, de manera que se salga del contenedor, se va a cortar la información, ya que overflow hidden actua como si fuese una mascara de la información.

HTML:

<div id="contenedor">

 <section class="left">
 <h3>Contenido General</h3>
 </section>

 <aside class="right">
 <h3>Contenido Sidebar</h3>
 </aside>

 </div>

CSS:

#contenedor{
 overflow:hidden;
 border: 2px solid #CFC4BA;
 color: white;
 display: block;
 font-size: 13px;
 margin:0 auto;
 padding: 5px;
 width: 600px;
 margin-top: 10px;
 }
 #contenedor .left{
 background: #9ED233;
 display: block;
 float: left;
 text-align: center;
 width: 69%;
 }
 #contenedor .right{
 background: #5EACC6;
 display: block;
 float: right;
 text-align: center;
 width: 30%;
 }

Método 3: Clear con pseudoclases (para mi la mejor)

pseudo

Una pseudoclase, en este caso :after o : before actua como si crearamos un elemento pero por css. Es decir no lo vamos a ver en el html, pero CSS si lo va ainterpretar como otro elemento.

En la grafica anterior tenemos el div contendor. Dependiendo de la pseudoclase que usemos nos creara un elemento antes o despues del contenido.

En este caso necesitamos crearlo despues del contenido, justo antes de cerrar el div del #contenedor

#contenedor:after{
clear: both;
content: "";
display: block;
 }

Aca le decimos a ese objeto creado que tenga un contenido vacio (content:»») y claro esta un clear:both. y ya esta!, puedes ver el funcionamiento en este ejemplo:

#contenedor{
 border: 2px solid #CFC4BA;
 color: white;
 display: block;
 font-size: 13px;
 margin:0 auto;
 padding: 5px;
 width: 600px;
 margin-top: 10px;
 }
 #contenedor .left{
 background: #9ED233;
 display: block;
 float: left;
 text-align: center;
 width: 69%;
 }
 #contenedor .right{
 background: #5EACC6;
 display: block;
 float: right;
 text-align: center;
 width: 30%;
 }
 #contenedor:after{
 clear: both;
 content: "";
 display: block;
 }
 <div id="contenedor">

 <section class="left">
 <h3>Contenido General</h3>
 </section>

 <aside class="right">
 <h3>Contenido Sidebar</h3>
 </aside>

 </div>

DEMO

15 Feb

divs con alto al 100% sin asignarle 100% al elemento padre

Heightal100

Para muchos de nosotros es un dolor de cabeza ajustar un elemento como un «div» al alto de un contenedor,  he visto soluciones a este problema en los que el truco esta en dejar los elementos padre al 100%, algo como esto:

Solucion 1. No aplica en todos los casos

HTML

<body>
  <div id="padre">
    <div id="hijo">
      Cotenedor al 100% de alto
    </div>
  </div>
</body>

CSS

#padre{
  height:100%;
}
#hijo{
  height:100%;
}

Otros recomiendan dejar 100% al html y al body:

html, body{
  height:100%;
}

Solucion 2. Más efectiva!

He trabajado con archivos css demasiado extensos, intente con la tecnica anterior dejar un «sidebar» dentro de un contenedor al 100%, pero ninguno me funcionó, por más que colocaba height:100% al llegar al punto que lo coloque casi a todos los elementos padre. y tenia una solución temporal con jquery (no se debería recurrir a jquery para esto!).

En el siguiente ejemplo usare 3 elementos principales:

  1. #padre: Esel contenedor general o «wrapper» como lo definen algunos.
  2. #sidebar: La barra lateral, la cual tomara el alto al 100%.
  3. #contenido: Es el contenido del texto principal.

#padre

Defino un ancho, lo centro con margin: 0 auto; y no se nos puede pasar: dejar la posición relativa.

#padre{
  background:#CBD1DC;
  margin:0 auto;
  margin-top:10px;
  position:relative;
  width:600px;
}

#sidebar

Coloco la posición absoluta, para que pueda colocar por posiciones libremente dentro del contenedor #padre, gracias a que este ultimo tiene posición relativa. Le doy un ancho, y para que el contenedor se «adhiera» tanto arriba como abajo y de el 100%, coloco un top y bottom definido.

Este es el truco!:  bottom y top en 0px.

#sidebar{
  background:#FE5B2C;
  bottom:0px;
  color:#FFF;
  font-size:35px;
  font-weight:bold;
  padding:25px;
  position:absolute;
  text-align:center;
  text-shadow:-1px -1px #A62C02;
  top:0px;
  width:150px;
}

#contenido

El contenido va al lado opuesto del sidebar, por lo que coloco un float right (a la derecha).

#contenido{
  background:#E7EBF1;
  color:#42474F;
  float:right;
  padding:25px;
  text-align:justify;
  width:350px;
}

HTML

Importante!:  hacer un clear debido al float right del contenido, esto se hace antes de cerrar el ultimo div

<br style=»clear:both»/>

<body>
<div id="padre">
<div id="sidebar">
<p>Height al 100%!</p>
</div>
 <div id="contenido">
 <h2>Sidebar crece con el contenido!</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at turpis nulla. Aliquam velit nisi, consectetur eget auctor nec, luctus non neque. Ut sit amet justo nisi. Suspendisse nec neque libero. In gravida eros libero, ut sagittis elit. Aenean est sem, suscipit vitae vulputate et, euismod lacinia odio. Ut pretium leo ut enim dignissim ullamcorper scelerisque justo eleifend. Aliquam sodales enim sed felis volutpat ac vestibulum tellus scelerisque. Vestibulum eu turpis ut erat hendrerit euismod. Proin velit eros, varius eu aliquet sit amet, fermentum ut nisi. Maecenas eu turpis tellus. Quisque nec neque turpis. Nulla facilisi.</p>
 <p>Vivamus nisi lectus, commodo et dapibus a, tempor sit amet ipsum. Quisque lobortis, leo vitae placerat aliquam, dolor nibh interdum lectus, non dapibus lorem risus in elit. In gravida lobortis nibh, quis suscipit nunc aliquam sed. Proin faucibus, purus id ornare vestibulum, libero quam commodo magna, eget posuere ante leo id nulla. Nullam tortor est, cursus vitae bibendum a, feugiat et neque. Aenean sed lacus ac sem varius faucibus ut ut lectus. Quisque a diam eu risus tempus faucibus. Morbi neque est, laoreet sed imperdiet id, bibendum nec enim.</p>
 <p>Curabitur quis ornare orci. Nam lacinia, nibh quis elementum blandit, purus eros bibendum augue, a lobortis eros elit at libero. Pellentesque rutrum tellus sit amet ligula sodales bibendum. Cras posuere mauris in enim mollis convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc in lacus felis, in tempus mauris. Nunc sollicitudin interdum dolor, porta consectetur dolor lobortis eu. Phasellus quis nibh vel erat lacinia aliquam. Maecenas aliquam interdum purus, ac suscipit ante condimentum varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie tellus at est vulputate a porta massa pretium.</p>
 </div>
 <br style="clear:both"/>
</div>

 
 

Descargar CódigoDemo

 
 

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

23 Jul

Maquetar con divs como si fuese una tabla

Muchos de los que comenzamos maquetando, comenzamos a extrañar los comportamientos que tenian las tablas, y que era algo facil de acomodar los elementos.

Pero recordemos que ahora las tablas no se usan para maquetacion, en cuanto al diseño se refiere. Las tablas se deberían usar para tabular datos, como un listado de varios elementos.

Lo bueno del caso es que existe una manera de «imitar» el comportamiento de las tablas con capas, gracias a la propiedad display.

Muchos de los que comenzamos a maquetar conocemos las básicas que son:

display:

block

Inline

None

pero además existen:

display:

table

table-row

table-cell

Las anteriores propiedades son las necesarias para poder imitar el comportamiento de una tabla ya que tendriamos el elemento <table>, <tr> y <td>

Aca la demostración:

Partamos con un ejemplo de una tabla, que tiene 3 columnas:

Es una estructura sencilla para representar una tabla de 1 fila y 3 columnas. Ahora llevando este mismo concepto a divs tendriamos un resultado como el siguiente:

Teniendo en cuenta la grafica anterior:

Tendríamos nuestros equivalentes:

<table> sería equivalente a <div class=»contenedor-tabla«>

<tr> sería equivalente a <div class=»contenedor-fila«>

<td> sería equivalente a<div class=»contenedor-columna«>

Yo creo que ya esta entendida la idea. Nuestro codigo html sería:

HTML

<div class=»contenedor-tabla»>
    <div class=»contenedor-fila»>
        <div class=»contenedor-columna»>
Columna 1
         </div>

        <div class=»contenedor-columna»>
             Columna 2
        </div>

        <div class=»contenedor-columna»>
Columna 3
        </div>
    </div>
</div>

CSS

.contenedor-tabla{

display: table;

}

.contenedor-fila{

display: table-row;

}

.contenedor-columna{

display: table-cell;

}

24 Nov

Centrar una tabla dentro de un DIV

Hace poco me paso, no suelo manejar muchas tablas  con divs, solo para lo necesario.

Coloque un div , dentro una tabla que tenia la propiedad de centrado, y no centraba!

intente colocarle text.align: center; al DIV.. y nada pasaba!

 

Aca la solución, muy simple:

<div class=’centerTable’>

 

<table>
//Acá el contenido de la tabla….
</table>

 

</div>

 

Nuestros CSS quedarían de la siguiente manera:

 

div.centerTable{
        text-align: center;
}

 

div.centerTable table {
       margin: 0 auto;
       text-align: left;
}

 

Eso era todo!

:@memo_ac   :imageac

20 Mar

Selectores Condicionales en CSS y XPath

selectores condicionales

Primero que todo, XPath (XML Path Language) es un lenguaje que permite construir expresiones que recorren y procesan un documento XML. La idea es parecida a las expresiones regulares para seleccionar partes de un texto sin atributos (plain text). XPath permite buscar y seleccionar teniendo en cuenta la estructura jerárquica del XML. XPath fue creado para su uso en el estándar XSLT, en el que se usa para seleccionar y examinar la estructura del documento de entrada de la transformación.[Sacado de wikipedia].

Tanto los selectores para XPath como para aplicarlos con css son muy similares, ya que estos selectores se basan en la seleccion de etiquetas y atributos de HTML/XML.

Esto quiere decir que podremos seleccionar etiquetas especificas incluso con un atributo especifico y asi poder aplicarle un estilo.

Por ejemplo, utilicemos los enlaces. Para nosotros podria ser muy util colocar un estilo a los enlaces de descarga, otro estilo a enlaces que contengan URLs, o que contengan algun tipo de palabra en alguna parte.

Lo primero que debemos aprender son las siguientes notaciones o identificadores:

^ = Se utiliza cuando queremos referirnos a principio de un string.

$ =Se utiliza cuando nos referimos al final de un string.

* =Utilizado para referirnos a cualquier parte de un string.

La estructura general: <etiqueta>[atributo][identificador]=’Valor de atributo’

Comencemos con los enlaces de descarga, o mejor aún con algun tipo de archivo.

Tenemos el siguiente código:

<a href=«documento.pdf»>Enlace Descarga PDF</a>

<a href=«mailto:correo@mail.com»>Enlace de Correo Mailto</a>

<a href=«http://www.iguazoft.com/index.php»>Enlace a una URL</a>

Para referirnos a todos los enlaces que sean un link a una extension cualquiera, en este caso un PDF, nuestra definición CSS quedaría de la siguiente manera:

a[href $=’.pdf’]{

color:#F00;

}

Con un enlace que nos lleve a redactar un correo como lo es MAILTO:

a[href ^=’mailto:’]{

background:#FFC;

}

Con una URL que lleve el string iguazoft.com:

a[href *=’iguazoft.com’]{

border:#066 2px dotted;

}

Cabe resaltar que no solo sirve para los enlaces, sirve para parrafos, listas, o cualquier etiqueta que podamos colocarle un atributo. digamos si tuviesemos un parrafo con el atributo title tambien aplicaria de la siguiente manera:

<p title=»Idea Principal»>Contendido de Párrafo</p>

 

El estilo quedaría de la siguiente forma: