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

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;

}

11 Mar

Lección 3: Introducción a PHP

Codigo Fuente

En el mundo del desarrollo existen muchos lenguajes de programación los cuales son muy reconocidos como por ejemplo .NET, python, Ruby y otros tantos, pero en este caso vamos a habar de PHP uno de los lenguajes de mayor popularidad en la web y el lenguaje que es el centro de atención de este curso, hoy por fin, después de haber dado las expliaciones necesarias para poder montar el ambiente de desarrollo necesario para poder realizar nuestras practicas, comenzamos con los primeros pasos.

Capítulo 1: Las etiquetas PHP

PHP asi como otros lenguajes de script pueden ser incrustados dentro de una página e incluso ejecutarse en un archivo independiente, pero para que el servidor sepa que esa información se ha de interpretar, se ha de marcar o enmarcar entre unas marcas especificas las cuales nos indican que el texto contenido es php.
Leer más

29 Ene

Curso De Php

Codigo Fuente

la presente entrada es para dar a conocer el temario de un proyecto de curso de PHP que realizare con el fin de enseñarle a dos personas a programar en este lenguaje, el acceso sera totalmente libre para cualquier persona.

A continuacion el temario, el cual he ido creando con lo temas de interes que creo que son importantes, y teniendo en cuenta algunos temarios encontrados en cursos que rondan por internet, el temario puede ser afectado agregando mas capítulos o lecciones con el fin de completar temas que no fueron tenidos en cuenta inicialmente.

Leer más

29 Nov

iTunes – Reproducción sin cortes entre canciones

 

Normalmente tengo iTunes configurado con la opción Fundir canciones con un valor de 2 segundos. Lo que hace esta opción es colocarle un ligero desvanecimiento (Fade out / Fade In) al cambiar la canción.

Es ideal si quieres reproducir canciones aleatoriamente de tu lista de reproducción, pero si tienes canciones de un concierto, no es muy bueno escuchar el corte entre canciones.

La solución es:

1. Selecciona las canciones en vivo, o el concierto y das Clic derecho->Obtener información:

2.En la pestaña Opciones, marcamos la opción álbum sin pausas y ya esta!, ahora si a escuchar sin interrupciones.

:@memo_ac   :imageac