Ver una web como si fuese una app
Una vez desarrollada la demo de nuestra app en Html, Muse o Dreamweaver, intentaremos simular el comportamiento de un app nativa.
Para esto, subiremos la web a un servidor (que bien puede ser dropbox) y luego haremos lo siguiente:
Ocultaremos la barra de direcciones y los botones de navegación de safari en un iphone/ipad/android.
Para hacerlo, añadiremos un javascript siguiendo las instruciones de esta página:
https://gist.github.com/nateps/1172490
Una vez incluido el javascrip, añadiremos una linea extra al html de nuestra página, para definir el icono con el que queremos que nuestra web-app se inicie.
[...]Selector de temas en WordPress
Any Mobile Theme Switcher
Si quieres que se vea un tema diferente cuando navegas desde un teléfono móvil:
https://wordpress.org/plugins/any-mobile-theme-switcher/
Ver nuestra web local en un teléfono u otro dispositivo
1. Buscar la dirección IP de nuestro ordenador.
– En PC: Centro de Redes>Conexión de red inalámbrica
– En Mac: ir a Aplicaciones>Utilidades>Utilidad de Red
2. En el WordPress, ir a Ajustes > Generales > Dirección de WordPress (URL) y Dirección del sitio (URL).
Substituir “localhost” por nuestra IP (dejando el :8888). Por ejemplo:
http://localhost:8888/verdi –> http://192.168.254.189:8888/verdi
3. En qualquier dispositivo (móvil, tablet o ordenador) en el que pongamos esta dirección vamos a ver nuestra web.
[...]Depurar webs para dispositivos móviles y tablets
Mediante emulación en el ordenador
Developer Tools para Chrome
- Abrir Google Chrome.
- Menú > Herramientas > Herramientas para desarrolladores
- Asegurarnos en Settings que esté activada la opción “Show ‘Emulation’ view in console drawer.”
- Apretar Esc para abrir la consola de DevTools.
- Seleccionar “Emulation” y escoger el dispositivo que queramos visualizar.
- Hacer click en “Emulate”.
- Refrescar la página (es importante hacer esto porque aunque veamos que la medida ha cambiado hasta que no refresquemos no visualizaremos la versión móvil, si la hay).
Plugins para menús móviles
Usamos en clase:
jQuery Responsive Select Menu
http://wordpress.org/plugins/jquery-responsive-select-menu/screenshots/
WP Responsive Menu
Taller de media query, jquery mobile & selectores de User Agent (para IDEP)
Trabajar en la misma hoja de estilos usando media querys:
En el pasado ya habíamos usado min-width y max-width:
/* si el ancho máximo es menor de 600 */
@media screen and (max-width: 600px) {
/* STYLES GO HERE */
}
Observemos la diferencia entre: min-width y min-device-width
/*iPad en portrait & landscape*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
/*iPad en landscape*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}
Mostrar post con custom fields de una manera diferente en WordPress
Podemos crear plantillas personalizadas para páginas estáticas basándonos en el archivo page.php
Podemos, por ejemplo, duplicar este archivo y darle un nombre como este: page_custom.php
Ahora, incluimos al principio del código de este nuevo archivo lo siguiente:
<?php
/*
Template Name: Mi pagina personalizada
*/
?>
El nombre del template es el que aparecerá después en el menú de administración.
Una vez creado el archivo personalizado, nos vamos a la administración de nuestro blog, y desde la opción de crear/editar una página, debería aparecernos la opción de “Plantilla de página” donde aparecerá el nombre de nuestro nuevo template. Lo seleccionamos y listo… nuestra página se basará en el diseño que hemos hecho.
[...]Listar «custom post»
Para poder listar pos mas fácilmente, cree un functions + content que han de integrar en vuestro template hijo.
Una vez incluido function.php dentro de la carpeta de vuestro tema hijo, podréis listar post de la siguiente manera:
[listar posts_per_page="5" cat="1" orderby="post_date"]
Los «parámetros» de este shortcode son los mismos que los que soporta
http://codex.wordpress.org/Class_Reference/WP_Query
UPDATE (Ejemplos de código)
[listar post_type=»pelicula» posts_per_page=»5″ cat=»2″]
[...]Tutorial en PDF para llevar WordPress de un ordenador a otro
A esta altura no debería hacernos falta, pero como hay gente a la que esto le está dando problemas he preparado un tutorial de como migrar wp en local