Pelagic Shark Dive (no cage)

Swimming with sharks in open waters, two version of this story, by a couple who did in Oahu, Hawaii #oahu #hawaii #openwatersnorkel #sharkdiving #openwatersharkdive #pelagicdive #pelagicsharkdive #cagelesssharkdive
Here’s the post:
Anuncios

The 5-3-1 Rule

Think back to all the times you and your partner finally get time to go on a date… when suddenly you’re stuck in indecision and indecisiveness. I have been guilty myself of saying things like “I don’t care, you pick.” When lets be real, I did care. This is where the 5, 3, 1 rule comes in! #couplethings #couplerules #coupleadvice #couples #couple #foodie

Here’s the article:

5-3-1 rule

The Devastating impact of the Ga Rule

By further expanding the Gag Rule, the hope was to reduce abortion rates and promote alternatives. However, from historical context we know that the Gag Rule comes with a substantial price. #thegagrule #womenrights #familystudies #womenchoice #sexed #sexualeducation #GagRule #birthcontrol

Here’s the article:

the devastating impact of the gag rule

Ultimamente es difícil decidir cual medio tiene mas impacto: Web o App’s, lo que si es seguro, es que la Web sigue y seguirá siendo necesario para los medios de difusión de cualquier marca. Recientemente es muy común que cada Sitio Web, o marca tenga su propia aplicación para móviles, y en un esfuerzo por hacer mas fácil la experiencia del usuario, se han creado medios para lograr que Web y App trabajen juntas. Un ejemplo es; promover desde los sitios Web el Uso de las App’s, y esto nos lleva al articulo de hoy: sugerir al usuario, que abra nuestra App ( si esta instalada) o que la descargue (Si no esta instalada).

Safari Mobile (iPhone, iPod y  iPad) a partir de iOS 6, implemento los “Smart App Banners”, los cuales realizan la función de proporcionar al usuario la opción de Instalar/Abrir la aplicación, usando solo un  meta tag en nuestro documento:

 ; 

app-id=                  ID de nuestra App en la Apple Store
affiliate-data=      Información de la cuenta para dar seguimiento a tu App (cuantos clics, cuantos instalaron desde el banner, etc.)
app-argument =   Es un parametro con el cual podemos enviar al usuario a determinada sección de la app.

Bastante sencillo,  hu !?

Pero… que pasa si queremos modificar las opciones que apple nos da ? por ejemplo queremos cambiar el tiempo que este banner permanece oculto una ves que el usuario lo cierra, o queremos que una ves que usuario instale la App, el banner no se vuelva a mostrar hasta después de determinado tiempo, o tal vez nuestra App no tiene suficientes estrellas en el Rating, y queremos ocultarlas;  o peor aun… queremos que nuestro banner funcione en otros exploradores y no solo Safari, y que tal si… ademas queremos que funcione en otros dispositivos como Android , Windows Phone, o incluso BlackBerry ( si…aun existen).

Bueno, si ese es el caso, puede que este articulo sea de utilidad.

Antes que nada no es posible saber de primera mano, si una App esta instalada o no, esto es por razones de seguridad, Pero lo que si podemos hacer, es un Script que Intente abrir nuestra App, y si falla, envíe al usuario a la AppStore/PlayStore para descargar.

HTML

El Iframe es para evitar la alerta de Safari “safari cannot open …”, esto sucede cuando la App no esta instalada.

 

JS

Basicamente nuestro Script intenta abrir el Custom Protocol de nuestra App, si la App no esta instalada, entonces enviara al usuario a App Store. PLay Store, etc. dependiendo de que dispositivo se encuentre.

(function(){
$('.smartbanner-button').click(function(){ 
    var fallbackLink = 'http://facebook.com'+window.location.search+window.location.hash; // aqui es donde enviremos al usuario, si esta en una Laptop/Desktop 
    var isiOS = navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone') || navigator.userAgent.match('iPod'),
        isAndroid = navigator.userAgent.match('Android'), isWindowsPhone = navigator.userAgent.match(/iemobile/i);// isBlackBerry = navigator.userAgent.match('Mozilla/5.0 (BB10; ) AppleWebKit/537.10+ (KHTML, like Gecko) Version/ Mobile Safari/537.10+');
if (isAndroid) {
    document.getElementById('loader').src = 'fb://'+window.location.search+window.location.hash; // intentando abrir mediate Custom Protocol
    fallbackLink = 'https://play.google.com/store/apps/details?id=com.facebook.katana&hl=es';  // si falla, este es el link para descargar nuestra App
}
if (isiOS) {
    document.getElementById('loader').src = 'fb://'+window.location.search+window.location.hash;
    fallbackLink = 'https://itunes.apple.com/us/app/facebook/id284882215?mt=8';
}
window.setTimeout(function (){
    window.location.replace(fallbackLink); 
}, 100);     
});  
})();

Ahora solo necesitan agregar los estilos a su banner, y crear un botón con la classe “smartbanner-button” y tendrán algo como esto:
SmartBannerApp

Aqui esta el demo, para probar en dispositivos : WORKING DEMO

Esta es una Aplicación hecha por @marcos_gn1 gran iOS Developer y amigo, para este demo hemos reemplazado el link para android, pero la funcionalidad no cambia, cualquier duda, no duden en comentarla en el Blog Personal o aqui.
Sigueme en Google Blogger

Crear Web Appi con HTML5 y SVG

Crear una aplicación web (Appi), puede resultar algunas veces más sencillo de lo que pensamos, todo depende del tiempo que invirtamos en planearla, ya que éste proceso es crucial para tener buenos resultados, esta ocasión crearemos una aplicación utilizando HTML5, JavaScritp e imágenes SVG.

Pero primero… ¿Que son imágenes SVG?
Este tipo de imágenes (Scalable Vector Graphics), son la onda por 3 razones:

* Tamaño de archivo mucho menor
* Responsive
* Aptas para pantallas Retina

Básicamente son archivos con coordenadas, y cualquier imagen de vectores puede ser guardado como SVG, y no necesitamos ningún tipo de conversión para poder utilizarlas en web.

amon
Una forma de utilizar este tipo de imágenes, es creando interacción con el usuario, para cambiar el color de los elementos por ejemplo. Que es básicamente lo que hace la aplicación de “Paint 4 kid’s” , la cual esta hecha completamente con tecnologías web ( HTML, css y JavaScritp )

Podemos crear algo similar de una versión básica de la siguiente forma:

Jquery

window.addEventListener('load', eventWindowLoaded, false);
var undo_element = $('path[class="colorable"]')[0];
var undo_to_color = "white";	
function eventWindowLoaded() {
   add_coloring_book_events();
}
function add_coloring_book_events() {
    $('path[class="colorable"]').bind("click", function(event) {
	event.preventDefault();
	undo_element = this;
	undo_to_color = $(this).attr("fill");
	$('#undo_redo').attr("value", "Atras");
	color_chosen = $("#color_chosen").html();
        $(this).attr("fill", color_chosen); 
    });
    $('.color_choice').bind("click", function(event) {
       color_chosen = $(this).attr("id");
       $("#color_chosen").html(color_chosen); 
    });
    $('#reset_image').bind("click", function(event) {
	$('path[class="colorable"]').attr("fill", "white");
	$('#undo_redo').attr("value", "Atras");
	undo_element = $('path[class="colorable"]')[0];
	undo_to_color = "white";
    });
    $('#undo_redo').bind("click", function(event) {
	existing_color = $(undo_element).attr("fill");
	$(undo_element).attr("fill", undo_to_color);
	undo_to_color = existing_color;
	if ($(this).attr("value") == "Atras") {
	    $(this).attr("value", "Adelante");
	} else {
	    $(this).attr("value", "Atras");
	}
    });
}

uniform
El Resultado, es una aplicación que nos permite manipular los colores de los elementos, en este ejemplo, se trata de un personalizador de ropa, que bien podría ser para customizar uniformes, o productos.

Puedes ver esta Appi funcionando aquí: Demo
Ver código en Github
Editarlo en vivo en Mozilla Webmaker
Descarga los archivos comprimidos
Leer Tutorial en mi pagina personal y comenta tus dudas
O sígueme en Blogger

Siéntete libre de comentar y compartir este articulo si te ha sido de utilidad, Saludos !