Mostrando las entradas con la etiqueta HTML5. Mostrar todas las entradas
Mostrando las entradas con la etiqueta HTML5. Mostrar todas las entradas

miércoles, 26 de noviembre de 2014

Comprimir código fuente html con PHP

Vamos a ver una función en php muy interesante si queremos reducir el peso de nuestras páginas web, eliminando espacios en blanco innecesarios en nuestro código html final. Quedándonos nuestro código fuente final limpio de espacios en blanco innecesarios, tabulaciones, etc…
En la función se utilizan expresiones irregulares, pero debemos tener cuidado con ella ya que consumen bastantes recursos en el servidor, pero si las utilizamos por ejemplo para para subir el contenido bienen muy bien.

domingo, 26 de mayo de 2013

MOSTRAR SITIOS PARA MÓVILES EN ESCALA CORRECTA CON VIEWPORT

MOSTRAR SITIOS PARA MÓVILES EN ESCALA CORRECTA CON  VIEWPORT

Prácticamente todos los navegadores de smartphones al entrar a un sitio analizan el tamaño total y lo escalan para que se muestre completo en la pantalla, este procedimiento genera muchas veces resultados incorrectos y dolores de cabeza para los desarrolladores para web móvil.
Por ejemplo la imagen que se muestra a continuación tiene un gráfico que mide 320 pixels al igual que la pantalla del device, sin embargo, el gráfico aparece con un tamaño muy inferior a causa del efecto de escala automática.
Esta es una conducta normal del navegador, pero cuando estamos construyendo una versión móvil del sitio o unaaplicación phoneGap puede generar problemas para diagramar un sitio que se vea consistente en todas las plataformas. La escala automática se puede prevenir y controlar de forma muy sencilla utilizando el atributo viewport. Vamos a revisar a profundidad esta útil técnica.

Insertar el viewport

El viewport es un atributo del tag <meta> que  debe incluirse entre las etiquetas <head> de un documento HTML , siguiendo este  patrón básico:
<!DOCTYPE html>
<html lang="es">
<head>
<head>
      <title> Tamaño adaptado a un móvil </title>
      <meta name="viewport" content="width=device-width"/>
</head>
<body>
<h1>Contenidos del Documento </h1>
</body>
</html>
Con solo agregar estas líneas de código al documento del ejemplo, se mostrará a escala correcta en la pantalla de un equipo  móvil:

Configurando el Viewport

El viewport es el  área visual en la cual mostramos un documento HTML y podemos manipular esta  característica para controlar como mostrarlo en la pantalla de un  móvil. Utilizando sus atributos podemos configurar elementos como el ancho, alto, tamaño y escala. A continuación la lista completa de propiedades del viewport:

Dimensiones

Es posible definir un tamaño especifico para el  área visible del documento, muchos sitios toman el camino rápido y ajustan el viewport a 320 px para ajustar el aspecto  al display vertical de un iPhone, usando un  código similar a este
<meta name="viewport" content="width=320"/>
Pero, con la enorme fragmentación de equipos y tamaños de pantalla, definir un tamaño especifico como en elejemplo anterior es una mala practica que puede mostrar resultados incorrectos en algunos equipos o cuando el dispositivo cambia de posición, afortunadamente podemos configurar el viewport para ajustarse dinámicamente al tamaño de cada dispositivo usando el atributo “device-width” que es equivalente al 100% del ancho de la pantalla del  dispositivo, independiente de su tamaño, posición o resolución:
<meta name="viewport" content="width=device-width"/>
El alto de la pantalla  también es configurable con las mismas propiedades a través del atributo “height” , aunque – salvo condiciones muy especificas- no es necesario definirlo. Esta propiedad se asignará automáticamente a través del scroll.

Escala

También podemos controlar la escala de la vista con el atributo “initial-scale“. Por ejemplo con este  código el sitio se mostrará al doble de su tamaño original:
<meta name=”viewport” content=”width=device-width; initial-scale=2“/>

Es posible ademas, limitar el tamaño al que se puede escalar el sitio con el atributo “maximum-scale” . El siguiente ejemplo muestra el documento en escala correcta y permite escalarlo hasta al doble de su tamaño.
<meta name="viewport" content="width=device-width, maximum-scale=2"/>
Por ultimo está el atributo  ”user-scalable“  controla los permisos de escala del documento,con el siguiente código, el sitio se muestra en su escala original y no es posible cambiar el  tamaño desde el dispositivo móvil.
<meta name="viewport" content="width=device-width, user-scalable=no"/>
Importante mencionar que no se recomienda deshabilitar la opción de escalar el contenido

 Viewport optimizado para móviles

El atributo viewport permite muchas configuraciones, pero para asegurar compatibilidad con la mayor cantidad de pantallas y navegadores móviles, se recomienda utilizar este formato como base:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Conclusión

Los dispositivos móviles escalan  automáticamente los documentos HTML generando en ocasiones resultados no deseados. Podemos controlar el  área visible de un documento a través del atributo viewport y sus propiedades.
La configuración del viewport nos será de gran utilidad tanto para la web  móvil en HTML5 como en aplicaciones basadas en phoneGap. Se recomienda usar el viewport optimizado para móviles para garantizar la compatibilidad con la mayor cantidad de resoluciones y plataformas.
Los archivos con los diferentes ejemplos están disponibles para descargar y probar.[descargar ejemplos]

pagina de referencia
http://revolucion.mobi/2012/02/14/mostrar-sitios-para-moviles-en-escala-correcta/

viernes, 24 de mayo de 2013

Atajos de teclado en Sublime Text 2


Sublime Text 2 se convirtió en mi editor por defecto, después de probar grandes IDE como Eclipse, Netbeans, Aptana decidí adoptar a este liviano y “sencillo” editor, además de tener una versión completamente funcional y gratuita existe para Windows, Mac OS y Linux, además de contar con una buena cantidad de plugins que facilitan la vida.
Me he encontrado con esta interesante lista de atajos de teclado, bastante útiles.

General – Sublime Text 2

Mac OS XWindows/LinuxDescripción
?PCtrl+PIr a
??PCtrl+Win+PIr al proyecto
?RCtrl+RIr al método/símbolo
?GCtrl+GIr a la línea
?KBCtrl+KBMostrar/Ocultar barra lateral
??PCtrl+Shift+PSímbolo del sistema
Ctrl + <Ctrl + <Mostrar consola
??NCtrl+Shift+NNueva ventana (útil para nuevos proyectos)

Editando – Sublime Text 2

Mac OS XWindows/LinuxDescripción
?LCtrl+LSeleccionar la línea (repite la selección en las líneas siguientes)
?DCtrl+DSelecciona la palabra (repite la selección permitiendo edición múltiple)
??MCtrl+Shift+MSeleccionar contenido del actual paréntesis
???Ctrl+Shift ?Insertar línea antes de la actual
??Ctrl ?Insertar línea después de la actual
??KCtrl+Shift+KEliminar la línea
?KKCtrl+KKEliminar desde el cursor hasta el final de la linea
?K?Ctrl+K+?Eliminar desde el cursor hasta el principio de la línea
??DCtrl+Shift+DDuplicar línea/s
?JCtrl+JUnir líneas
?KUCtrl+KUConvertir a Mayúsculas
?KLCtrl+KLConvertir a Minúsculas
? /Ctrl /Commentario
?? /Ctrl+Alt+ /Bloque de comentario
?YCtrl+YDeshacer o repetir
??VCtrl+Shift+VPegar e identar
? espacioCtrl espacioAutocompletar (repite hasta encontrar la próxima sugerencia)
?MCtrl+MSaltar al próximo paréntesis
?UCtrl+UDeshacer “blando” (deshacer paso a paso)
??UCtrl+Shift+URehacer “blando” (rehace paso a paso)

XML/HTML – Sublime Text 2

Mac OS XWindows/LinuxDescripción
??ACtrl+Shift+ASeleccionar contenido dentro de una etiqueta
?? .Ctrl+Shift+.Cerrar etiqueta

Encontrar y Reemplazar – Sublime Text 2

Mac OS XWindows/LinuxDescripción
?FCtrl+FEncontrar
??FCtrl+HReemplazar
??FCtrl+Shift+FEncontrar en archivos

Divisiones y Pestañas – Sublime Text 2

Mac OS XWindows/LinuxDescripción
??1Alt+Shift+1Una sóla columna
??2Alt+Shift+2Dos columnas
??3Alt+Shift+3Tres columnas
??4Alt+Shift+4Cuatro columnas
???2Alt+Shift+8Dos filas
???3Alt+Shift+9Tres filas
??5Alt+Shift+5Grid (4 grupos: 2 filas por 2 columnas)
?[1,2,3,4]Ctrl[1,2,3,4]Focus en el grupo
??[1,2,3,4]Ctrl+Shift[1,2,3,4]Mover archivo en el grupo
?[1,2,3…]Ctrl+[1,2,3...]Seleccionar pestaña

Favoritos – Sublime Text 2

Mac OS XWindows/LinuxDescripción
?F2Ctrl+F2Mostrar/Ocultar Favoritos
F2F2Favorito siguiente
?F2Shift+F2Favorito anterior
??F2Ctrl+Shift+F2Eliminar favoritos

Marcar – Sublime Text 2

Mac OS XWindows/LinuxDescripción
?K spaceCtrl+K+spacioSetea una marca
?KWCtrl+KWEliminar desde el cursor hasta la marca
?KACtrl+KASeleccionar desde el cursor hasta la marca
?KGCtrl+KGEliminar marca

Instalar extensiones en Sublime Text 2


Tutorial simple para instalar extensiones en Sublime Text 2

Al principio pensaba que estaba
relacionado a la marca de un chocolate (?)
Sublime Text 2 es un editor de texto simpático que funciona en Linux, Mac y Windows. El poder de Sublime Text 2 se encuentra en las extensiones o plugins: completado inteligente, integración con Git, manejo de archivos de proyecto, diff, entre otras delicias un programador sabrá agradecer.

Aunque  la versión de prueba funciona bien y sin restricciones, vale la pena pagar por Sublime Text2.

La primera vez que usé Sublime Text 2 fue una frustración completa para mi porque venia de usar IDEs como Netbeans y Visual Studio (malacostumbrado) y no entendía cómo instalar Plugins. Hice el presente tutorial para ayudar a comprender el funcionamiento del Package Control. Al final hay una lista de paquetes interesantes según mi modesta experiencia.


1. Instalar Sublime Text 2

Sublime Text 2 es facil de Instalar en Windows, Linux y OSX. No hay mucho que decir sobre la instalación. El problema en Sublime Text 2 es entender es el Package Control: no está activado desde la primera instalación y no hay indicios para los novatos acerca de su activación (a pesar de buscar con persistencia en el Menú).

2. Instalar el Package Control

Para activar el Package Control abrimos la consola usando el menú View > Show Console y en la caja de texto inferior pegamos lo siguiente:

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

Tal como vemos aquí:
Hay que adminitilo: Una manera Friki de instalar Package Control en Sublime Text 2
Luego presionamos Enter. Esperamos un momento. Ahora Sublime Text 2 nos pide reiniciar el programa. Finalmente hay un nuevo elemento en Preference > Package Control. Listo ya tenemos lo que queríamos

 Otra manera de instalar el Package Control de manera artesanal y altas emociones se encuentra en: http://wbond.net/sublime_packages/package_control/installation

Para instalar los Plugins usaremos el menú oculto de Sublime Text 2 presionando Shift + Ctrl + P. En la caja emergente escribe "Install Package", presiona Enter. Como resultado obtenemos una lista. Seleccionamos el paquete que nos interesa en la lista, esperamos el momento que dura el proceso y listo, ya tenemos la extensión instalada en Sublime Text 2.

Shift + Ctrl + P en Sublime Text 2
2. Paquetes de Sublime Text 2 recomendados

Hice una pequeña lista recomendando paquetes que puedes usar según mi experiencia:

SublimeLinter
Subraya los potenciales errores de un programa, muy útil para ahorrar tiempo detectando la falta de un punto y coma o el cierre de paréntesis.
SublimeLinter ayuda mucho.
Alignment
Formatear código rápido presionando Ctrl + Alt + a.
Mucho mejor y más claro.
FileDiffs
Compara archivos entre los Tabs actuales.
Diff Sencillo sin problemas.
SublimeCodeIntel
Completa el código con un menú de sugerencias. No es muy efectivo a veces porque usa mucho CPU.
Extrañaba el completado, sobretodo en PHP.
Yii Framework Snipped
Recortes de Código para Yii Framework. A veces suele fallar.

CodeIgniter Framework Snipped 
CodeIgniter también tiene su espacio.

Git
Conexión al repositorio Git. También funciona excelente con GitHub y Bitbucket.