Aplicación web (movil) con PHP (parte 5)

Buenas!, ahora que me encuentro en un ligero descanzo del tec me dedicare a hacer esta entrada simple sobre como hacer nuestro blog con el que hemos estado trabajando pero ahora para dispositivos moviles!, para esto vamos a utilizar  jQuery y jQuery Mobile. Estas librerias la verdad me tienen asombrado y es realmente facil empezar a crear paginas para dispositivos moviles con estas librerias, y pues que mejor que empezar ya.

Primero que nada se deben de bajar las librerias de jQuery y jQuery Mobile, pero jquery Mobile requiere de unos archivos .css y algunas imagenes para los estilos css, asi que mejor descarguemos el kit completo desde su pagina oficial: descargar .zip.

Empezemos a modificar nusetro proyecto de netbeans, primero que nada vamos a agregar nuevas carpetas al proyecto y trataremos de dejarlo con esta estructura:

image

creamos esa estructura de carpetas (creando 2 archivos .php que por lo pronto no tendràn nada) y ahi copiamos las librerias que ya descargamos (tal vez no tendrán el mismo nombre, pero se identifican)

Todos los demas archivos son archivos que hemos utilizado en post anteriores.

Ahora que ya tenemos estos 2 archivos php, vamos a trabajar con index.php (obviamente el que esta dentro de “m”).

Como estamos usando jQuery Mobile, este tipos de sitios que utilizan este framework deben de ser utilizados con HTML5 para que tome todas las ventajas que este framework ofrece, asi que debemos de utilizar algunas etiquetas que nos permitira que nusetro sitio web movil se adapte a diferentes resolucinoes ya que todos los dispostivos moviles tienen dimensiones diferentes, asi que basicamente esta será la estructura basica de un sitio web mobil con jQuery Mobile:

image

Esta estructura simple siempre tendra que ser asi y nuestra pagina sera adaptada a los dispositivos moviles.

Template basico

Ahora dentro de la etiqueta <body> vamos a tener una o varias paginas, o sea, dentro de un mismo archivo .php o .html  podran existir varias paginas logicas, o sea en el dispositivo movil aparecera solo una pagina, pero en el mismo archivo podremos tener varias y asi se podra navegar mas rapido entre paginas. Entonces dnetro del body podemos ver la siguiente estructura basica :

image

Y basicamente se vera de esta manera:

image

index.php

Lo que vamos a hacer de manera simple es un listado donde apareceran los primeros 5 posts, utilizando el mismo metodo que vemos en entradas pasadas, asi que este archivo index.php lo vamos a empezar a programar asi :

image

Vamos a empezar a incluir las clases que utilizaremos para mostrar los posts y de una vez le cambiamos el titulo a la pagina

Ahora al body lo modificaremos de esta forma:

image

(agranden la imagen para poder visualizar mejor)

En la linea de codigo 17 estamos indicando que TODO lo que esta dentro de este div sera una pagina, podemos tener varios DIVS parecidos a este y seran diferentes paginas que ya estaran cargadas al cargar este archivo index.php, por el momento solo tendremos una pagina en este archivo index.php, tendro de este DIV principal tenemos 3 divs, que es la estructura de la pagina, el header, content y footer.

Entonces en header esta en la linea 18-20 con un simple titulo.

El contenido esta en las lineas 21-44 y dentro de este tenemos ya codigo PHP que ahora vamos a explicar (y de verdad no entrare en detalle por que es un metodo que ya hemos utilizado anteriormente, si no lo has visto te recomiendo seguir la cadena de posts).

Lineas 22-25.- Aqui estamos agregando un <div> que estara centrado y va a contener una imagen, estaria bien que usaran la misma imagen, esta es la imagen:

Es importante que no le cambien las dimenciones de la etiqueta <img>

Lineas 26 – 43.- Ahora aqui viene algo que tiene que ver mucho con jQueryMobile, como podemos ver es una simple lista, pero contiene atributos que seran utilizados por jQuery, y el primero que podemos ver y ya lo hemos visto en los demas es el “data-role”, aqui indicamos que tipo de elemento movil será, aqui indicamos que sera un listview.

La propiedad data-divider-theme indica el tema que se utilizara, o sea el color y el aspecto que este tendra, pueden cambiarlo de la a-d  y veran los cambios que hay.

Ahora que ya tenemos una lista, necesitamos tener elementos <li>, ya que si conocemos HTML pues una lista es la etiqueta <ul> y sus elementos son los <li>.

Vamos a poner un elemento <li> como si fuera un divisor con un titulo y eso es lo que hacemos en las lineas 27-29 agregamos un <li> con data-role “list-divider” o sea, un divisor de la lista, con otra propiedad role=”heading” por el momento este lo dejaremos asi de simple.

El codigo PHP la verdad no hay que explicarlo, simplemente explicare el codigo html que genera y eso sucede en las lineas 36-40 estamos creando otro elemento <li> que tendran el tema ‘c’, podemos cambiarlo por otras letras para ver como cambia, y dentro del <li> creamos un enlace <a> que nos llevara al siguiente  enlace  leerPost.php?id=, y nos mostrara el titulo del post a la espera que se le de un tap( que sea tocado) para llevarnos de manera automatica a la pagina leerPost que programaremos mas adelante.

Entonces por el momento llevamos esto:

IMG_0005 Los <li> con otro tema->IMG_0006

Ahora vamos a trabajar con la pagina leerPost.php

leerPost.php

En esta pagina se mostrara solo un post, basicamente nomas el titulo y el contenido, pero si ustedes hacen sus propios CSS pueden hacer lo que quieran y que automaticamente se adapte al dispositivo movil, y como tenemos un objeto de la clase Entrada, ps basicamente ahi tenemos fecha, autor, titulo, etc. del post.

Primero que nada vamos a modificar EntradasDAL.php  para agregar una nueva funcion que nos devolvera un solo post, ya que no queremos 5 como lo hace la funcion anterior.

image

Este codigo hasta este punto ya lo debemos de entender sin problemas, ahora seguimos ahora si con leerPost.php

hay que borrar todo el codigo que nos genero netbeans y vamonos por partes, primero la parte inicial del archivo como siempre es codigo php:

image

como estamos mandando una variable por la URL si no existe no debemos de estar en esa pagina y se redirecciona, seguimos con el contenido la pagina (la etiqueta <head> tiene que ser igual que index.php, solo veremos lo que esta dentro del <body>):

image

Como lo vimos anteriormente el primer div (linea 28) es el div de la pagina, seguimos con el div del header (linea 19) la del contenido(linea 36) y la del footer(linea 42).

Primero que nada estamos viendo algo diferente en el div “header”, ya que estamos agregando una etiqueta <a> que actuara como un boton para regresarnos a la pagina inicial, si se dan cuenta en data-role le ponemos que es un button, y el resultado sera el siguiente:

IMG_0007

Y esto es todo por este post y al parecer llegamos al fin de esta serie de post!, comenten cualquier cosa, me gustaria saber que si hay gente que sigue estos posts.

Saludos! Smile

Anuncios

10 comentarios sobre “Aplicación web (movil) con PHP (parte 5)

  1. Disculpa tengo que programar paginas web para dispositivos movil los cuales se puedan ver en el navegador de windows mobile 6.1 me puedes aconsejar por donde puedo comenzar se programar php pero solo para paginas de escritorio pero para mobile soy muy nuevo

  2. la verdad que nunca habia encontrado un tutorial de php tan bien explicado y tan bien hecho. Se entiende todo y es muy instructivo , muchas gracias me ha servido mucho.
    Seria posible algun dia un tutorial sobre MVC, gracias

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. 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 )

Google+ photo

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

Conectando a %s