Mostrando entradas con la etiqueta HTML5. Mostrar todas las entradas

2014-07-17

Presentacion donde se resume muy bien HTML5 y CSS3 todo en español

Estupenda presentación donde podemos tener a mano para ver de una manera bien clara las nuevas características de HTML5 y CSS3 para cuando queremos crear un sitio que sea cien por ciento HTML5 y CSS3.

2014-05-07

Siete Frameworks HTML5 para tenerlos en cuento, en nuestros proyecto.

Iónico

Creo que el móvil es bastante grande en este momento, por lo que voy a abrir esto con un marco de desarrollo móvil muy popular - Ionic. Es la solución perfecta para la creación de aplicaciones móviles híbridos, y se va de la mano con AngularJS como el pan y la mantequilla.

Una cosa es que para construir sitios web para móviles, mientras que es totalmente otro para crear aplicaciones móviles nativas, desde un marco. Ionic apoya iOS6 +, y Android 4.1 +. El equipo sugiere que comenzar con la documentación para tener una idea de lo que hace jónico, pero creo que ya has averiguado por ahora.

Modernizr

Pruebas Modernizr qué características de CSS3 y HTML5 nativos están disponibles en el actual UA y hace que los resultados disponibles para usted de dos maneras: como propiedades en un objeto global Modernizr, y clases sobre el elemento. Esta información le permite mejorar progresivamente sus páginas con un nivel granular de control sobre la experiencia.

Me encanta Modernizr, te da la libertad de jugar con la última CSS3 y características de HTML5, sin comprometer la calidad del diseño de página. Es tan simple como la incrustación Modernizr en sus páginas, y dejar que haga su trabajo en la comprobación de las diferentes funciones de ambos lenguajes de script.

A List Apart hizo una maravillosa introducción a Modernizr y su filosofía de un par de años atrás, echar un vistazo aquí .

Initializr

Initializr no es un framework web "literal", pero sirve como gran propósito, me sentí obligado a incluirlo. Se va a llevar horas (en el largo plazo) de su flujo de trabajo de desarrollo, por lo que le permite generar plantillas pre-hechas sobre la base de un HTML5 Boilerplate.

Usted puede elegir qué funciones, las bibliotecas y las partes de cualquier repetitivo determinada alcanza también, y he encontrado que es una herramienta muy esencial en mi lista. Puede generar una plantilla en menos de 2 minutos, mucho menos de lo que se necesitaría si se hace "manualmente".

Sencha

Sencha es uno de esos raros marcos HTML5 que ha sido capaz de atraer grandes inversionesdesde el principio, creo que está haciendo las cosas bien, y está utilizando con visión de futuro para atraer a nuevos clientes y miembros de la comunidad leales.

Es un conjunto de múltiples marcos de trabajo y productos, todos los cuales están relacionados de alguna manera y se puede utilizar en conjunto para construir aplicaciones sorprendentes. Sencha Touch 2 ofrece una importante actualización de las experiencias de aplicaciones que se crean, la eficiencia de su trabajo como desarrollador, y la capacidad de sus aplicaciones para participar en el ecosistema móvil.

Uno de sus mejores productos, con diferencia.

MontageJS

MontageJS era (y sigue siendo) desarrollado para ayudar a los desarrolladores a crear aplicaciones web modernas a gusto, sin la totalidad de la frustración tradicional que proviene de la construcción de aplicaciones directamente, sin un marco. En las noticias más recientes,MontageJS lo llevó a otro nivel , al permitir la construcción de aplicaciones 3D con su marco.

MontageJS es un marco de código abierto que sirve de puente entre el marcado estructurado y experiencias interactivas, abordar muchos de los desafíos de larga data que se enfrentan los desarrolladores web frontend.

SproutCore

SproutCore es conocido por ser un gran framework web HTML5 cuando se trata de la creación de aplicaciones del lado del cliente. Un lenguaje como Ruby podría ser ideal para construcción de sitios web, pero eso es todo lo que realmente son - sitios web. SproutCore le da la capacidad de construir aplicaciones reales, nativas al navegador, que también sienten de esa manera. Es una pasada!

Almuerzo

Brunch es una acumulación de herramientas HTML5 bastante veloz, construido para que pueda evitar la generación de archivos de configuración que son más grandes que el propio proyecto real. Y si bien hay un montón de comparación con ronco pasando, este post es el mejor lugar para aprender más sobre Almuerzo, y lo que hace.

Yo podría haber puesto cualquier otro marco en este último punto, pero creo Almuerzo puede ayudar a aprovechar algunas de las cuestiones comunes que tenemos que tratar en front-end.

2013-04-17

Configurar el HelperHTML de CakePHP 2.x para que sea compatible con HTML5 cuando lo utilizamos

Hola amigos hoy acá les dejo como poder modificar los tags que genera CakePHP con el HelperHTML sean los de HTML5 para tener una estructura robusta y sin mesclar los tipo de tgas xHTML con los de HTML5.
$this->Html->loadConfig('tags.php');

Código: app/Controller/AppController.php
Código: app/Config/html5_tags.php

2013-04-14

40 Recursos para combinar con nuestro desarrollo web basado en Bootstrap

Diseño y tematización.

URL: http://bootswatch.com/

Uno de los principales critisms cuando se utiliza un marco con botones prediseñados y widgets - es que el producto final puede empezar a buscar cansinas. Bootswatch es un mercado libre tema que tiene por objeto evitar que, con un número de implementaciones de rutina de carga a medida disponibles para descargar de forma gratuita. Su todavía el producto Bootstrap núcleo - sólo con una piel diferente aplicado. Para los diseñadores que necesitan inspiración sobre qué nivel de personalización está disponible, Bootswatch es un buen lugar para comenzar.

URL: https://wrapbootstrap.com/

Siguiendo en la misma línea - WrapBootstrap es un mercado temático comercial, en la que podrás comprar y vender su tema Bootstrap. Es un gran ejemplo de las crecientes comunidades de nicho en la web alrededor del producto, y ofrece la posibilidad de ver cómo muchas otras personas también han adquirido el mismo tema.

URL: http://bootswatchr.com/

¿Te apetece un enfoque más DIY para requisitos particulares? Bootswatchr proporciona una interfaz visual para que usted pueda utilizar para personalizar los temas de rutina de carga desde cero. Piense en ello como un tema-rodillo (ala jQuery UI ) - que le permite ver de forma interactiva los elementos que se están personalizados en frente de tus ojos. Tres práctico.

URL: http://stylebootstrap.info/

También ofrece un conjunto de herramientas de personalización, con la ventaja de que las URL individuales creados se pueden compartir con los demás, mostrando su tema.

URL: http://jetstrap.com/

JetStrap ofrece una manera fácil extremadamente limpia para construir interfaces de bootstrap, y generar el código de trabajo Bootstrap por el otro lado. Está en algún lugar entre una maqueta y una herramienta de creación de la interfaz, que lleva el manual de codificación de distancia, y hace que sea muy fácil de arrastrar y soltar los componentes Bootstrap en su página y generar una interfaz de trabajo de HTML. Si se encuentra en las primeras etapas de desarrollo de productos, y estamos convencidos de que Manos a la Obra es el marco perfecto para usted en el futuro, entonces te encantará la rapidez JetStrap lo ponga en movimiento.

URL: http://paintstrap.com/

Ofertas PaintStrap y el enfoque alternativo a Bootstrap tematización. Si usted es un ávidoColourLovers o Adobe Kuler usuario, entonces usted simplemente puede introducir el tema directamente en PaintStrap, y Wacks un tema Bootstrap con esos colores bellamente escogidos. Una manera muy simple, pero muy eficaz para hacer que el sitio se vea la parte.

URL: http://jumpstartui.com/

A menudo el caso con los marcos temáticos es que se centran en lo que se necesita desde la perspectiva del diseño FrontEnd. Jump Start han tomado el tema de Manos a la Obra, y lo aplicó a las interfaces de administración, que ofrece implementaciones de primera calidad Bootstrap diseñadas para hacer que sus sistemas backend realmente brillan.

URL: http://www.boottheme.com/

BootTheme es otra herramienta de generación de Tema, sin embargo Boottheme ofrece un enfoque vista previa instantánea, lo que le permite ver los efectos de los cambios en tiempo real. También puede ver cómo los cambios se realizan directamente en varios dispositivos de una manera sensible, lo que lo hace útil en la toma de decisión inicial de diseño.

URL: http://ajkochanowicz.github.com/Kickstrap/

Kickstrap es un proyecto impulsado por la comunidad añadiendo mejoras a la interfaz Bootstrap marco de interfaz de usuario. Manos a la Obra ha sido adoptado con los brazos abiertos por la mayoría de los desarrolladores de la web. Si bien todas las funciones, algunos pensaron que podrían hacer mejor, y mientras sus sugerencias y peticiones no podría haber llegado a la central de distribución Bootstrap, se han encontrado un hogar en Kickstrap.

Fuentes y tipografía

Con las fuentes haciendo una diferencia fundamental con la aplicación BootStrap estándar, no hay excusa para no personalizar. Este gran artículo te llevará a través de los pasos para lograr que, con una biblioteca de iconos personalizados. En este caso particular, se ha utilizado la popular FamFam conjunto de iconos, pero usted sería factible usar otra cosa.

URL: http://fortawesome.github.com/Font-Awesome/

Fuente impresionante es un proyecto diseñado icono para agregar un cierto nivel de diferenciación de Manos a la Obra. Con la integración en un sinch Manos a la Obra, Font Impresionante también proporciona una hoja de estilo CSS personalizado para su proyecto, así que es una combinación de ambos códigos, y el icono snazziness.

URL: http://pfefferle.github.com/openwebicons/

Al igual que sus iconos más, así mínimos? Iconos OpenWeb comenzó a usar fuente impresionante de inspiración, pero se transformó en una colección de iconos de otros fantásticos, especialmente brillantes en escala de grises para más temas.

URL: http://fontello.com/

Esta herramienta le permite combinar WebFonts icónicos para su propio proyecto. Con fontello puede acceder a grandes conjuntos de iconos de calidad profesional de código abierto para su uso dentro de bootstrap.

Fragmentos de código.

URL: http://bootsnipp.com/

BootSnippr proporciona gratuitamente fragmentos de HTML para su uso con Bootstrap. Con todo, desde formularios de registro de perfiles de usuario, que, literalmente, puede copiar y pegar juntos un prototipo de trabajo con el mínimo de código, lo que le permite seguir adelante con las cosas del lado del servidor.

URL: http://www.joostrap.com/

Los fans de Joomla estarán encantados de encontrar que los temas de arranque, componentes y fragmentos de código para Joomla están disponibles en JooStrap. A debe marcar para los desarrolladores de Joomla.

URL: https://github.com/320press/wordpress-bootstrap

BootStrap WordPress es - sí que has adivinado, un tema de WordPress BootStrap listo.

Plantillas de diseño

Si quieres ir a por todas y personalizar todo alrededor de arranque, entonces puede ser digno de conseguir su diseñador eche un vistazo a algunas de ellas. Con Adobe plantillas PSD, PNG escalabilidad con fuegos artificiales a la asistencia wireframing, estos enlaces deben ayudar con el aspecto más granular de personalización Bootstrap.

URL: http://www.extendingfireworks.com/?p=133

Este fantástico Adobe Fireworks ofrece un archivo de base de kit de herramientas de interfaz de usuario de Twitter Bootstrap con la interfaz de usuario completa recreado como imágenes vectoriales en Adobe Fireworks.

URL: http://gui.repixdesign.com/

Los fans de Photoshop, no se preocupe - hay un montón de PSD que hay ahí fuera para la personalización de Manos a la Obra. Este uno de RepixDesign, es especialmente bien juntos y ser Vector base hace que sea fácilmente escalable.

URL: http://viget.com/inspire/an-omnigraffle-stencil-for-twitter-bootstrap-2

OmniGraffle si usted no está familiarizado, es una maqueta brillante y una herramienta de wireframes. Esta plantilla proporciona ahora mucha necesidad UI Bootstrap y elementos de navegación a sus plantillas.

URL: http://www.arvendo-media.com/projects # c-twitter-bootstrap-diseño-plantilla

Si usted es más de un niño ilustrador, entonces esto EPS debe proporcionar un buen comienzo para la creación de diseños listos Bootstrap.

Componentes de interfaz de usuario

URL: http://exacttarget.github.com/fuelux/

Combustible UX agrega algunos componentes adicionales ordenadas Javascript para Manos a la Obra, incluyendo un ComboBox, DataGrid, Fortín, Buscar y Spinner. Definitivamente vale la pena una visita incluso para un nivel adicional de uñas.

Botones

URL : http://charliepark.org/bootstrap_buttons/

Proporciona 'Customiser' un botón similar al que se encuentra en algunas de las themers Bootstrap mencionadas antes

URL: https://github.com/nostalgiaz/bootstrap-toggle-buttons

Bootstrap Toggle Buttons, por más sexy iPhone interruptores esq.

Editores WYSIWYG para Bootstrap

URL: http://wrapbootstrap.com/preview/WB0DFT966

BootStrap vivo Editor

URL: https://github.com/samwillis/pagedown-bootstrap

Tenedor PageDown desarrollado para ajustarse a los principios de Manos a la Obra.

URL: http://vitalets.github.com/bootstrap-editable/

Si en la edición de la página es más su cosa, "Manos a la Obra Editable" es un componente fantástico para el CMS.

Notificaciones / Popups

URL: http://nijikokun.github.com/bootstrap-notify/

Aunque Bootstrap tiene su propio motor de notificación, el código para la creación de ellos no es tan simple como añadir una clase CSS. Esto es lo que notify BootStrap trae a la fiesta.

URL: http://bootboxjs.com/

Bootbox.js es una pequeña biblioteca JavaScript que le permite crear cuadros de diálogo utilizando verbos modales programáticas de Twitter Bootstrap, sin tener que preocuparse por la creación, gestión o eliminación de cualquiera de los necesarios elementos DOM o JS controladores de eventos

URL: https://github.com/Gild/bootstrap-tour

Pensando en dar recorridos de productos dentro de la aplicación para los nuevos usuarios? Tour de Manos a la Obra es una herramienta fácil de configurar tu Web asistente que guía y orienta a su usuario en torno a su interfaz, enseñándoles las partes Tricker de su interfaz.

URL: http://jbutz.github.com/bootstrap-lightbox/

Casi todas las aplicaciones requieren una aplicación lightbox de algún tipo. Ya se trate de un cuadro de diálogo modal para iniciar sesión sin salir de la misma página, o para la exhibición de imágenes de gran tamaño.

Selectbox / Combobox / Pickers

URL: http://ivaynberg.github.com/select2/index.html

Select2 es un reemplazo basado en jQuery para cuadros de selección. Es compatible con la búsqueda, los conjuntos de datos a distancia y el desplazamiento infinito de resultados. Ver y sentir de Select2 se basa en la excelente Elegido biblioteca.

URL: https://github.com/dangrossman/bootstrap-daterangepicker

Probablemente el Selector de fecha más cool gama encontrarás en la web, y listo de nuevo su mejor Bootstrap.

URL: http://jdewit.github.com/bootstrap-timepicker/

Si su solicitud tiene entrada sensible al tiempo, entonces TimePicker BootStrap es una mejora de la interfaz de usuario poco aseado que ayuda a asegurar lado más precisa cliente del usuario.

URL: https://github.com/danielfarrell/bootstrap-combobox

Combobox Bootstrap mejora la combinación estándar, permitiendo que los usuarios escriban su entrada en el teclado, y selecciona automáticamente la entrada correspondiente. Sutil, pero eficaz.

URL: http://www.eyecon.ro/colorpicker-and-datepicker-for-twitter-bootstrap.htm

A colourpicker y datepicker de arranque. El colourpicker es particularmente agradable.

Otros extras

URL: http://bootstrap-arrows.iarfhlaith.com/

¿Necesitas flechas en su interfaz de usuario? Este plugin jQuery simple proporciona Manos a la Obra con una manera fácil de incluir flechas prediseñadas en cualquier ángulo dentro de sus diseños, todo a través del uso de determinadas clases CSS.

URL: http://botmonster.com/jquery-bootpag/

BootPag es un plugin jQuery paginación dinámico para bootstrap twitter.

URL: http://blueimp.github.com/Bootstrap-Image-Gallery/

Galería Bootstrap La imagen es una extensión para el cuadro de diálogo modal del conjunto de herramientas Bootstrap de Twitter, para facilitar la navegación entre un conjunto de imágenes de la galería. Cuenta con el ratón y el teclado de navegación, efectos de transición, modo de pantalla completa y la funcionalidad de presentación de diapositivas.

URL: http://aozora.github.com/bootmetro/

Inspirado por la última encarnación de Windows Metro apps, Bootmetro ofrece la apariencia de ontop Metro de la oferta Bootstrap núcleo. A pesar de que está claro que hay algunos problemas pendientes de ser resueltos (de una sensible POV) sigue siendo un recurso valioso para aquellos que buscan algo diferente estilo sabio.

URL: http://bootstrap-forms.heroku.com/

Arrastrar y soltar constructor de formulario para arranque, que genera el código HTML que hay que traer a la vida. Handy.

URL: https://github.com/davidber/twitter-bootstrap-sample-page-layouts

Algunos diseños de página adicionales no incluidos en el marco de arranque. Las muestras se pueden ver rápidamente aquí.

2013-02-07

microjs:: Estupendo sitio con cientos de micro libreria JavaScript

MicroJs.com es un estupendo sitio, con ciento de libreria JavaScript para poder utilizar en nuestro proyectos web. Hay de todo y cada dia aparecen mas y mas.. Con este sitio es simple buscar una alternativa a nuestros problema.

Link: microjs.com

2012-12-19

Nerdi - Muchos recursos para WebMaster ordenados de manera clara y a simple vista.

Me encontre con este sitio web llamado Nerdi el cual tiene muchos recursos que ya comente anterior mente, pero lo bueno del sitio, es que esta todo ordenador de manera muy clara y a simple vista.

2012-11-14

MobiTest estupenda aplicación para poder testear WebMobiles

Con MobiTest podes ver cuanto tardan en carga tu pagina y como se ven en un celular con solo cargarle la URL, es una herramienta que no tiene que faltar para cuando creamo sitios webs.

Link Sitio Oficial

2012-07-12

Como utilizar Google Chrome Frame en nuestros sitio web

Con este simple codigo te aseguras de que los clientes que tiene IE5,6,7,8 disponga del motor de google chrome dentro del propio IE mejorar las posibilidadesde de poder tener un sitio html5 con menos problemas ;-)

Link: Mas informacion

2011-12-14

Video Tutorial con Tip sobre Modernizr + CSS3 y HTML5 en castellano

Modernizr es una librería javascript que nos ayuda a tener un control en el uso de CSS3 Y HTML5 cuando nuestra página web se muestra en navegadores que no soportan estas tecnologías.

En es siguiente video se muestra el uso de esta librería, se trabaja con la propiedad CSS3 boxshadow y con el atributo placeholder de HTML5

Suscríbete a monitojoomla en youtube para que puedas ver todos los videos publicados

Fuente: monitojoomla.com

2011-11-11

WebApp con Lungo.js una alternativa a jquerymobile y otros framework para crea sitio web para mobiles

Una de la cosas buenas que está provocando esta larga crisis es el emerger del talento en nuestra profesión, dando el paso definitivo del huir de las empresas del tipo Empresas del mundo de cuyo nombre no quiero acordarme, creando las propias.

Pequeñas empresas, a menudo dos socios y poco más, que van a cambiar el panorama y la reputación de nuestro país por medio de trabajos “Made in Spain”. Es decir, con unos medios muy escasos se obtienen unos resultados de alta calidad gracias a la profesionalidad y conocimiento de los desarrolladores integrantes del equipo.

Aquí traigo un ejemplo de ello. Un solo desarrollador, Javier Jiménez Villar, en conjunto con un solo colaborador, Guillermo Pascual, han construido un framework para construir las llamadas WebApp con la capacidad de competir con “vacas sagradas” como jQuerymobile o Sencha.

Pero qué tiene Lungo.js que le hace más apetecible que los framework actuales que llevan más tiempo en el mercado? Pues el que, según su autor, este permite utilizar las capacidades últimas y más actuales de HTML5, JavaScript y CSS3.

Además de las capacidades que se pueden leer en el repositorio Git:

Diseñado para aprovechar las características de los dispositivos móviles actuales.
Captura de eventos como Swipe, Tap, Doble-Tap…
Diseño y creación de aplicaciones para iOS, Android, Blackberry y próximamente Windows Phone 7 (en la versión 1.1).
Se puede distribuir las aplicaciones en “Mobile Stores” o en Websites.
No se necesitan imagenes del tipo bitmap, todas son vectoriales.
No requiere de un servidor Web.
Implementa capacidades de HTML5 como WebSQL, Geolocalizacion, Historial, Orientación del dispositivo y más.
Implementa una interfaz con un estilo de aplicación nativa (en iPad & iPhone).

Totalmente personalizable

LungoJS - HowTo Prototype with HTML (Spanish) from LungoJS

LungoJS - HowTo Template & DataBinding (Spanish) from LungoJS

Más información | Web Site de Lungo.js, Lungo Sugars

2011-11-10

Estupendo sitio creado por la fundación mozilla donde podemos aprender a desarrollar sitios web y todo en castellano

En el sitio encontraran muchas data de todo lo nuevo sobre el navegador, tendencias y como implementar las nuevas mejoras que van sacando. Ademas de tener documentación con tips y tutorial de como crear sitios webs de manera apropiada y optima que comienza de nivel básico a nivel avanzado.

También cuanta con una galería con muchas Demo Labs sobre las cosas que van saliendo sobre HTML5 y que va soportando FireFox.

Y como si esto fuera poco, con muchas de la documentación en castellano. También les recomiendo que en el días de hoy ya esta disponible para descarga la versión 8 de Firefox en forma estable y final, le recomiendo que la instalen para poder probar todos los demos de HTML5 que hay en el sitio.

Link: MDN Mozilla

2011-11-05

57 Estupendas chuleta (Cheat Sheets) o Guias de referencia ayuda memoria para nuestros proyectos Web y otros lenguajes

Para los diseñadores o desarrolladores web, que quieren aprender de memoria todo lo relacionado con un lenguaje y les resulta una tarea bastante difícil, hoy aquí les dejo una gran recopilación de Cheat Sheets o Chuletas o ayuda memoria.

Para los que no saben que esto, los cheat sheets son guías de referencia con la información más útil, características y/o funciones de un lenguaje en particular.

En esta colección recopilación hay 54 Cheat Sheets que son de bastante utilidad para los diseñadores y desarrolladores web cuando están trabajando en un proyecto.

HTML

HTML5 Visual Cheat Sheet

2014-07-17

2014-05-07

2013-04-17

2013-04-14

Diseño y tematización.

Fuentes y tipografía

Fragmentos de código.

Plantillas de diseño

Componentes de interfaz de usuario

Botones

Editores WYSIWYG para Bootstrap

Notificaciones / Popups

Selectbox / Combobox / Pickers

Otros extras

2013-02-07

2012-12-19

2012-11-14

2012-07-12

2011-12-14

2011-11-11

2011-11-10

2011-11-05

HTML

CSS

SEO (Optimización para Buscadores)

WordPress

Color

JavaScript

jQuery

Mootools

Prototype

Script.aculo.us

PHP

.htaccess

mod_rewrite

Expresiones Regulares (RegExp)

MySQL

Ruby On Rails

ASP

Python