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

domingo, 24 de junio de 2012

Plugins para Sublime Text 2

Plugins para Sublime Text 2(ST2)

SublimeLinter(SL):

---GitHub---
Este plugin nos ayuda a detectar errores en el código en tiempo real.
Soporta los siguientes lenguajes:
  • CoffeeScript 
  • CSS
  • Java
  • Javascript
  • Objective-J
  • Perl
  • PHP
  • Python
  • Ruby
Para poder instalar SL hay que instalar el "Package Control" que pueden descargar desde la url: http://goo.gl/ygxiE, después de instalarlo, es recomendable reiniciar ST2, abrir la paleta de comandos (Command+Shift+P on OS X, Control+Shift+P on Linux/Windows), en la lista desplegada seleccione "Package Control: Install Package", desplegara una nueva lista con buscador endonde escribiremos "SublimeLinter" y seleccionaremos el correspondiente, en la barra de estado en la parte inferior nos indicara el proceso de la instalación, después de finalizado es recomendable reiniciar el ST2 para que cargue el nuevo plugin, con esto ya queda activado.

SL maneja una configuración de modos que  indican el comportamiento de la detección de errores, por defecto los detecta en tiempo real, es posible decirle que los detecte en un tiempo X, o que los detecte al guardar o al abrir el archivo, todas estas configuraciones las podemos ver en detalle en esta url

El funcionamiento es simple, cada vez que tengamos un error de sintaxis aparecerá resaltado y podremos navegar (OS X: next: Control+Command+E, prev: Control+Command+Shift+E Linux, Windows: next: Control+Alt+E, prev: Control+Alt+Shift+E), entre cada error para ver el tipo de error en la barra de estado.

Zen Coding(ZC):

---GitHub---
Paleta
Este plugin nos da la posibilidad de escribir todo el codigo HTML de una pagina en una sola linea, con un formato abreviado muy parecido al formato CSS, tambien nos da la posibilidad de agregar nuestras lineas CSS de forma abreviada sin necesidad de escribir completamente el CSS. ZC Soporta la gran mayoría de editores de código que podemos encontrar entre estos ST2.
Paleta Zen Coding
El funcionamiento de ZC es muy sencillo maquetamos nuestro código HTML con el formato ZC y oprimimos (Tab), nos mostrara el código HTML así de sencillo, a continuación algunos ejemplos:


USE:
html:5 (tab)
RESULT:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

</body>
</html>
USE:
div (tab)
RESULT:
<div></div> 
USE:
form (tab)
RESULT:
<form action=""></form>
USE:
p#parrafo (tab)
RESULT:
<p id="parrafo"></p>
USE:
p#identificador.escondido (tab)
RESULT:
<p id="identificador" class="escondido"></p>
USE:
ul>li (tab)
RESULT:
<ul>
<li></li>
</ul>
USE:
div+p+section (tab)
RESULT:
<div></div>
<p></p>
<section></section>
USE:
ul>li*10 (tab)
RESULT:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
USE:
ul#nav>li.item*10 (tab)
RESULT:
<ul id="nav">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
USE:
ul>li.item.corrent+li*9 (tab)
RESULT:

<ul>
<li class="item corrent"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

USE:
ul>li.item.corrent+li.item*9 (tab)
RESULT:

<ul>
<li class="item corrent"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>

USE:
ul>li.item$*10 (tab)
RESULT:

<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
<li class="item8"></li>
<li class="item9"></li>
<li class="item10"></li>
</ul>

USE:
div#header+div#content+div#footer|c (tab)
RESULT:

/*#header */
<div id="header"></div>
/* /#header */
/* #content */
<div id="content"></div>
/* /#content */
/* #footer */
<div id="footer"></div>
/* /#footer */



Alignment:

---GitHub---


Características:

  • Alinear varias selecciones en la misma columna por espacios Inserción (o fichas)
  • Alinear todas las líneas en una selección de varias líneas al mismo nivel de sangría
  • Alinear el = por primera vez en cada línea de una selección de varias líneas a la misma columna
Uso:

Realice una selección de varias líneas, o selecciones múltiples
Pulsa las teclas Ctrl + alt + A en Windows y Linux, o Cmd + Ctrl + A en Mac OS X
Cuando se utiliza con una selección de varias líneas, las líneas se sangría consistente en primer lugar. Si las líneas seleccionadas son constantemente sangría, el = por primera vez en cada línea se alineará. El carácter de alinear a los de mediados de la línea de alineación se puede configurar a través de los ajustes.



miércoles, 6 de junio de 2012

Google presentó los nuevos cambios de su servicio de mapas


Google presentó los nuevos cambios de su servicio de mapas


Una de las novedades de Google Maps es que ahora los usuarios podrán consultar el servicio de mapas desde su celular sin que tengan que estar conectados a Internet.

lunes, 7 de mayo de 2012

Como insertar elementos HTML y heredar los eventos ya cargados

Síntesis: cuando insertas elementos html en el DOM por medio de ajax, jquery por si solo no los hereda, estos elementos no heredan los eventos ya desplegados en el DOM.
Solución: existe un plugin livequery, que incluso después de cargado el javascript y el DOM, es capaz de propagar eventos ya antes cargados a los elementos que sean insertados.
Ejemplo:


Código HTML :

<ul>
   <li>1
   </li>
   <li>2
   </li>
</ul>



Código Javascript (creamos el evento) :


$("#prueba > li").livequery('click',function(){
   alert("hola mundo");
});



Código Javascript (insertamos un elemento):


$("#prueba").prepend("<li>3</li>");


Al dar clic sobre 3 mostrara la alerta hola mundo, cosa que no pasaría si utilizamos click().

viernes, 6 de enero de 2012

Tendencias 2012 para el diseño y desarrollo Web


El año que se despide nos ha traído noticias muy importantes y ha marcado tendencias interesantes en la manera en que se crea la Web; con todos estos cambios, la pregunta inevitable es: ¿Qué nos espera para el 2012?.

Tendencias para el diseño y desarrollo Web en el 2012
Tendencias para el diseño y desarrollo Web en el 2012


El año que se despide nos ha traído noticias muy importantes y ha marcado tendencias interesantes en la manera en que se crea la Web; con todos estos cambios, la pregunta inevitable es: ¿Qué nos espera para el 2012?.
Los navegadores han sido estrellas del 2011, en una verdadera batalla por seducir el gusto de los usuarios. HTML5 ha tenido un impulso colosal y se expande por toda la Web. Adobe anunció que dejaría de crear nuevas versiones del Flash Player para móviles y que le daría un nuevo enfoque a Flash. Otro dato importante es el éxito que están teniendo las tablets y smartphones, cada vez más populares para los usuarios que navegan por Internet.
Con este panorama planteado al cerrar el 2011, se espera un 2012 en el que las plataformas desde las que acceden los usuarios a Internet se seguirán diversificando y evolucionando. Los sitios creados empleando HTML5 serán cada vez más y comenzarán a reemplazar a los que antes se maquetaban en Flash. Para comprender mejor lo que viene, vamos a analizar las tendencias punto por punto:
- Navegadores y compatibilidad: en el 2011 los navegadores han sido noticia permanente y en el 2012 prometen generar mucha tela para cortar. Aceleración por hardware, nuevas capacidades para 3D y mayor soporte para HTML5 y CSS3 serán algunas de las claves.
- La web en todos lados: la web móvil ha tenido un crecimiento exponencial en los últimos años y ahora se afianza gracias a conexiones más potentes y también en nuevos modelos tanto de teléfonos como tablets que renuevan sus características y ofrecen mayores posibilidades en cuanto a hardware. Otro aspecto a destacar en este ítem es conceptual: ahora la web debe adaptarse al dispositivo del usuario, la diversidad de pantallas y medios desde los que nos puede visitar el usuario. El mouse está dejando su trono y las interfaces táctiles comienzan a tomar el poder de la Web.
- HTML5, el nuevo rey: es el lenguaje del que todos hablan y se está reproduciendo con una velocidad supersónica en la Web. Todo diseñador y desarrollador Web debe comenzar a manejar esta nueva versión del lenguaje HTML, junto a los cambios que introducen CSS3 y a las APIs vinculadas. Las claves pasan por comprender nuevas estructura semánticas, cambios en la manera de maquetar, utilización de audio y video con soporte nativo, mayor variedad de opciones para utilizar tipografías en la Web (de la mano de @fontface) y muchas características nuevas que se están haciendo un lugar en Internet.
- Renovación en las herramientas y un nuevo mundo animado: la movida en la manera que se crea la Web, también llega de la mano de las herramientas que nos ayudarán a crear animaciones y banners sin necesidad de utilizar Flash. En este sentido, será importante renovar las versiones de nuestros programas e incursionar en nuevos software para trabajar con estas tecnologías. Las empresas y sitios más importantes del mundo ya han puesto sus ojos sobre HTML5 y también están impulsando su crecimiento.
- Integración social, un factor clave: las redes sociales marcan el termómetro de la Web. Ya no basta con el simple icono de Facebook, Google Plus y Twitter en nuestro sitio, hay que moverse más allá. Lograr una integración en tiempo real de los contenidos, optimizar la manera en que se generan y pensar cómo desarrollar herramientas que le ofrezcan al usuario una mejor experiencia en las redes sociales, un lugar donde pasan gran parte del tiempo en el que están en Internet. El desarrollo de juegos para estas plataformas también es un nicho que se puede explotar con éxito para quienes tengan conocimientos en este campo.
Redes Sociales
- El 3D ha llegado a la Web: con tecnologías como WebGL, el 3D se mete también en la Web para ofrecer una nueva experiencia al usuario. La interacción con juegos y aplicaciones desarrolladas con estas tecnologías comenzarán a crecer y marcarán tendencias en Internet.
- Capacitación, la clave es estar siempre al día: los lenguajes se renuevan y las técnicas evolucionan para adaptarse al cambio. Es fundamental estar atentos a todos los cambios que marcan el pulso de la Web, para seguir vigentes con nuestro trabajo y ofrecer a nuestros clientes un producto acorde a lo que exige el mercado actual.
El 2012 será un año en el que se afianzarán nuevas tecnologías que ya están haciendo pie en la Web y comenzarán a expandirse a paso firme. Si miramos nuestra frontera más allá del diseño y el desarrollo Web, encontraremos también posibilidades en otros lugares asociados: desde la creación de publicaciones digitales (e-books y revistas digitales) hasta el desarrollo de juegos y aplicaciones para móviles con la ayuda de soluciones como PhoneGap y jQuery Mobile. De la mano de HTML5, también comenzarán a crecer las  aplicaciones Web pensadas para trabajar offline.
kindle Fire
El futuro es un lugar ideal para quienes tienen iniciativa y creatividad. Lo importante es estar preparados para este tiempo de evolución y cambio que están experimentando los soportes y medios digitales. Los usuarios piden cada vez más y la experiencia que debemos ofrecerles desde nuestros diseños y desarrollos debe estar a la altura de estas exigencias.