jquery Archives - internet80

CSS3 / Desarrollo / Development / HTML5 / Ideas / JavaScript / Programación / Programming / Software

Reseña Adobe Edge Animate 1.5

Desde hace un tiempo todas aquellas personas que coqueteaban con el desarrollo de contenido multimedia pero que no tenían un perfil técnico (o como diría un antiguo colaborador: “programan poquito”) en los últimos años se han visto afectados y frustrados debido a que algunas de las herramientas que ya habían adoptado para estas labores se han visto relegadas para ciertos fines. Por ejemplo, los diseñadores gráficos que hacían elementos web como banners y headers con pequeñas animaciones, se han topado con que los clientes quieren cada vez menos al contenido creado con Flash y si hoy usted desea hacer contenido rico, animado y dinámico con los nuevos estándares sin duda requerirá de conocimientos sólidos de HTML5, Javascript y CSS3. La buena noticia es que están saliendo herramientas, que aunque quizá no cambian esta situación, sí pueden ser alternativas que hagan el terreno un poco más plano.

Adobe en sus esfuerzos por mantenerse como uno de los líderes en el mercado de herramientas destinadas a la elaboración de recursos gráficos e interactivos, lanzó hace casi 2 años una herramienta llamada Adobe Edge que pretendía ser algo así como la herramienta de autoría sustituta para Flash, lo cual no logró además de ser ampliamente criticada (yo fui uno de esos críticos mala leche), sin embargo Adobe no ha desistido y ha seguido desarrollando su herramienta, pero ahora con el nombre de Adobe Edge Animate, y no solo eso, si no que ahora este programa es parte de una suit de interesantes aplicaciones que juntas forman la “familia” Adobe Edge. Debo mencionar que mi experiencia con este software apenas se ha reiniciado, ya que lo probé cuando salió hace dos años y no me gustó, pero al ver que Adobe seguía trabajando en él, decidí darle otra oportunidad y probarlo nuevamente.

¿Pero qué es Adobe Edge Animate?, es una herramienta de desarrollo web basada en HTML5, Javascript-jQuery y CSS3 y por lo tanto hace al contenido que genera “compatible” con cualquier software que pueda interpretar HTML5 (en teoría), su UI es bastante similar a cualquiera familiarizado con las herramientas multimedia basadas en línea de tiempo, Adobe Edge Animate tiene un “stage” o área de trabajo basada en el motor Webkit que permite colocar y crear gráficos (jpeg, png, gif, svg), colocar texto, previsualizar animaciones, tiene panel de propiedades y desde luego la línea de tiempo.

La línea de tiempo utiliza “keyframes”, que así somo en Flash, ayudan a generar el “tween” entre ellos automáticamente. También se puede utilizar la herramienta Pin para animar, cada Pin permite modificar las propiedades de un elemento en algún punto de la línea de tiempo sin tener que hacer el “keyframe” de manera manual, de esta manera, usted puede crear una animación desde donde está el “playhead” hasta donde esta el Pin con todo y keyframe en un solo paso. Otra características interesante es que se pueden copiar y pegar animación de un elemento a otro, es decir, si usted tiene un circulo que se mueve de derecha a izquierda, y tiene un triángulo estático pero desea que se mueva de la misma forma que el círculo, usted únicamente copia la animación del círculo (no el elemento) y la pega en el triángulo sin tener que crear o hacer algo más.

También puede hacer un grupo de elementos y reutilizar este en otra animación, en otras palabras puede crear símbolos (para los acostumbrados a Flash), desde luego estos símbolos pueden tener animación interna. Aunque debo decir que hay algunos problemas de reposicionamiento cuando se cambia el tamaño de la página donde se está desplegando la animación y también cuando veo la animación en Safari, no he logrado encontrar una solución efectiva…aunque como menciono apenas estoy reutilizando la herramienta otra vez…o sea, soy novato en Adobe Edge.

Triggers!, así es, Adobe Edge utiliza mucho el mecanismo de los “triggers” para indicar que hacer cuando se llega a un determinado punto de la línea de tiempo (stop(), play(), etc.) o bien se pueden aplicar a un elemento en el área de trabajo directamente para dar respuesta a ciertos eventos, como el click del ratón o el “touch” en una tableta, todo ello por medio de una ventana separada (pop-up) de código. Si hay algún veterano del AS2 todo esto le va a recordar a la manera en la que se insertaba código en las versiones 3, 4 y 5 de Flash hace unos 14 años :p .

He de reconocer que Adobe mejoró bastante su Adobe Edge desde la primera vez que lo utilicé, el flujo de trabajo utilizando la herramienta Pin, las herramientas de “easing” para los elementos, el copiado y pegado de animaciones y algunos otros detalles, hacen de esta aplicación algo interesante para la creación de animaciones HTML5. La parte más decepcionante para mi es que al momento no soporta audio.

Estas son mis primeras impresiones del programa, y todas ellas las saqué gracias a que elaboré una pequeñísima y muy simple presentación para ilustrar una charla que tuve en la Facultad de Ingeniería Mecánica y Eléctrica de la Universidad de Colima, en ella se puede apreciar como diferentes navegadores responden con diferente rendimiento, lo mas notable son las diferencia en velocidad de despliegue, calidad en el rendereo de imágenes png (que son las que utilicé) y algunos problemas de posicionamiento en Safari, el mejor resultado lo obtuve en Chrome, si alguien desea probar de lo que hablo y descargar este pequeño recurso para estudiarlo, modificarlo y/o destrozarlo adelante (coloco los archivos fuentes (requieren Adobe Edge Animate) y los archivos publicados, en 2 diferentes zips):

Fuentes

Publicados

*Haga clic en el nombre:

*Haga click en cada ícono central, de izquierda a derecha:

Update. Hace un mes aproximadamente salió Adobe Edge Animate CC que sería la versión 2.0 del programa.

Emmanuel Herrera

IT professional with several years of experience in management and systems development with different goals within public and private sectors.

Emmanuel worked through development and management layers, transitioning from developer and team development leader to Project Manager, Project Coordinator, and eventually to Scrum Master, Product Owner, and Agile Coach.

Some certifications include: PSM, PSPO, SSM.

internet80.com
2 Comments
Share:

CSS3 / Desarrollo / Development / Experiencia de Usuario / UX / HTML5 / JavaScript / Programación / Programming

Crear una barra emergente con HTML5, CSS3 y JQuery

¿De que va esta barra emergente?

Hoy mostraré como hacer una barra emergente que aparece en la parte superior del navegador, este tipo de barras pueden ser útiles para colocar mensajes, botones de herramientas, etc. La idea surgió cuando vi la llamada “Hello Bar” de este sitio hellobar.com, de manera que me dí a la tarea de crear algo similar.

He probado el resultado del código que le presentaré únicamente en Chrome y en Firefox, por lo que podría no funcionar adecuadamente en otros navegadores, pero si usted desea hacer las adecuaciones necesarias en esos casos…¡adelante! y espero comparta sus resultados 🙂 .

Puede ver el demo de la barra en jsfiddle.net:

1. Creación de la estructura del documento HTML5.

Primeramente elabore la estructura general de su página, para ello cree un nuevo archivo HTML y coloque el siguiente código en el:

<!DOCTYPE html>
<html>
   <head>
      <meta "charset=iso-8859-1" />
      <script src='libs/jquery-1.7.1.min.js'></script>
      <script src='libs/jquery-ui-1.8.18.custom.min.js'></script>
      <title>Barra Emergente</title>
   </head>
  <body>
    <header>
      <div id="popup">
        <a href=# class="hide"></a>
        <nav id="header_nav_menu">

          <a href="#" class="btn_new_page" title="New Book"></a>
          <a href="#" class="btn_page" title="New Page"></a>

          <div class="dropdown_area">
            <div class="dropdown-content">
              <div class="header">
                <h2>Mega Menu</h2>
              </div>
              <div class="row">
                <div class="column">
                  <h3>Category 1</h3>
                  <a href="#">Link 1</a>
                  <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
                </div>
                <div class="column">
                  <h3>Category 2</h3>
                  <a href="#">Link 1</a>
                  <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
                </div>
              </div>
            </div>
          </div>


        </nav>
        <div id="hide_area">&and;</div>
      </div>
      <div id="showpop">
        <a href="#" class="showpoplink"></a>
        &or;
      </div>
    </header>
    <article>
      <p>
        <br/>Contenido en la página</p>
      <p>Más cóntenido en la página</p>
    </article>

  </body>
</html>

Analicemos un poco, si nunca ha hecho páginas HTML5 antes, entonces no sobra decir que la etiqueta <!DOCTYPE html> es la “señal” que utilizan los navegadores para saber que el código del archivo es HTML5 y no una versión previa. Por otro lado, el fragmento de código que contiene los elementos que conforman la barra emergente en si misma es:

<div id="popup">
   <a href=# class="hide"></a>
   <nav id="header_nav_menu">

     <a href="#" class="btn_new_page" title="New Book"></a>
     <a href="#" class="btn_page" title="New Page"></a>

     <div class="dropdown_area">
       <div class="dropdown-content">
         <div class="header">
           <h2>Mega Menu</h2>
         </div>
         <div class="row">
           <div class="column">
             <h3>Category 1</h3>
             <a href="#">Link 1</a>
             <a href="#">Link 2</a>
             <a href="#">Link 3</a>
           </div>
           <div class="column">
             <h3>Category 2</h3>
             <a href="#">Link 1</a>
             <a href="#">Link 2</a>
             <a href="#">Link 3</a>
           </div>
         </div>
       </div>
     </div>


   </nav>
 <div id="hide_area">&and;</div>

El código anterior básicamente crea un elemento div que contiene un enlace que servirá para ocultar la barra cuando se hace clic en el, adicionalmente se colocan otros tres enlaces, que solo sirven como ejemplo de contenido que aparece dentro de la barra emergente en este ejercicio, estos enlaces pueden ser sustituidos por el contenido que más le convenga.

Note también este código:

<div id="showpop" >
<a href="#" class="showpoplink"></a>
&or;
</div>

Este div aparacerá cuando la barra esté escondida y servirá para mostrarla de nuevo cuando se hace clic.

Ahora bien, para hacer funcional a nuestro ejercicio hecharemos mano de la popular librería JQuery y su complemento para efectos visuales JQuery UI, si no esta familiarizado con con JQuery lo único que debe de saber al momento es que, fundamentalmente, JQuery es un conjunto de funciones JavaScript que conforman una amplia librería que le puede evitar una gran cantidad de trabajo, que de otra manera tendría que desarrollar usted mismo.

Para este ejercicio descargué y coloqué ambas librerías en una carpeta llamada libs, pero puede colocarlas donde usted desee haciendo la corrección pertinente en la siguientes líneas de código.

Para JQuery:

<script src='libs/jquery-1.7.1.min.js'></script>

Para JQuery UI:

<script src='libs/jquery-ui-1.8.18.custom.min.js'></script>

2. Agregar funcionalidad

Para lograr que el código creado reaccione a las acciones del usuario, que para el caso son solo dos, ocultar y mostrar la barra, utilizaremos el siguiente código:

<script type="text/javascript">
   $(document).ready(function(){
      $('#popup').show("bounce", { times:3 }, 350);
      $('#showpop').hide();
      $('.hide').click(function(){
         $('#popup').slideUp();
         $('#showpop').fadeIn('slow');
         return false;
      });
      $('a.showpoplink').click(function(){
         $('#popup').show("bounce", { times:3 }, 350);
         $('#showpop').hide();
        return false;
      });
    });
</script>

Lo que sucede gracias a este código es lo siguiente, cuando el documento HTML5 es reportado como “listo” por parte del navegador, inmediatamente la barra se muestra con en efecto de rebote, mientras que el enlace que sirve para mostrar la barra se oculta ya que no es necesario cuando la barra está visible:

$('#popup').show("bounce", { times:3 }, 350);
$('#showpop').hide();

Al mismo tiempo se indica cual botón dentro de la barra debe servir para ocultarla haciendo clic:

$('.hide').click(function(){
    $('#popup').slideUp();
    $('#showpop').fadeIn('slow');
    return false;
});

Finalmente, se hace los mismo pero para el caso del enlace que servirá para mostrar la barra cuando esta está oculta, utilizando el mismo efecto de rebote se ve en la carga inicial:

$('a.showpoplink').click(function(){
    $('#popup').show("bounce", { times:3 }, 350);
    $('#showpop').hide();
    return false;
});

3. Estilizar y ordenar los elementos.

Finalmente no queda más que darle belleza y orden a nuestros elementos HTML utilizando una hoja de estilos, veamos estos poco a poco para tener mejor idea de que hacemos.

body {
   margin:0;
   padding:0;
}

#popup {
   top: 0;
   width: 100%;
   padding: 20px 0px 0px 0px;
   height: 50px;
   background-image: linear-gradient(bottom, rgb(238,238,238) 14%, rgb(249,249,249) 60%);
   background-image: -o-linear-gradient(bottom, rgb(238,238,238) 14%, rgb(249,249,249) 60%);
   background-image: -moz-linear-gradient(bottom, rgb(238,238,238) 14%, rgb(249,249,249) 60%);
   background-image: -webkit-linear-gradient(bottom, rgb(238,238,238) 14%, rgb(249,249,249) 60%);
   background-image: -ms-linear-gradient(bottom, rgb(238,238,238) 14%, rgb(249,249,249) 60%);
   -moz-box-shadow: 0 0 5px 5px #bfbfbf;
   -webkit-box-shadow: 0 0 5px 5px#bfbfbf;
   box-shadow: 0 0 5px 5px #bfbfbf;
   display: block;
   /*position: fixed;*/
}

Los estilos anteriores se encargan primeramente de eliminar cualquier espacio entre el cuerpo del documento HTML y los elementos que contiene mediante la personalización de la etiqueta body. Enseguida se indica el aspecto que tendrá el div que contiene a la propia barra con el estilo #popup, ahí se indica la posición, el ancho y alto de la misma. Utilizamos las nuevas características de CSS3 para dar un gradiente al fondo de la barra y darle un discreto sombreado; en versiones anteriores de CSS esto no hubiera sido posible y tendría que haber creado una imagen previamente, tendría que colocarla y repetirla como fondo, esto ya no es necesario gracias a CSS3.

Ahora toca el turno de configurar el tamaño de el área sensible dentro de la barra para poder ocultarla:

#hide_area{
   width: inherit ;
   background: #666;
   padding: 0px;
   margin: 20px 0px 0px 0px;
   color:#FFF;
   font-family:Verdana, Geneva, sans-serif;
   font-size:10px;
   font-weight:bold;
   text-align:center;
   /*border:solid;*/
}

a.hide {
   top: 0;
   width: 100%;
   margin-top: 50px;
   padding: 8px 0px 8px 0px;
   display: block;
   cursor:default;
   position: fixed;
   /*border:solid;*/
}

Los estilos anteriores solo se encargan de definir el tamaño, posición y colores utilizados por el enlace que funciona como área sensible para poder ocultar la barra al hacer clic.

Ahora se hace lo mismo pero para el enlace que muestra la barra cuando se hace clic:

#showpop{
   top: 0;
   width: 100%;
   height: 14px;
   background: #666;
   padding: 0px;
   margin: 0px 0px 0px 0px;
   -moz-box-shadow: 0 0 5px 5px #bfbfbf;
   -webkit-box-shadow: 0 0 5px 5px#bfbfbf;
   box-shadow: 0 0 5px 5px #bfbfbf;
   color:#FFF;
   font-family: Verdana, Geneva, sans-serif;
   font-size: 10px;
   font-weight: bold;
   text-align: center;
   position: fixed;
  /*border:solid;*/
}

a.showpoplink {
   top: 0;
   width: 100%;
   margin-top: 0px;
   padding: 5px 0px 5px 0px;
   display: block;
   cursor:default;
   position: fixed;
   /*border:solid;*/
}

Para terminar, he agregado unos botones que funcionan como contenido dentro de la barra emergente que se ha creado, para definir su aspecto utilicé los siguientes estilos, por supuesto usted tendrá que desarrollar los suyos para su propio contenido:

#header_nav_menu a {
  padding: 0px 13px 10px 13px;
  background-repeat: no-repeat;
  cursor: pointer;
  /*border:solid;*/
}

#header_nav_menu a.btn_new_page {
  background-image: url('http://icons.iconarchive.com/icons/gakuseisean/ivista-2/24/Files-New-File-icon.png');
}

#header_nav_menu a.btn_page {
  background-image: url('http://icons.iconarchive.com/icons/dryicons/aesthetica-2/24/page-icon.png');
}


/* Dropdown content (hidden by default) / Contenido del dropdown escondido por default*/

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 50%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown_area {
  padding: 0px 13px 25px 13px;
  background-repeat: no-repeat;
  cursor: pointer;
  background-image: url('http://icons.iconarchive.com/icons/double-j-design/super-mono-3d/24/button-dropdown-icon.png');
  float: left;
}


/* Show the dropdown menu on hover / Muestra del dropdwon al colar el mouse sobre el botón*/

.dropdown_area:hover .dropdown-content {
  display: block;
  margin-top: 25px;
}


/* Mega Menu header, if needed */

.dropdown-content .header {
  background: gray;
  padding: 10px;
  color: white;
}

h3 {
  padding: 5px;
}


/* Create two equal columns that floats next to each other / Crear dos columnas iguales que flotan una junto a la otra */

.column {
  font-size: 14px;
  float: left;
  width: 50%;
  background-color: #ccc;
  height: 100px;
}


/* Style links inside the columns / Estilos para los enlaces dentro de columnas */

.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}


/* Add a background color on hover / Añade color a los enlaces cuando se pone el mouse encima */

.column a:hover {
  background-color: #ddd;
}


/* Clear floats after the columns / Limpia los floats despues de las columnas */

.row:after {
  content: "";
  display: table;
  clear: both;
}

Conclusión.

Si llegó hasta este punto es porque seguramente ha hecho un buen trabajo, siéntase libre de jugar con este pequeño ejemplo, me encantaría ver sus resultados así que no dude en compartirlos.

Enlaces de interes:

Subir un archivo con HTML5

Arrastrar y Soltar HTML5

Aquí algunos libros que le pueden ayudar:

Emmanuel Herrera

IT professional with several years of experience in management and systems development with different goals within public and private sectors.

Emmanuel worked through development and management layers, transitioning from developer and team development leader to Project Manager, Project Coordinator, and eventually to Scrum Master, Product Owner, and Agile Coach.

Some certifications include: PSM, PSPO, SSM.

internet80.com

No Comment