Archive for the ‘HTML 5’ Category

Windows 8: integrando JQuery

Una de las cosas que me ha llamado la atención al seguir los tutoriales de Microsoft sobre la programación para Windows 8 utilizando HTML5 y JS es que en los tutoriales se usa la sintaxis que para los usuarios de JQuery o similares puede parecer de la prehistoria.

Me estoy refiriendo al  document.getElementById(“mielemento”)

Este es el código del primer tutorial:

    function buttonClickHandler(eventInfo) {

        var userName = document.getElementById("nameInput").value;
        var greetingString = "Hello, " + userName + "!";
        document.getElementById("greetingOutput").innerText = greetingString;
    }

Puede ser un paso atrás en la programación para los que estamos acostumbrados a otras cosas.

Por suerte para los que trabajamos con librerías tipo JQuery se pueden integrar muy bien en un proyecto de Windows 8.

Para ello tenemos que seguir unos sencillos pasos:

1- Obtener nuestra librería ”preferida”, en mi caso JQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>

Importante: cuando estamos programando y probando nuestra AppMetro en local, el compilador no permite acceder a Internet para usar recurso

La solución pasa por descargar la libreria e incluirla en el proyecto.

2- Incluirla en el proyecto

Importante: incluirla antes de las librerías de nuestras páginas

3- Utilizarla como siempre

Codigo original del tutorial:

    function buttonClickHandler(eventInfo) {

        var userName = document.getElementById("nameInput").value;
        var greetingString = "Hello, " + userName + "!";
        document.getElementById("greetingOutput").innerText = greetingString;
    }

Código utilizando jQuery:

    $(document).ready(function () {

        $("#helloButton").click(function () {
            var userName = $("#nameInput").val();
            var greetingString = "Hello, " + userName + "!";
            $("#greetingOutput").html(greetingString);
        });

    });

 

Con esta integración no debería de ser problemático incluso migrar ciertas webs a un entorno Windows 8. Esto lo probaremos en otro momento.

 

 

Share

CSS3: media queries

Un punto importante si queremos hacer un website utilizando el “Responsive Design” es trabajar los estilos y el diseño en sí mismo. Para ayudarnos a la hora de mostrar nuestro site es diferentes medios y dispositivos tenemos las “media queries”.

Las “Media queries” amplían el atributo “media” llevando la separación de estilos por medio (pantalla o impresora) a un nivel superior al tener en cuenta las resoluciones de los diferentes dispositivos. Las “media queries” son soportadas por los principales navegadores Internet Explorer 9+, Firefox 3.5+, Safari 3+, Opera 7+, Chrome así como por la mayoria de los smartphones, tablets y otros dispositivos móviles.

Por lo general con el atributo media, se pueden usar al definir los enlaces a ficheros de estilos:

<link rel="stylesheet" type="text/css" media="screen" href="screen.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">

O se pueden definir dentro de un fichero de estilos :

@media screen {
/* Estilos para mostrar en pantalla */
}
@media print{
/* Estilos para mostrar en impresora */
}

Al introducir las “media queries” en el atributo media las definiciones quedan de la siguiente manera:

&lt;link rel="stylesheet" type="text/css" media="screen <strong>and (max-width:480px)</strong>" href="screen.css"&gt;

O en el fichero de estilos

@media screen <strong>and (max-width:480px)</strong> {
/* Estilos para mostrar en pantalla */
}

La siguiente tabla muestra las características que se pueden usar en el atributo media:

Característica valor Permite Min/Max Descripción
width ancho Ancho del área visible
height alto Alto del área visible
device-width ancho Ancho del dispositivo
device-height alto Alto del dispositivo
orientation “portrait” o “landscape” No Orientación del dispositivo
aspect-ratio Ratio (w/h) Ratio entre el ancho y el alto, expresado en 2 números separados por una barra (16/9)
device-aspect-ratio Ratio (w/h) Ratio entre el ancho y el alto del dispositivo, expresado en 2 números separados por una barra (16/9)
color Número Número de bits por componente de color (si no el color, el valor es 0)
color-index Número Número de entradas en la tabla de color del dispositivo
monochrome Número Número de bits por píxel en la memoria de vídeo monocromo (blanco y negro si no, el valor es 0)
resolution Resolución Densidad de los píxeles de dispositivo de salida, como se expresa entero seguido de dpi o dpcm.
scan “progressive” o “interlace” No Proceso de digitalización utilizada por los dispositivos de TV
grid 0 o 1 No Si se establece en 1, el dispositivo está basado en red, tal como un terminal de teletipo o pantalla del teléfono con una sola fuente fija (todos los otros dispositivos son 0)

En la práctica, lo que nos va a interesar son las definiciones básicas para los dispositivos más usados:

/* Smartphones (landscape) */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* Desktops and laptops */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/* iPads (landscape) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
Share