Currently Browsing: plugins

HTML5. Validar formularios sin Javascript. Parte I.

HTML5 esta introduciendo nuevos atributos que harán, y ya hacen, más fácil nuestro caminar en crear mejores sitios. Uno de estos atributos es pattern, específico para validar elementos input tipo text, search, url, tel, correo electrónico, y password, esto es, para campos de texto de formulario. ¿Qué hace pattern? Como su nombre ya adelanta, pattern busca un patrón/expresión regular en un campo de texto y determina si este lo cumple o bien no. Por ende, su función es validar la información introducida por los usuarios. Esta tarea es normalmente realizada por Javascript, pero acostumbran a ser soluciones un tanto más complejas y dependientes de que esta tecnología este activada en el navegador. ¿De qué manera usar pattern? Pattern se maneja como cualquier otro atributo de input, y toma como valor una expresión regular. Ejemplo: Usuario de Twitter: pattern="^[A-Za-z0-9_]1,15$ " name="twitter_account" id="twitter" /> En este formulario se solicita el nombre de usuario de Twitter, si cumple con la expresión regular indicada ^[A-Za-z0-9_]1,15 dólares americanos ” (acepta caracteres alfanuméricos y guion bajo hasta un máximo de 15), el formulario va a ser enviado generalmente, sino, el navegador mostrará una advertencia y evitará que el formulario se envié. En Google Chrome esta advertencia luce así: ¿Cuándo utilizar pattern? Este atributo es soportado desde Firefox 4+, Google Chrome 5+, Opera noventa y seis y IE 10+ que ya engloba un buen porcentaje de las visitas de un sitio web. Por consiguiente, mi sugerencia de empleo es para aquellos formularios que no requieren una validación compleja (como mensajes de error personalizados, cambios en el estado del campo de texto, etc.) y que cuenta con una validación de lado del servidor. Un caso bastante real de donde podrían usarse son los campos de comentarios de WordPress, donde en nuestros días no hay validación del lado del cliente, mas sí del servidor y que puede ahorrarnos algunos comentarios con campos inválidos. También puede utilizarse como una forma complementaria de validación de lado del cliente del servicio, por ejemplo, para cuando Javascript este desactivado. Leer: HTML5. Validar formularios sin Javascript. Parte...
read more

Freepik, motor de busca de recursos gráficos.

Freepik es otra potente herramienta para la búsqueda de recursos gráficos gratuitos como vectores, iconos, fotografías o ficheros fuente PSD. Según sus estadísticas, cuentan con 1.4 millones de elementos para descargar sin registro. Si estas interesado en hacer las decoraciones de navidad en un diseño, en la sección respectiva de Freepik tendrás mucho de donde elegir y de múltiples filtros para facilitar la tarea.
read more

Forzar descarga de ficheros con HTML5

Para ofrecer archivos en descarga directa en muchas ocasiones es necesario eludir el comportamiento por defecto del navegador y, de este modo, forzar la descarga de los archivos. Una forma muy común de hacerlo es por medio de instrucciones del lado del servidor, no obstante, el nuevo estándar de HTML5 nos dejará efectuar la misma labor solo con la incorporación de un nuevo atributo: download. ¿Cómo marcha el atributo download? El atributo download funciona en los enlaces HTML, o sea, elementos y toma como valor un nombre para el fichero (no tiene que coincidir con su nombre real). Por ejemplo: Descargar Esto dará como resultado que cuando el usuario de clic sobre el link se presentará una ventana de descarga del fichero en http://blogandweb.com/nombre-real.pdf mas con el nombre por defecto: nombre-para-el-usuario.pdf. Este código en Google Chrome luce de esta forma tras entregar click: Si se quiere emplear exactamente el mismo nombre del archivo del original, solo es preciso agregar el atributo download sin valor: Descargar Soporte de download. Según Can I use, download es soportado en Mozilla Firefox 23+, Chrome 28+ y Opera 17+, abarcando el cuatrocientos sesenta y siete por ciento del tráfico. Por tanto su uso, por ahora, debe estar acompañado de una solución de lado de servidor para tener una garantía...
read more

Flat UI Kit. Muy completo paquete de elementos CSS con Flat Design.

El Flat Web Design comenzó con la interfaz de Windows 8 y desde ese momento se ha trasladado a muchos sitios esenciales, aun, irónicamente también adoptado por Apple en la última actualización del iOS. Si quieres adoptar esta tendencia, Flat UI Kit te será de gran utilidad. Flat UI Kit es un completísimo paquete de elementos CSS con Flat Design, gratis y listo para usar en tu siguiente aventura web. Cuenta con prácticamente todo tipo de elemento web que puedas necesitar, como: Botones. Menús y otros elementos de navegación. Inputs, campos de búsqueda, áreas de texto y otros elementos de formulario. Barras de progreso. Tooltips. Switches. Tags, paginación y elementos de arquitectura de información. Intefaz de video, sliders y presentación de contenido. Flat UI Kit usa Bootstrap 3, jQuery, CSS 3, íconos listos para pantallas retina y HTML5 entre otras técnicas. Demo y descarga de Flat UI...
read more

Devs.info, atajos para desarrolladores.

Devs.info es un servicio tan útil como fácil de utilizar. Su propósito es proporcionar como atajo para las principales herramientas del desarrollador: Frameworks, lenguajes de programación, CMS, mercados, bases de datos, plantillas, servidores, servicios, etc. ¿Cómo funciona? Para utilizar el atajo simplemente hay que poner: devs.info + servicio + . + lo que buscas. Por poner un ejemplo, para entra a la documentación de WordPress: http://devs.info/wordpress.doc ¿Deseas libros de WordPress? http://devs.info/wordpress.book ¿Quieres descargar jQuery? http://devs.info/jquery.get ¿Quieres un acordeón (chuleta o cheat sheet) de PHP? http://devs.info/php.cheat Ciertas terminaciones que puedes emplear son:doc (documentación),get (descarga),git (repositorio),cheat (cheat sheet),faq (preguntas frecuentes ya respondidas),book (libros) yjob (empleos relacionados). Con esto te olvidas de memorizar URLs con extensiones diferentes acom, subdominios confusos o de longitud poco cómoda. En su sitio web puedes localizar todos y cada uno de los servicios soportados y no son pocos....
read more

Next Entries »