Code monkey: noviembre 2015

sábado, 28 de noviembre de 2015

Javascript en ejemplos ... uso de document.getElementById().style

En esta ocasión crearemos un ejemplo para editar el estilo de un componente html.

Supongamos que tengo dos div de la siguiente manera:
<div id="miIdentificador1">
       <p>Este es el primer div</p>
</div>

<div id="miIdentificador2">
       <p>Este es el segundo div</p>
</div>

Ahora creo un archivo javascript y escribo una función:
function cambiaEstilo(){
/* código */
}

Para acceder al componente div opto por crear un document y usar la función getElementById(), esta función nos permite acceder mediante su "identificador":

function cambiaEstilo(){
   document.getElementByd("miIdentificador1")
   document.getElementByd("miIdentificador2")
}

Ahora puedo usar la propiedad style para editar el estilo:

document.getElementById("miIdentificador1").style.backgroundColor="#ACD";document.getElementById("miIdentificador1"').style.color="#FF0040";document.getElementById("miIdentificador1").style.marginTop=".98in";
document.getElementById("miIdentificador1").style.fontFamily = "Impact"; document.getElementById("miIdentificador1").style.textAlign = "center";
document.getElementById("miIdentificador1").style.textIndent = "50px";

Para activar este script se puede usar un componente <button>

<button id="miBoton2" onclick="cambiaEstilo()">Cambiar estilo</button>

lunes, 16 de noviembre de 2015

HTML5 en ejemplos no.1

En un post anterior había escrito sobre HTML5, la estructura básica de un documento y algunas características. Además de algunos sitios de interés.

Este lenguaje de hipertexto (en su quinta versión) nos permite incluir etiquetas para incrustar imágenes "dinámicas", manipulación de audio y vídeo, entre otras cosas más. Se considera el asesino de Flash (Adobe Flash), pues pretende que el desarrollador abandone esa tecnología.

Antes del auge de las apps, tablets, iphone, android, etc. Los programadores y diseñadores nos emocionaba(o aterraba) aprender a crear animaciones usando Flash (en ese entonces propiedad de Macromedia), el manejo de líneas de tiempo, fotogramas, efectos, etc. La llegada de HTML5 prácticamente acabo con la necesidad de usar esta tecnología. Depender de la instalación de plugins para reproducir archivos .swf era bastante tedioso para los usuarios (además de que algunos sitios se volvían muy "pesados" en cargar).

¿Qué encontraremos en HTML5?
La capacidad de crear y manipular gráficos, mejor manejo a formularios, mejorar el intercambio de información entre aplicaciones web (ej. metadatos), y conocer la ubicación del usuario. Entre otras cosas más.

1. En este ejemplo haremos uso de la API de Geolocalización.

Creamos un archivo js llamado geolocalizar.js, escribimos:

/*las opciones*/
var options = {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
    };
/*método para mostrar errores*/
    function error(err) {
        console.warn('ERROR(' + err.code + '): ' + err.message);
    };

/*método que define la latitud y longitud del origen*/
    function origen(position){
        var latitud = position.coords.latitude;
        var longitud = position.coords.longitude;

    }
/*método para activar la golocalización
recibe parámetros de opción,error y la posición del origen
*/
    function activa_origen(){
        navigator.geolocation.getCurrentPosition(origen,error,options);
    }

Tenemos ahora una página con formato HTML5 , la llamaremos localiza.html:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Mi primer página HTML5</title>
<script src="geolocalizar.js"></script>
</head>
<body>
<header><h1>Geolocalización</h1></header>
<section id="contenedor">
<article>
CodemonkeyJunior
</article>
<aside>


<button onclick="javascript:activa_origen();">Mostrar Posición</button>

</aside>
<article></article>
</section>
<footer>@codemonkeyjunior</footer>
</body>
</hml>

Links
https://whatwg.org/
http://www.w3schools.com/
https://es.wikipedia.org/wiki/HTML5