Combinar javascript y PHP: AJAX.

La definición de AJAX seria la siguiente: 

AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano.

Eso nos da la idea de poder usar PHP de manera interactiva como si se tratase de Javascript, o sea podríamos combinar Javascript y PHP de manera que se ejecuten cuando se desee.

Lo primero es crear el  objeto XMLHttpRequest, el cual nos ayudará a enviar nuestra consulta asincronica al servidor:

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

El anterior código es un script por lo que iría dentro de los tags <script>.

Así ya tenemos nuestro objeto XMLHttpRequest y ahora lo podremos usar para pedir Gets al servidor, eso lo hariamos de la siguiente simple forma:

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

Donde 'ajax_info.txt' es la petición que le queremos hacer a nuestro servidor, aquí es donde podríamos llamar a un archivo PHP y así unir Javascript con PHP y hacer a PHP mas interactivo.

Ahora nos falta como obtener la respuesta de nuestra petición, la forma mas facil y util es crear un tag <div> y volcar el contenido pedido sobre el, eso se haría de la siguiente forma:

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax_info.txt",true);

xmlhttp.send();

La propiedad onreadystatechange se usa si nosotros pusimos true en el tercer parámetro del open() , puesto que ese parametro indica si queremos que la petición sea asincrona o sincrona, entonces true indicaría que lo queremos asincrono, 

con eso creamos una función anonima que se ejecute cuando ocurra la petición y dentro ponemos el codigo que manejará la respuesta,  en este ejemplo el div tiene un id que se llama myDiv, así tomamos la respuesta desde nuestro objeto XMLHttpRequest  y lo introducimos dentro del div. 

Algo que destacar es que la respuesta puede ser de dos tipos: Text o XML, la text es la que usamos en el ejemplo anterior y es simple de manejar por ser solo texto que se vierte en algún lugar, pero el tipo XML es mas util en casos de tener nuestro archivo en el servidor en formato xml, así podremos obtener información de manera ordenada por la propiedad de orden de xml. 

La forma de manjar el tipo XML de la respuesta seria la siguiente:

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br>";
  }
document.getElementById("myDiv").innerHTML=txt;

En el ejemplo nuestro get es sobre un archivo que se llama cd_catalog.xml, entonces lo que hacemos es obtener la respuesta desde el objeto xmlhttp y guardarlo en una variable, después de esto obtenemos la información taguiada desde nuestro archivo con getElementsByTagName y así obtenemos lo que queremos y lo manejamos a nuestro gusto.

Para mas información sobre AJAX visite la pagina: 

http://www.w3schools.com/ajax/default.asp

Insertar GoogleMap en su pagina HTML5

Para insertar un mapa de google maps existen varias formas, pero ahora les mostare la forma para programadores que quieren exactitud y manejo completo del mapa.

lo primero es cargar la fuente desde donde se obtendran los motedos para manejar la api de google maps:
<script src="http://maps.google.com/maps/api/js?sensor=false" 
type="text/javascript"></script>

Lo segundo es definir las propiedades de nuestro mapa:

<script type="text/javascript">
    function initialize() {
        var latlng = new google.maps.LatLng(57.0442, 9.9116);
        var settings = {
            zoom: 15,
            center: latlng,
            mapTypeControl: true,
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
            navigationControl: true,
            navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
            mapTypeId: google.maps.MapTypeId.ROADMAP
    };

Las propiedades que se ven son vastante obvias, como el zoom inicial y el centro del mapa.

Tercero, ahora crearemos nuestro mapa:

var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

Lo cual creara nuestro mapa, pero la pregunta es ¿donde?, claro necesitamos
un lugar donde insertar nuestro mapa, para eso solo definiremos un tag <div>
en el cual pondremos nuestro mapa:

<div id="map_canvas" style="width:800px; height:500px"></div>

Le damos la id que hará que el mapa cargue ahí y le damos un tamaño de 800X500 pixeles,
Con esto ya tendremos nuestro mapa listo para ser usado.

Para mas información y el manejo de otras funciones del mapa ir a la pagina:

https://developers.google.com/maps/?hl=es

Códigos ejemplo obtenidos de: http://www.elwebmaster.com/general/insertar-y-personalizar-google-maps-en-tu-sitio-web

Manejo de base de datos con PHP.

El manejo de base de datos con php es bastante fácil, para iniciar una conexión con la base de datos se haría de la siguiente forma:


como ejemplo de conexión a una base de datos Mysql:

<?php

#Conectamos con MySQL

$conexion = mysql_connect("NombreHost","Usuario","Contraseña")

or die ("Fallo en el establecimiento de la conexión");

#Seleccionamos la base de datos a utilizar

mysql_select_db("NombreBaseDatos")

or die("Error en la selección de la base de datos");

# ################################### #

# Aquí insertaríamos las consultas sobre la base de datos #

# ################################### #

#Cerramos la conexión con la base de datos

mysql_close($conexion);

?>

Aunque la anterior forma ya se esta descontinuando, los creadores de PHP sugieren usar PDO para abrir sus conexiones con las bases de datos, PDO ( PHP Data Objects) es una forma mas segura de usar base de datos en php y no solo se utiliza para mysql también se puede usar en otras base de datos sin ningun problema, la forma seria la siguiente: 

try

{

  $con = new PDO('mysql:host=localhost;dbname=personal', 'user', 'pass');

  $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

//ejemplo de obtención de datos de una tabla

  $datos = $con->query('SELECT nombre FROM personal');

  foreach($datos as $row)

    echo $row[0] . '<br/>';

}

catch(PDOException $e)

{

  echo 'Error conectando con la base de datos: ' . $e->getMessage();

}

La anterior forma seria de una consulta simple, pero para agregar seguridad y facilidad de manejo de variables se puede usar Prepare, con lo cual se prepara la consulta antes de ser ejecutada, y luego se le asignan los valores que se tienen como variables, esto se realiza indicando cual es la variable anteponiendo : al nombre de la variable y luego en el execute() se le indica cual era la variable y su valor de donde se obtiene, esto se hace poniendo el nombre de la variable luego => y seguido de la variable que se quiere usar, seria asi: ':variable' => $valorDeVariable.

try

{

  $con = new PDO('mysql:host=localhost;dbname=personal', 'user', 'pass');

  $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  $stmt = $con->prepare('SELECT nombre FROM personal WHERE apellidos like :apellidos');

  $stmt->execute(array(':apellidos' => $ape ));

De esta forma se hace una conexión simple y segura a una base de datos con PHP.

Para más información visite la útil página de PHP:

php.net/manual/es

Uso de javascript para su pagina HTML5.

Es normal que para las paginas web se usen componentes que se ejecutan delñ lado del cliente cuando la pagina ya esta cargada en su navegador, estos componentes son de gran utilidad ya que dan una gran cantidad de opciones de programación en paginas web, uno de estos lenguajes es Javascript que tiene algunas cosas parecidas a el lenguaje que le da su nombre Java, pero eso es historia.

A continuación les mostrare como insertar código javascript en su pagina: 

Lo básico es hacer la diferencia entre código javascript y html, para lo cual se abre un tag que se llama script y se escribe adentro el código:

<script>
function myFunction()
{
//una función.
}
</script>

Una de las cosas que hacen que la programación sea mas facil es que las variables no necesitan tipo por lo cual se pueden llamar y usar como se les de la gana, solo se debe declarar la variable con la palabra "var" :

var x; 

var y = 2;

Las funciones se hacen de la forma normal de un lenguaje de programación, pero algo que destacar es su funcion anonima, la cual como lo dice su nombre es una función que se llama sin darle ningun nombre, o sea solo se usa, un ejemplo seria el siguiente:

var displayClosure = function() {
    var count = 0;
    return function () {
        return ++count;
    };
}
var inc = displayClosure();
inc(); // devuelve 1
inc(); // devuelve 2
inc(); // devuelve 3

el ejemplo anterior muestra como se crea y define una función sin nombre la cual se ejecuta cuando se llama a la variable asignada.

para mas información de funciones y usos ir al siguiente enlace:

www.w3schools.com/js/‎

Para que se haga entretenido usar javascript les dejo el siguiente enlace de un ejemplo donde al hacer scrooll
el panel va cambiando de tonalidad:

http://www.ajaxshake.com/demo/ES/1118/d952910e/crear-un-menu-sorprendente-con-estilo-de-aplicacion-movil-mmenu.html

Libreria para aplicar Responsive Design: Bootstrap.

Bootsrap es una librería que ademas de darnos diseños y plantillas ya hechas para nuestro uso, nos da la facilidad de no preocuparnos por como haremos para el Responsive Design de nuestra pagina, puesto que Bootstrap se encarga de eso de manera que nosotros nos preocupemos solo de escoger como será nuestra pagina.

Para usar bootstrap se deben llamar las siguientes librerias:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

Las cuales son los java scripts de boostrap y su hoja de estilo.
IMPORTANTE: Para usar Boostrap es necesario llamar a la libreria de jquery.

Una plantilla basica de una pagina que usa Boostrap deberia ser asi:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


La cual no muestra nada, solo tiene lo básico para usar bootstrap.

para saber cuales son sus componentes recomiendo visitar la pagina oficial:

http://getbootstrap.com

Un concejo para usar los componentes es cargar la pagina donde muestra el código de boostrap hacer click derecho y escoger ver código fuente de la pagina, de esta forma sabrán exactamente como se usa el componente que quieren usar de boostrap.

como ejemplo de esto muestro a continuación un código de boostrap que crea un panel independiente llamado Modal:

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


Como observan en el código, este es de la forma normal de un conjunto de div en HTML5, pero con el agregado de que a los div se les agrega Class con los nombres correspondientes a los componentes de Boostrap que se quieren usar, si no se le agregan estas etiquetas boostrap no podrá re-dimensionar el componente ni aplicar el estilo a la pagina y sus componentes.

para encontrar toda la lista de componentes, estilos css y javascrips que boostrap ofrece dirigirse a su pagina oficial.

http://getbootstrap.com

cargar imágenes desde un móvil con HTML5

Un problema recurrente para los programadores web es la carga de multimedia desde dispositivos móviles, ya que estos aunque están en gran demanda y avanzando en su tecnología de manera exponencial, aun siguen inmaduros en su convergencia hacia los mismos protocolos, menciono esto ya que existen muchas formas engorrosas de subir un archivo multitudinaria desde el móvil a un servidor, como instalando aplicaciones aparte para que esto se pueda lograr. Para solucionar la problemática HTML5 ha incorporado 3 métodos en orden creciente:

1. HTML Media Capture
2. device element
3. WebRTC

HTML Media Capture:

HTML media capture es simple de usar y compatible con varios navegadores moviles.

simplemente se utiliza el tag <input type"file"> al cual se le debe sumar la opcion accept="image/*; capture=camera", con lo cual se le da acceso a la camara del celular y a los archivos dentro del sistema.

<input type="file" accept="image/*;capture=camera">

para grabar vídeo y sonido es lo mismo pero pidiendo capture= camcorder y microphone.

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

es la forma mas básica para manejar multimedia desde un dispositivo móvil.

Soporte:

• Android 3.0 browser
• Chrome for Android (0.16)
• Firefox Mobile 10.0
• iOS6 Safari and Chrome (soporte parcial).

device element:

EL tipo device element era la evolución del HTML media capture, dando un mejor control a los archivos y medios de manejo de media.

este método no es compatible con los actuales navegadores, por lo cual fue solo una prueba para llegar al ultimo:

<device type="media" onchange="update(this.data)"></device>
<video autoplay></video>
<script>
  function update(stream) {
    document.querySelector('video').src = stream.url;
  }
</script>

WebRTC:

Y por ultimo el que actualmente trata de tomar las riendas de el acceso movil a los medios WEBRTC con su metodo de java script navigator.getUserMedia():

Deteccion de compativilidad:

con el siguiente código podrán saber si su navegador es compatible con este método.

function hasGetUserMedia() {
  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
  // Good to go!
} else {
  alert('getUserMedia() is not supported in your browser');
}

este metodo todavia no es compatible con gran cantidad de navegadores moviles siendo los compatibles: Chrome 21, Opera 18 y Firefox 17.




para mas información sobre estos métodos ingrese a este link: http://www.html5rocks.com/en/tutorials/getusermedia/intro/