Primera Parte: Barra de Charms (Settings) “Políticas de Privacidad” en HTML5 – W8


Hola de nuevo, hace unos días un colega pregunto cómo podría agregar en la barra de Charms (Settings) lo que la tienda solicita a la hora de querer publicar una App realizada en JS (HTML), la “Política de Privacidad” y claro que por nuestra cuenta corre el famoso “Acerca de”, pero antes de empezar debemos de saber que las políticas de privacidad se utilizan cuando tu App usa información del usuario como su nombre o cuando estas extrayendo contenido de Internet.
Supongamos un ejemplo, si tu App es un lector de RSS y no contiene estos elementos es casi seguro (99.9%) que te la rechace la tienda.

Una vez aclarado esto, se los explicare desde 0 para que quede muy claro:

Generamos una nueva App vacía en JavaScript:

1

 

Después nos iremos a nuestro Explorador de Soluciones, agregaremos una carpeta a la cual le pondremos “Charms”, para que dentro de esta le agreguemos 2 más, que llevaran por nombre “privacidad” y “about”.

2

 

A cada carpeta le agregaremos 3 elementos nuevos:  .JS | .CSS | .HTML los cuales llevaran el mismo nombre que el de su carpeta correspondiente.

Debe de quedar así:

3

Para esta primera parte, empezaremos a editar los elementos de “privacidad” que es la más importante en toda App de #Windows8, esta es fundamental para que no haya un rechazo en la Store.

En el archivo “privacidad.js” agregaremos el siguiente código, en la misma imagen les explico un poco sobre su funcionalidad:

4

Después nos pasamos al archivo “privacidad.css”

Cabe destacar que cuando lo agregamos lo único que nos aparece son estas líneas:

body {

}
Las cuales dejaremos intactas y procederemos a escribir lo siguiente debajo de la llave:

.SettingsContent {

margin-top: 24px;

color:black;

margin-left:10px;

text-align:center;

}

Quedando nuestro elemento de la siguiente manera:

 

5

 

 

Después, pasemos al archivo “privacidad.html”, aquí nos percatamos que también nos genera código por default:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>

<title></title>

</head>

<body>

</body>

</html>

El cual editaremos para que nuestro archivo tenga forma y texto.

6

 

Si se dan cuenta en el código les comparto mi liga en donde estipulo las políticas de privacidad, tanto en español como en inglés, esto es porque a la hora de que testean la aplicación, la gente de Microsoft solicita que la información sea válida en algún sitio, así que les recomiendo que hagan lo mismo.
Es obligatorio que pongan un enlace hacia las mismas.
Pueden poner la misma información en un post de su blog, en su página Web o en un sitio gratuito como su servidor.

Además les quiero decir que el texto lo pueden usar (copiar-pegar), no tengo ningún conflicto con ello.

Después abrimos el archivo default.js que se encuentra dentro de la carpeta js

7

 

En este archivo lo que haremos será implementar nuestra barra de Settings que hemos creado, insertando el siguiente código en la parte inferior:

8

 

Compilamos y ejecutamos para ver el resultado.

9

 

10

 

Recuerden que se debe de implementar esto en todas nuestras Apps que consuman algún servicio que no sea local, nos evitaremos el rechazo de la tienda.

Espero y les haya servido, si tienen alguna duda, queja o comentario a favor, todos son bien recibidos.

Los espero en la segunda parte, en donde editaremos los archivos de “About”.

El código de este ejemplo lo dejo aquí.
Hasta pronto!!

Anuncios

3 comentarios sobre “Primera Parte: Barra de Charms (Settings) “Políticas de Privacidad” en HTML5 – W8

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s