11

abr

Battery WebApp para Firefox OS

Posted by   Published in WebTools

Ya tengo aprobada mi primera aplicación para Firefox OS, es una webapp que mide el nivel de bateria del dispositivo y te informa si la bateria se esta cargando, descargando con tiempo estimado de carga y descarga.
Ir a Battery – Firefox OS

Tags: , , ,

no comment

1

abr

Guardar objetos en localStorage

Posted by   Published in Code Snippets, Javascript Snippets

funciones para guardar y recuperar objetos en javascript
setObject(key,valor) la key = nombre de la variable que se guardara en localstorage, valor = contenido

Storage.prototype.setObject = function(key, value) {
    this.setItem(key, JSON.stringify(value));
}
 
Storage.prototype.getObject = function(key) {
    var value = this.getItem(key);
    return value && JSON.parse(value);
}

Su uso es el siguiente, para guardar un objecto en javascript con notación json

obj =  {
	'index': 2,
	'lastindex' : 1,
	'notes'
}
localStorage.setObject('nombre',obj);

para recuperar los datos

var obj;
obj = localStorage.getObject('nombre');

Tags:

no comment

10

mar

Prevenir enlace a navegador IOS en pantalla completa WebApps

Posted by   Published in Maquetación web, WebDev Mobile

iPhone Safari Web App opens links in new window,Prevent links in standalone web apps opening Mobile Safari

Cuando corremos una webapp en IOS a pantalla completa, es decir que el usuario la ha puesto como accesso directo a su dashboard.

A la hora de poner un enlace con la etiqueta a, al pulsarlo IOS nos abre el enlace con su navegador, perdiendo el foco la Webapp, para prevenir eso y forzar que los enlaces se abren dentro de la webapp, dependiendo si son enlaces internos o bien externos con el atributo target="_blank"

Código JQuery

jQuery(function($) {
  $('a').on('click', function(event) {
    var href = $(this).attr("href");
    var target = $(this).attr("target");
    if (typeof target === "undefined") {
      //alert('internal link');
      event.preventDefault();
      window.location = href;
    } 
  });
});

Creación de enlace Externo

Para crear un enlace externo solo debemos asignar el atributo target como _blank

<a href="url-a-enlazar" target="_blank">Enlace externo</a>

Tags: , , ,

no comment

10

feb

Obtener el tipo de una variable

Posted by   Published in Code Snippets, Javascript Snippets

con Javascript tenemos la función typeof que nos devuelve el tipo de variable, pero es incompleta, mejor usar typeofEx para obtener mas tipos de variables.

function typeOfEx(v) {
  if (typeof(v) == 'object') {
    if (v === null) return 'null';
    if (v.constructor == (new Array).constructor) return 'array';
    if (v.constructor == (new Date).constructor) return 'date';
    if (v.constructor == (new RegExp).constructor) return 'regex';
    return 'object';
  }
  return typeof(v);
}

Uso de la función typeOfEx

var a = 3223;//variable para testear
alert(typeOfEx(a));

Puedes ver un ejemplo en jsFiddle – función typeOfEx en Javascript

Tags:

no comment

10

feb

CSS Card Flip, voltear un panel con CSS

Posted by   Published in Code Snippets, CSS Snippets

Si necesitas crear el efecto card flip sobre un elemento, lo puedes solucionar usando css y un poco de Javascript “JQuery”

Código HTML y JQuery

    $('.flip').click(function(){
        $(this).find('.card').addClass('flipped').mouseleave(function(){
            $(this).removeClass('flipped');
        });
        return false;
    });
 
 
<div class="flip"> 
        <div class="card"> 
            <div class="face front"> 
                Front
            </div> 
            <div class="face back"> 
                Back
            </div> 
        </div> 
    </div>

Código CSS

body {
 background: #ccc;   
}
.flip {
  -webkit-perspective: 800;
   width: 400px;
   height: 200px;
    position: relative;
    margin: 50px auto;
}
.flip .card.flipped {
  -webkit-transform: rotatey(-180deg);
}
.flip .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
}
.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden ;
  z-index: 2;
    font-family: Georgia;
    font-size: 3em;
    text-align: center;
    line-height: 200px;
}
.flip .card .front {
  position: absolute;
  z-index: 1;
    background: black;
    color: white;
    cursor: pointer;
}
.flip .card .back {
  -webkit-transform: rotatey(-180deg);
    background: blue;
    background: white;
    color: black;
    cursor: pointer;
}

Puedes ver un ejemplo en funcionamiento easy 3D CSS card flip

Tags: , ,

no comment

4

feb

Asignar un icono a una webapp

Posted by   Published in HTML5, Maquetación web, WebDev Mobile, XHTML

En este artículo explicaremos cómo crear un icono para añadir a la pantalla de inicio de un smarthphone, tanto para iPhone, iPad, iTouch, Android y tambien para windows 8 Metro, para una Webapp

Definición de dimensiones y formatos

Hoy dia las pantallas de los smarthphones disponen de diferente desidad de pixel, por eso debemos diseñar los iconos con diferentes dimensiones

El formato de imagen debe ser PNG, podemos usar 32bits para así tener transparencias y canal alpha.

  • iphone, itouch 2G,3G 57×57 píxeles
  • ipad: 72×72 pixeles
  • iPhone 4,4S itouch 3G,4G 114×114 píxeles
  • ipad 3G, tile windows8: 144×144 píxeles
  • las tabletas Android dependiendo de la marca

No es necesario redondear las esquinas de los iconos, en IOS lo hace de forma automática.

Descargar:icon dev for webapp

Una vez diseñado los tamaños de los iconos, debemos asignarlos a nuestra WebApp

Metaetiquetas

Dentro de la etiqueta head de la pagina inicial de la webapp o bien en todas debemos asignar los siguientes metatags

<link rel="icon" type="image/png" href="touch-icon-iphone-144.png" />
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-57.png" /><!-- Standard iPhone --> 
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-72.png" /><!-- Standard iPad --> 
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" /><!-- Retina iPhone --> 
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" /><!-- Retina iPad -->
<meta name="msapplication-TileImage" content="/metro-tile.png"/><!-- metro icon for tile -->
<meta name="msapplication-TileColor" content="#015565"/><!-- color backgroun metro tile -->

Tags:

no comment

3

feb

Mi reset CSS

Posted by   Published in Code Snippets, CSS Snippets
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;} h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;} ul,ol {list-style:none;} fieldset,img,hr {border:none;} caption,th {text-align:left;} table {border-collapse:collapse; border-spacing:0;} td {vertical-align:top;}

Tags: ,

no comment

8

oct

Formatear numero de movil en php

Posted by   Published in Code Snippets, PHP Snippets

la siguiente función ShowMobile() sirve para formatear un número de teléfono correctamente, separado en cantidad de cifras, está diseñada en un principio para numero de móvil españoles y de UK “Reino unido”

Declaración de la funcion ShowMobile()

function ShowMobile($Mobile) {
	$Mobile = preg_replace('/[^0-9+]/', '', $Mobile);
	$len = strlen($Mobile);
	if($len == 9)
		$Mobile = preg_replace('/([0-9]{3})([0-9]{3})([0-9]{3})/', '$1-$2-$3', $Mobile);
	elseif($len == 12)
		$Mobile = preg_replace('/([0-9]{2})([0-9]{3})([0-9]{3})([0-9]{3})/', '($1) $2-$3-$4', $Mobile);
 
	//Ukmobile
	if($len == 8)
		$Mobile = preg_replace('/([0-9]{3})([0-9]{4})/', '$1-$2', $Mobile);
	elseif($len == 11)
		$Mobile = preg_replace('/([0-9]{3})([0-9]{3})([0-9]{4})/', '($1) $2-$3', $Mobile);
 
	return $Mobile;
}

Usar la función ShowMobile

puedes usar la función ShowMobile para número de mobiles como:

  • 9 cifras: 555555555
  • 12 cifras: +34555555555

Reino unido (Uk mobile)

  • 8 cifras: 55555555
  • 11 cifras: 00755555555

Tags: ,

no comment

28

sep

Como detectar el idioma del navegador con Javascript

Posted by   Published in Code Snippets, Javascript Snippets
  var lang = navigator.language || navigator.userLanguage;

Tags:

no comment

28

sep

Como detectar el idioma del navegador con PHP

Posted by   Published in Code Snippets, PHP Snippets

Si queremos obtener el idioma predefinido del navegador web que usa el usuario con php, podemos usar la siguiente función

Funcion GetDefaultLanguage

function parseDefaultLanguage($http_accept, $deflang = "en") {
   if(isset($http_accept) && strlen($http_accept) > 1)  {
      # Split possible languages into array
      $x = explode(",",$http_accept);
      foreach ($x as $val) {
         #check for q-value and create associative array. No q-value means 1 by rule
         if(preg_match("/(.*);q=([0-1]{0,1}\.\d{0,4})/i",$val,$matches))
            $lang[$matches[1]] = (float)$matches[2];
         else
            $lang[$val] = 1.0;
      }
 
      #return default language (highest q-value)
      $qval = 0.0;
      foreach ($lang as $key => $value) {
         if ($value > $qval) {
            $qval = (float)$value;
            $deflang = $key;
         }
      }
   }
   return strtolower($deflang);
}
 
function GetDefaultLanguage() {
   if (isset($_SERVER["HTTP_ACCEPT_LANGUAGE"]))
      return parseDefaultLanguage($_SERVER["HTTP_ACCEPT_LANGUAGE"]);
   else
      return parseDefaultLanguage(NULL);
   }

su uso es tan sencillo como llamar la función GetDefaulLanguage y nos devolverá en formato xx-xx el lenguaje del navegador web.

Tags: ,

no comment
Página siguiente »