martes, 28 de agosto de 2012

Cristalab

Cristalab

Obtener ancho y alto de un video HTML5 con Javascript

Posted: 28 Aug 2012 03:51 AM PDT

Ahora que me toca desarrollar una aplicación con Canvas y Video de HTML5 me he topado con la necesidad de adaptar el lienzo al tamaño del video, que no es estático, porque depende de la resolución de cada usuario.

Lo anterior suena bastante sencillo, sin embargo no lo es tanto, a continuación te muestro como debería hacerse. Primero obviamente recolectamos el objeto.

Código :

  window.addEventListener('load',init);  function init()  {         var video = document.querySelector('video');  }

Uno podría esperar que hubiera un video.width o video.height, sin embargo, a alguien se le ocurrió una buena idea cambiar el nombre de esos atributos por los siguientes:

Código :

  window.addEventListener('load',init);  function init()  {         var video = document.querySelector('video');         var video_height = video.videoHeight;         var video_width = video.videoWidth;  }

Uno podrá pensar que no hay dificultad en ése script, sin embargo ejecutarlo nos devolvería 0 para ambos valores, ¿por qué? Porque generalmente ésta función se ejecuta cuando el video no ha cargado y no ha empezado a ejecutarse, por lo que debemos ejecutar ésto utilizando el evento loadedmetadata del objeto video.

Código :

  var video,video_height, video_width;  window.addEventListener('load',init);  function init()  {         video = document.querySelector('video');         video.addEventListener("loadedmetadata", getSize, false);  }  function getSize()  {         video_height = video.videoHeight;         video_width = video.videoWidth;  }

Ahora sí, obtenemos los valores necesarios cuando el video se ha adaptado al tamaño de la ruta que el usuario envía. No sé qué tan común sea que el source del video sea de tamaño variable, pero sí requiere conocerlo, éste script puede ayudarlos.

Enviar comentario

Personalizar la barra de administración de wordpress

Posted: 28 Aug 2012 03:43 AM PDT

Mientras más fácil nos ponemos las cosas a nosotros mismos en la administración de nuestro blog, más llevadera será esta tarea. WordPress desde la versión 3.1 agregó la barra de administración para ayudarnos en la administración del blog, y muchos la eliminan por que les estorba. En este post agregaremos botones que funcionen como acceso directo a las tareas más comunes que realizamos sin necesidad de ir al panel de control del blog, y eliminaremos los que no nos interesen, además agregaremos un enlace para eliminar entradas y páginas desde la barra y moveremos la barra de administración de lugar.

En wordpress no existe un entorno gráfico para agregar botones personalizados a esta barra, pero los agregaremos añadiendo funciones y utilizando los ganchos que nos proporciona el API de wordpress. En este tutorial explicaré cómo agregar vínculos individuales y vínculos anidados en la barra de administración de wordpress.



Agregar un enlace simple a la barra de administración



Para agregar un nuevo enlace personalizado en la barra de administración de WordPress, agregamos la siguiente función en el archivo function.php de tu theme.

Aprovecharé y utilizarée mi blog como ejemplo, agregarée algunos botones de zonas que visito con mucha frecuencia y un enlace a la zona de descargas y otro al panel de estadísticas, y los organizaré de la siguiente forma.

  • Mis Herramientas
    - Descargar
    - Estadísticas
    - Comentarios

Código :

function add_custom_link_admin_bar() {     global $wp_admin_bar;     if ( !is_super_admin() || !is_admin_bar_showing() )        return;     $wp_admin_bar->add_menu( array(     'id' => 'CustomLink',//ID del link     'title' => __( 'Mis herramientas'),//Nombre a mostrar en el enlace     'href' => __('http://www.web-desings.com/'),//Enlace del link     ) );  }  add_action('admin_bar_menu', 'add_custom_link_admin_bar',25);

Es una función bastante simple, sólo debes editar los valores de ID, title, href, por el valor que desees.

Agregar sub-menú en la barra de administración de wordpress


Para agregar otros enlaces como sub menú al link Mis Herramientas, sólo debemos agregar un valor más al array, este es el valor parent=>id_link_padre, de esta forma los enlaces que contengan parent=>CustomLink serán agregados como hijos del link Mis Herramientas, analicen el siguiente código y lean los comentarios y seguro lo entienden perfectamente.



Código :

// Agreagar sub menu "Descargas"  $wp_admin_bar->add_menu( array(      'parent' => 'CustomLink',//Nombre del link padre      'id'     => 'downloadLink',//ID del link      'title' => __( 'Descargas'),//Nombre a mostrar en el enlace      'href' => __('/webdesings/wp-admin/admin.php?page=download-monitor/wp-download_monitor.php'),//Vínculo del link  ));    // Agreagar sub menu "Estadísticas"   $wp_admin_bar->add_menu( array(      'parent' => 'CustomLink',//Nombre del link padre      'id'     => 'Estat',      'title' => __( 'Estadísticas'),      'href' => __('/webdesings/wp-admin/admin.php?page=stats'),  ));    // Agreagar sub menu "Comentarios"  $wp_admin_bar->add_menu( array(      'parent' => 'CustomLink',//Nombre del link padre      'id'     => 'Comment',      'title' => __( 'Comentarios'),      'href' => __('/webdesings/wp-admin/edit-comments.php'),  ));

Eliminar enlaces de la barra de administración de wordpress


Ademas de agregar podemos eliminar cualquiera de los enlaces que por defecto de la barra de administración, para este ejemplo eliminare la alerta de actualizaciones, esta es una función interesante cuando se le entrega una web creada con wordpress a un cliente.

Código :

function remove_admin_bar_links() {      global $wp_admin_bar;      $wp_admin_bar->remove_menu('wp-logo');      $wp_admin_bar->remove_menu('updates');  }  add_action( 'wp_before_admin_bar_render', 'remove_admin_bar_links' );

Además de wp-logo y updates, wordpress nos ofrece la posibilidad de eliminar los demás enlaces solamente agregando una nueva linea de código pasando los siguientes parámetros.

  • search:para eliminar la caja de búsqueda.
  • comments:Para eliminar el aviso de comentarios
  • updates:Eliminar el aviso de actualizaciones
  • edit:Elimina editar entrada y páginas
  • get-shortlink:Proporciona un enlace corto a esa página/post
  • my-sites:Elimina el menu my sitios, si utilizas la función multisitios de wordpress
  • site-name:Elimina el nombre de la web
  • wp-logo:Elimina el logo(y el sub Menú)
  • my-account:Elimina los enlaces a su cuenta. El ID depende de si usted tiene Avatar habilitado o no.
  • view-site:Elimina el sub menú que aparece al pasar el cursor sobre el nombre de la web
  • about:Elimina el enlace "Sobre WordPress
  • wporg:Elimina el enlace a wordpress.org
  • documentation:Elimina el enlace a la documentación oficial (Codex)
  • support-forums:Elimina el enlace a los foros de ayuda
  • feedback:Elimina el enlace "Sugerencias"

De esta forma podemos eliminar algunos de los botones que trae wordpress por defecto en la barra de administración.

Mover de posición la barra de administración de wordpress


Para realizar esta tarea solo debemos agregar la siguiente función en el archivo function.php y editar el código css que contiene dependiendo el lugar donde necesitemos mover la barra de administración.

Código :

function custom_move_adminbar() {      echo '<style type="text/css">     body {        margin-top: -28px;        padding-bottom: 28px;     }     body.admin-bar #wphead {        padding-top: 0;     }     body.admin-bar #footer {        padding-bottom: 28px;     }     #wpadminbar {        top: auto !important;        bottom: 0;     }     #wpadminbar .quicklinks .menupop ul {        bottom: 28px;     }     </style>';  }  add_action( 'admin_head', 'custom_move_adminbar' );  add_action( 'wp_head', 'custom_move_adminbar' );


Si mueves la barra en la parte inferior de tu pantalla, debes tener en cuenta que los menús desplegables de deslizan hacia abajo y puede que no se visualicen, con lo cual tendrás que tocar el css de los sub-menú, mi recomendación es dejarla la cual está, para evitar perdidas de tiempo.

Cambiar el aspecto visual de la barra de administración de wordpress


Código :

// Editamos el aspecto visual de la barra  function custom_style_adminbar() {      $adminlogo = '/images/adminlogo.png'; // Especificar ruta (tamaño = 20 x 20 px)     ?>       <style>          #wpadminbar { background: #000 !important; }          #wp-admin-bar-wp-logo &gt; .ab-item .ab-icon {              background: ('URL de la imagen') left top !important;              }      </style>';     <?php }  add_action('admin_head', 'custom_style_adminbar');
Para personalizar la barra de administración solo debemos editar el código css de la barra de administración y colocarlo dentro de la función anterior, si quiere cambiar el logo se coloca en esta función la ruta de la imagen a colocar.

Desactivar la barra de administración en wordpress 3.3


En wordpress 3.3 los desarrolladores recomiendan y pretenden evitar la desactivación de la barra de administración, o al menos ponerlo un poco más difícil al usuario, ellos dicen que hacen esto por que esta barra de administración tiene información de mucha utilidad para el usuario y además se combina con funciones de header y por ello no recomiendan eliminarla totalmente.

En wp.tutsplus.com explican cómo eliminar la barra de administración de wordpress 3.3, pueden mirar este tutorial si les interesa eliminar la barra o utilizar alguno de estos pluguins.

Conclusión


A muchos puede parecer estúpido el editar o agregar funcionalidades a esta barra de administración, pero puedo decirles que esto puede sacarte de algún apuro con algún cliente, a los clientes mientras mas fácil le pones las cosas mejor para tí y para él. Esta barra puede servir para agregarles accesos directo a zonas que deben de visitar frecuentemente.

Sólo hay que saber sacarle provecho a estas herramientas y seguro que pueden servirte para algo, espero sea de ayuda y alguna vez puedan utilizarlo.

Enviar comentario

Diseñar una barra de progreso en Photoshop

Posted: 09 Aug 2012 04:03 AM PDT

Usaremos los conocimientos adquiridos en videotutoriales anteriores de nuestra serie de Photoshop, junto con nuevas posibilidades del modulo de animación, para generar una barra de progreso, adornada con motivos personalizados y con una animación suave y simple, haciendo uso de las transiciones.

Daremos forma a nuestra barra y a sus diferentes estados de crecimiento, trabajando con las formas y con los siempre útiles estilos de capa, para posteriormente trabajar con las opciones del módulo de animación, asignando fotogramas y aprendiendo a hacer transiciones suaves.



Saludos.

Enviar comentario

Uso de transiciones en CSS3

Posted: 09 Aug 2012 03:21 AM PDT

Este tutorial documenta cómo hacer transiciones sutiles y fáciles con CSS3. El parámetro transition es un parámetro de CSS3 y CSS2 UI, es decir, que lo implementan navegadores por separado. Para usarlo está la forma estándar establecida por W3c y las propias de los navegadores, por ese motivo de compatibilidad es mejor declarar las propiedades para todos los navegadores, ya que si una no funciona, otra sí lo hará.

La mayoría de los navegadores son compatibles, pero Internet Explorer no (en su versión 9).

Código :

/* Parámetro estándar */  transition:    /* Parámetros según navegador */  -webkit-transition:/* Chrome y Safari */  -moz-transition:/* Mozilla */  -o-transition:/* Opera */


Cómo funcionan las transiciones en CSS3


Realmente lo que hace este parámetro es detectar los cambios del elemento en el estilo, ya sea añadirle un estilo o sea una modificación por pasar por encima (:hover). Coge el parámetro anterior y pasa al siguiente de forma progresiva en el tiempo establecido. Debe de establecerse transition en el elemento origen, no es recomendable hacerlo en el destino (:hover) o cambiando la clase.

Este es un ejemplo de estilos sin aplicar transition y su procedimiento:

Código :

/* Estilo de un DIV con la clase TRA */  .TRA{     width:100px;     height:100px;     background:#099;  }    /* Estilo que se aplica al pasar por encima de la DIV con clase TRA */  .TRA:hover{     width:200px;     height:200px;     background:#990;  }


Con el código de arriba añadiéndole una transición aumentaría de tamaño progresivamente el DIV y cambiaría su color de fondo también de forma progresiva.

Parámetros de transition


Transition tiene distintos parámetros, que se pueden especificar por separado, o juntos (como hacen background y background-color, por ejemplo). El parámetro transition tiene los siguientes parámetros (que después se explicarán por separado):

Código :

transition: [Propiedades] [Tiempo] [Función de Tiempo] [Retardo];


Los parámetros que usamos en transition son los siguientes:

  • Propiedades: En este parámetro establecemos qué propiedad queremos que modifique, como width, height... pero sólo podemos poner una, por eso se puede usar la propiedad "all", que sirve para seleccionar todas y se recomienda usarla preferentemente.
  • Tiempo: Este parámetro establece el tiempo que tarda en hacerse la animación en segundos (su unidad es s), es decir si queremos que dure un segundo tenemos que poner "1s".
  • Función de tiempo: Este parámetro establece la curva de aceleración de la transición, es decir, si empieza más rápido y o más despacio o es un avance lineal, sin variar la aceleración.
    Este parámetro tiene varias funciones de tiempo preestablecida: lineal, ease, ease-in... Por defecto usa el ease, y es el más recomendado, consiste en un comience lento y una terminación lenta, acelerándose en la parte media.
  • Retardo: En este parámetro podemos establecer el tiempo que tarda en empezar la transición, en segundos.


En el siguiente ejemplo veremos cómo un DIV irá de un lado al otro y cambiará su tamaño y color cuando pasemos por encima de su contenedor.

El código HTML:

Código :

<div class="TRA_CONT">     <div> <!-- Este DIV es el que se mueve -->     </div>  </div>



El código CSS:

Código :

/* Este estilo es el del DIV que esta dentro de div.TRA_CONT */  .TRA_CONT div{     width:10%;     height:80px;     margin-left:0%;     background:#0F0;     -webkit-transition:all 1s ease;     -moz-transition:all 1s ease;     -o-transition:all 1s ease;     transition:all 1s ease;  }    /* Estilo que se aplica al pasar por encima de la DIV con clase TRA */  .TRA_CONT:hover div{     width:20%;     margin-left:80%;     background:#F00;  }


El código anterior muestra los parámetros que tiene al principio el DIV y muestra los que tiene al pasar por encima. El movimiento lateral se puede hacer, como en este caso, con el margin-left o con parámetro de posición (left,top...), el ensanche de el DIV se hace con el width y el color cambia por el background.

El contenido de transition

El contenido del parámetro ("all 1s ease") nos indica en primer lugar que queremos hacer la transición con todos los parámetros (estableciendo "all"), en segundo lugar especificamos la duración de un segundo (con "1s"), también especificamos la función de tiempo que realiza, usando "ease" (que va más lento a principio y fin de el movimiento) y por último podríamos haber establecido el retardo, especificándolo en segundos.

Propiedades de transition


Para usar estas formas individuales también tenemos que ponerles el prefijo para cada navegador (-webkit-, -moz- y -o-):

  • transition-property: Este parámetro sirve para establecer los parámetros que serán afectados por la transición, es decir, si sólo queremos que se cambie el width y el margin debemos establecer en su contenido "width, margin", separando con comas si existe más de un parámetro que va a ser afectado.
  • transition-duration: Estableciendo este parámetro podemos cambiar individualmente el tiempo de la transición, estableciéndolo en segundos (por ejemplo 0.5s o 2s).
  • transition-timing-function: Con este parámetro establecemos la curva de velocidad, pudiendo elegir entre varios preestablecidos (lineal,ease,ease-in,ease-out...).
  • transition-delay: Con este parámetro establecemos el retardo con segundos, por ejemplo, si queremos que empiece medio segundo tarde, establecemos 0.5s.


[nota:2386aca453]Se pueden usar todas juntas con el transition, como en el primer ejemplo. [/nota:2386aca453]

Integración con eventos


Con transition todos los cambios, siempre que estén definidos en las propiedades que se animarán, que hagamos con eventos Javascript se harán de forma progresiva como con las demás transiciones.

Código :

Los botones con los eventos  <input type="button" onclick="document.getElementById('cuadro_tra').style.width='20%'" value="20%">  <input type="button" onclick="document.getElementById('cuadro_tra').style.width='40%'" value="40%">  <input type="button" onclick="document.getElementById('cuadro_tra').style.width='60%'" value="60%">    La etiqueta DIV que cambia de tamaño  <div id="cuadro_tra"></div>


Código :

#cuadro_tra{     width:20%;     -webkit-transition:all 1s ease;     -moz-transition:all 1s ease;     -o-transition:all 1s ease;     transition:all 1s ease;  }


Algunos ejemplos de uso


Código :

<div class="MENU_pestañas">     <li>Inicio</li>     <li>CSS</li>     <li>JavaScript</li>     <li>PHP</li>  </div>


Código :

  .MENU_pestañas li{     position:relative;     float:left;     list-style:none;     width:140px;     height:26px;     padding-top:15px;     text-align:center;      background:#999;      color:#FFF;     border:1px solid #555;     font-weight:bold;     text-shadow:1px 1px 0px #000;     border-radius:10px 10px 0px 0px;     -webkit-border-radius:10px 10px 0px 0px;     -moz-border-radius:10px 10px 0px 0px;     -webkit-transition:all 1s ease 1s;     -moz-transition:all 1s ease 1s;     -o-transition:all 1s ease 1s;     transition:all 1s ease 1s;  }    .MENU_pestañas li:hover{     background:#9A44A6;     border-bottom-color:transparent;     z-index:2;     box-shadow:2px -2px 4px rgba(0,0,0,0.4);     -webkit-transition:all 1s ease;     -moz-transition:all 1s ease;     -o-transition:all 1s ease;     transition:all 1s ease;  }


Ver los ejemplos funcionando

Enviar comentario
Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)