HTML5

Que es ser un Front End?

Nadie logra lo que quiere rindiendose
Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

Que es ser un Front End?, Como ser un Ninja Front End? Y como llegar a ser el mejor Front End?

Son preguntas que al inicio de todo nos hemos preguntamos en algún punto. Si tú al igual que yo te apasiona la web quédate a leer esto te interesará.

La pasión nos conlleva a realizar muchas cosas como por ejemplo dejar de lado unas para hacer otras quizás nuevas o centrarse en una. Esto nos trae la búsqueda de la perfección y la dualidad cognitiva pues como empezó muchos terminan, rápido y fugaz. Ya que luego de un tiempo te pasara que has aprendido mucho y aun te falta mucho más, aunque tratas y pasa el tiempo sigue ocurriendo el mismo escenario pues cuando piensas alcanzar la meta esta se aleja hasta dejarte a una distancia aproximada al punto inicial. La dualidad cognitiva nos llevara a la decepción, percepción equivoca de que perdimos el tiempo y debimos hacer otra cosa, renegaremos, algunos lloraran y otro más locos se reirán de ya no saber qué hacer.

En todos estos escenarios el individuo ha perdido el porqué de que iniciara esto “La Pasión”.

Al parecer la pasión como todo se acaba y ellos perdieron el punto de enfoque y se estancaran, pero tú no, porque? Pues simple, estás leyendo esto.

 

Un Front End apasionado nunca vera un reto como reto sino como una nueva forma de andar, nunca caerá solo tropezará y nada será tan alto pues con algunos trucos y funciones se creara una cascada de ideas que juntas aran el escalón para pasar tal altitud.

Tu que estas desarrollando nunca olvides que esto al igual que tu primer amor inició con pasión y ella no te dejara sino tu a ella a la medidas que la cosa se ponga difícil.

Recuerda la adversidad no está para que te rindas sino para medir tu fortaleza y tus ganas de superarlas, Murieron las tablas y pasamos a div con floats, pues genial; Murió el float paso a display, pues grandioso; muere display empezamos las grillas, valla valla se mesclaron y salió mejor aún; se modifica y nace Flex, nunca te rindas pues a la medida que lo hagas serás uno de los que perdieron o vivieron seguir viviendo con su pasión.

 

Nunca dejes de leer lo que te gusta, no dejes de informarte y recuerda nunca se sabe todo.

Te dejo unos links de ayuda para tu evolución a un Front End o un Ninja Front End o mejor aún el Mejor Front End.

 

http://tympanus.net/codrops/css_reference/

http://tympanus.net/codrops/collective/

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more

Ejemplo de LocalStorage HTML5

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

LocalStorage es una nueva implementacion del HTML5  que nos permite tener variables en javascript que perduran aun asi actualicemos el navegador.  Entonces estamos almacenando datos en el lado del cliente que lo podemos usar cuando queramos aun asi el ordenador se apague esta variable estará ahí por que se guarda en alguna parte del disco duro.

Trabajar con esta característica del html5 no es nada complejo se mas si estas acostumbrado a usar array en javascript te sera muy facil y con esto nos olvidamos las cookies que a comparado de localstorage son tediosos y siempre estan pegadas a la peticiones http   por ende viajan con su peso con la web. Pero su punto en contra que si alguien tiene acceso al browser del cliente podria obtener estas variables de localstorage.

google Chrome nos da un debug para poder estas variables y poder tener control de ellas entonces desde la aplicacion web podemos crear.

Por ejemplo vamos a ponernos en un caso practico que tenemos un slider que va del 100% del ancho de la web en todos los contenidos y en monitores pequeños a primera vista en su navegador solo saldra el slider y tendria que scrolear para ver el contenido. Podemos plantear una solución con localstorage que el slider tenga un boton que diga ocultar y hasta ahi lo pueden hacer hasta sin necesidad del localstorage pero si les digo que quiero que cuando visite otra pagina del sitio web tambien quiero que se respete el estado que le di al slider? osea el slider tendria estado (abierto y cerrado).
Al desarrollo.

el css donde al slider lo colocamos en el top 100% y un boton que estara dentro del slider para hacer el cambio de estado

 
   #slider{
                width: 100%;
                height: 300px;
                position: absolute;
                top:0px;
                left:0px;
                background:red;
                display: block;
            }
            #boton{
                position: absolute;
                top:300px;
                height: 40px;
                width: 40px;
                left:0px;
                background: yellow;
                z-index: 2; 
                cursor:pointer;
            }

el html y agregar la libreria jquery (no es necesario usar jquery para trabajar con localstorage)

< header id="slider" >
            < div id="boton">subir< /div >
< /header >
< script src="https://code.jquery.com/jquery-git2.min.js">

entonces esta es la base pero si recargamos la pagina siempre estara por defecto abierto y no esta tomando en cuenta el ultimo estado en que lo dejamos.

$("#boton").on("click",function(){
                 /*si esta en top 0 es que esta abierto el slider y debemos ocultarlo con -300 
                   si no es 0 es que esta en -300 entonces quiere decir que esta oculta para mostrar debemos 
                   darle 0
                 */
                 if ($("#slider").css("top")=="0px")
                 {
                     $("#slider").css({"top":-300}) 
                 }
                 else
                 {
                     $("#slider").css({"top":0}) 
                 }
            })

Aqui aplicamos localstorage localStorage[“estado”] y le damos un estado dependiendo a lo que hace el usuario.

$("#boton").on("click",function(){ 
                 if ($("#slider").css("top")=="0px")
                 {
                     $("#slider").css({"top":-300}) 
                     localStorage["estado"]="cerrado"
                 }
                 else
                 {
                     $("#slider").css({"top":0}) 
                     localStorage["estado"]="abierto"
                 }
            })

y con este codigo ya tenemos este resultado

y vemos que ya nos cargo una variable localstorage y si lo cerramos cambiamos el valor automaticamente.

pero hasta ahora solo seteamos el valor del localstorage aun no lo estamos usando entonces agregamos las siguientes lineas de codigo.

$(document).ready(function(){
                /*si el valor no es undefined significa que la variable ya fue seteada con un valor*/ 
                if (localStorage["estado"]!=undefined)
                {
                    /*condicionamos el valor del estado para dar uns instruccion si cerrar o abrir*/
                    switch(localStorage["estado"])
                    {
                        case 'cerrado':
                            $("#slider").css({"top":-300}) 
                            break;
                        case 'abierto':
                            $("#slider").css({"top":0}) 
                            break;    
 
                    }
                }
 
            })

pues con esto ya tenemos funcional nuestro script igual les dejo el script aqui corriendo.
demo en linea
archivos fuentes

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more

escalar mi pagina web en diferentes dispositivos etiqueta viewport

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

Ahora con todo el auge de dispositivos portatiles es necesario que nuestra web soporte esos dispositivos y para eso tenemos las web resposives o web mobil pero existe una etique que hace que nuestra web se adapte a toda medida de pantalla aun hay que si tu web no esta muy maquetado (construccion de la web) o si los plugins de efectos no son soportados por el mobil saldran mal asi que esto no es una solucion ya que ademas todo se veria muy pequeño en un dispositivo mobil y hay entra el tema de experiencia de usuario UX.

esta etiqueta seria un complemento a responsive design o tambien web mobil:
con esto la web si escala al tamaño del dispositivo

<meta name="viewport" content="width=device-width">

si queremos que el usuario no escale la web (touch)

<meta name="viewport" content="width=device-width,user-scalable=no;">

si queremos que se pueda escalar el doble de su tamaño (pueden jugar con los valor)

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=2.0;">

 

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more

Audio en HTML5 soportado en todos los navegadores

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

Uno de las tantas novedades del html5 es audio y video que facilitan mucho al desarrollado sin estar usando flash para reproducir audio, Ahora solo usamos

<audio width="300" height="32" src="musica.mp3"></audio>

y con eso ya tenemos audio pero resulta que todos los navegadores no lo soportan audio (Si ese que te imaginas IE!!!! en sus versiones 6 , 7 y 8 ) para mas detalle puedes revisar en esta tabla entonces tenemos un polyfills audio.js ya con esto estamos listos para armar el script.
en el header del html colocar

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://kolber.github.com/audiojs/audiojs/audio.min.js"></script>
<script type="text/javascript">
/*con esta linea hacemos que funcione el polyfills*/ var STATUS_REEL=false; audiojs.events.ready(function(){ var as = audiojs.createAll(); });
// ]]></script>

<audio id=”audio” width=”300″ height=”32″ src=”motor.mp3″> </audio>

ya con eso debe funcionar en todos los navegadores pero si queremos ser mas PRO usando el audio entonces vamos a detectar si el navegador soporta audio para poder usar el  nativo y diran por que nativo?
este polyfills lo que hace es reproducir en todos los navegadores el audio por un swf que viene en sus archivos entonces no estamos usando propiamente el audio de html5
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>

<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
 
/*si audio es soportado*/
if (Modernizr.audio)
{
/*agregamos los formatos los cuales sirven para distintos navegadores*/
$("#audio_audio").append('<source src="audio/motor.ogg" type="audio/ogg" /><source src="audio/motor.mp3" type="audio/mpeg" /><source src="audio/motor.wav" type="audio/wav" />');
}})
// ]]></script>

Esta tabla les ayudara a comprender que formato es soportado en los distintos navegadores y en esta web puedes convertir en linea su archivo de audio en los distintos formatos

Browser MP3 Wav Ogg
Internet Explorer 9 YES NO NO
Firefox 4.0 NO YES YES
Google Chrome 6 YES YES YES
Apple Safari 5 YES YES NO
Opera 10.6 NO YES YES
Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more

Api fullscreen con html5

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

Ya hace mas de 1 año youtube comenzo a usa su reproductor en html5 y algo que me dejaba con la duda era como hacia para hacer el fullscreen del video ya veo que era la API Fullscreen de javascript que nos permite colocar un elemento de nuestro documento html en toda la pantalla y esto funciona como nativo en los smartphone.

como es una tecnologia experimental pueda que tenga cambios en nuevas versiones de navegadores ahora funciona en motores Gecko  y WebKit

Standar -> requestFullScreen()

Gecko -> element.mozRequestFullScreen()

WebKit -> element.webkitRequestFullscreen().

 

con este script ya tenemos para hacer el fullscreen

function launchFullscreen(element) {
//comprobamos si el navegador detecta la api ya que si no lo detecta seguira con moz y webkit
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
//comprobamos si el navegador detecta la api ya que si no lo detecta seguira con moz y webkit
function cancelFullscreen() {
if(document.cancelFullScreen) {
document.cancelFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}

en boton para llamar la accion seria por ejemplo asi

<button onclick="launchFullscreen(document.getElementById('noticias'));">Launch Fullscreen</button>

aqui estoy estoy colocando en fullscreen todo el contenido de elemento con la id noticias tambien agregue la funcion para cancelar el fullscreen con una funcion javascript que debe estar en algun boton dentro del elemento noticias.

El soporte de esta API a la fecha de hoy
Escritorio

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 15 -webkit 9.0 (9.0) -moz ? ? 5.0 -webkit
fullScreenEnabled 20 -webkit 10.0 (10.0) -moz ? ? 5.1 -webkit

Mobil

Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? 9.0 (9.0)-moz ? ? ?
fullScreenEnabled ? 10.0 (10.0) moz ? ? ?
Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more