Desarrollo Archives - Página 4 de 11

FROONT: Crea sitios web responsive de forma fácil

28 mayo, 2013 por Juanguis

Ya hemos hablado en varias ocasiones sobre el diseño Responsive, presentado algunas plantillas gratuitas y compartido diferentes herramientas para verificar tus sitios web Responsive, crear un sitio que se adapta de forma dinámica a todas las resoluciones y dispositivos que existen es un trabajo tedioso y para nada fácil, que requiere mucho tiempo y sobretodo muchísimas pruebas para comprobar que todo se ve como debería verse.

Pero ahora existe una herramienta para crear sitios web totalmente Responsive de forma visual y mucho más fácil que hacerlo de forma manual, se trata de FROONT, una aplicación web creada especialmente para facilitarte el trabajo, incluye en su editor las resoluciones más comunes de los dispositivos moviles actuales, se puede mover, editar y personalizar fácilmente todo tipo de los elementos comunes que tienen cualquier sitio web.

En el siguiente vídeo pueden ver su funcionamiento y lo fácil que resulta crear sitios web con diseño responsive en tiempos considerablemente menores.

FROONT

3 servicios para generar imágenes de relleno

26 mayo, 2013 por Juanguis

Cuando se está creando un sitio web normalmente no se tiene todas las imágenes del diseño disponibles para insertarlas en el código del sitio final, por lo que a veces nos toca recurrir a llenar el espacio de la imagen con texto de ejemplo o en el peor de los casos con imágenes en blanco o en el más terrible de los casos con imágenes prediseñadas.

Para que nunca más vuelvas a tener una práctica tan terrible como es poner texto de ejemplo o imágenes que no comunican nada en tu sitio, te presento hoy 3 servicios para insertar imágenes de relleno en tus prototipos.

LoremPixel

LoremPixel te permite crear imágenes de cualquier dimensión para insertarlas fácilmente con las etiqueta img de HTML con el formato http://lorempixel.com/ancho/alto/, el servicio además permite seleccionar una de las 13 categorías de imágenes que tiene, con tan solo escribir el nombre justo después de las dimensiones de la imagen, además permite elegir entre una imagen en blanco y negro o en escala de grises, según tus necesidades, por último y de forma opcional también brinda la posibilidad de obtener una imagen con cualquier texto.

Placehold.it

Otro servicio para insertar imágenes de relleno o imágenes placehold en Inglés es Placehold.it en el formato http://placehold.it/350x150, al igual que el otro servicio, también permite personalizar las dimensiones de las imágenes o el texto de la misma, pero tiene como bonus la posibilidad de seleccionar el formato de la imagen, entre .gif, .jpeg, .jpg y .png, por último se puede especificar el color de fondo de la imagen y el color del texto, si estás mostrando alguno.

Fake images please?

El último servicio que les presento es Fake images please?, al igual que los otros servicios permite insertar imágenes con un color personalizado de relleno, así como el texto y las dimensiones que necesites, como bonus es posible seleccionar la fuente con la que será mostrado el texto de la imagen.

Herramienta para comprobar tu sitio web en 45 resoluciones diferentes

24 mayo, 201324 mayo, 2013 por Juanguis

En la actualidad es prácticamente obligatorio crear los sitios web, desarrollar las plantillas e implementar las aplicaciones pensando en los diferentes dispositivos moviles que existen, como les hemos contado varias veces ahora gran parte de la población mundial ingresa o visita tu sitio web desde su móvil y no desde su PC de Escritorio o pórtatil algo que tienes tener muy presente cuando empieces la implementación.

Muy pocos desarrolladores y diseñadores tiene a su mano una buena cantidad de dispositivos físicos para realizar pruebas reales de su trabajo, si eres al igual que yo de los que no los tienen te presento Responsive Web Design Test Tool, una sencilla pero útil página web donde puedes visualizar tu sitio web, proyecto o aplicación en 45 resoluciones diferentes, desde móviles como el iPhone 5, Blackberry, Samsung hasta las pantallas de iMac o Dell de 27 pulgadas.

Una herramienta más que completa para comprobar como se vería tu sitio en todas estas resolucionas.

Responsive Web Design Test Tool

Joins SQL explicados con diagramas de Venn

21 mayo, 2013 por Juanguis

Si estás estudiando o estudiaste alguna carrera técnica relacionada con programación o estás tomando un curso online rápido sobre bases de datos, seguramente te has encontrado con los Joins de SQL, una sentencia que permite combinar los registro de dos o más tablas de una base de datos relacional.

Si te explicaron la sentencia JOIN rápidamente y con pocos ejemplos para comprenderla mejor con la imagen anterior la entenderás por completo, despejando cualquier duda que tengas acerca de ella.

En la imagen están representadas 7 diferentes consultas de la sentencia JOIN con diagramas de Venn, una forma muchísimo más gráfica y de más fácil entendimiento que pequeños ejemplos con tablas simples.

Unheap: Repositorio de plugins jQuery

5 mayo, 2013 por Juanguis

jQuery es una librería de JavaScript que facilita muchísimo el desarrollo de aplicaciones web interactivas, jQuery no es un framework como algunos desarrolladores suelen llamarle, jQuery hace muchísimo más fácil la manipulación del DOM (Document Object Model), controlar los eventos del navegador, animar elementos HTML, hacer Ajax, entre otros.

jQuery es la librería de JavaScript más utilizada en el mundo, los millones de desarrolladores web del mundo han creado miles de plugins o librerías más pequeñas basadas en jQuery para hacer casi cualquier cosa, creación de menús automáticamente; organizar texto; animaciones CSS; cargar imágenes dinámicamente; convertir imágenes en Sprites; manipular el favicon y otros miles de ejemplos.

Con tantas librerías es difícil a veces encontrar justo la que necesitas, pero para ello existe Unheap, una página a modo de repositorio, pequeño según ellos, en el cual hay más de 600 librerías de jQuery categorizadas por Interfaz, Entradas, Media, Navegación y otros, cada librería tiene un enlace al sitio web de la misma, un demo de la librería y en algunos casos vídeos para mostrar su funcionamiento.

Así que ya no hay excusas para no encontrar una librería a tus gustos y necesidades para tu proyecto web, aunque algunos desarrolladores no les gusta utilizar librerías porque les parece una forma perezosa de desarrollar, la verdad es que no hay razón para reinventar la rueda. ¡Ya existe!

Unheap

El pasado, presente y futuro de HTML5

1 mayo, 201330 abril, 2013 por Juanguis

La Web ha evolucionado rápidamente en los últimos años, pasamos desde texto simple, hasta tablas, luego columnas, luego estilo a la página con CSS y después interacción sin recargar la página con AJAX y la última evolución fue hace muy poco, en el año 2009 con la introducción de HTML5 ahora es posible reproducir directamente audio y vídeo en el navegador sin necesidad de plugins externos.

Vía: HTML5 Fácil

Los 5 Frameworks más populares de PHP

29 abril, 2013 por Juanguis

En un principio los lenguajes de programación fueron creados con la idea de facilitar el desarrollo de aplicaciones que resuelven problemas específicos en prácticamente todos los campos del conocimiento humano, desde software para la NASA, hasta software para programar nanobots.

Durante muchos años y décadas el software se creaba usando el solo el código en desnudo, es decir, sin librerías, ni rutinas, se reescribía el mismo código una y mil veces con cada nuevo software que se producía, luego los programadores del mundo se dieron cuenta de la situación y empezaron a crear librerías que poco a poco fueron liberando a todos para que cualquiera persona las utilizará y se ahorrará el tiempo en escribir algo que ya existe y sirve a la perfección.

Al pasar más el tiempo, se originaron los frameworks o marcos de trabajo en Español, que es básicamente un conjunto de librerías, herramientas y rutinas que ofrecen a los desarrolladores una manera muy rápida de empezar a crear sus aplicaciones.

A continuación les dejo una infografía con los 5 frameworks más populares de PHP que existen actualmente en el mercado.

Vía: Zfort Group

Comprende mejor la etiqueta background de CSS3

27 abril, 2013 por Juanguis

La etiqueta background existe desde la primera versión de CSS, se mejoró su funcionalidad en la versión 2, y ahora con la versión número 3 de la especificación la etiqueta ha introducido mejoras considerables que permiten hacer muchísimas cosas con las imágenes de fondo de cualquier elemento HTML que antes se tenían que hacer con programas procesadores de imágenes como Adobe Photoshop, Fireworks o GIMP.

En la última versión de la etiqueta ahora es posible crear backgrounds múltiples a cualquier elemento HTML, cada uno con su imagen, dimensión y posición diferentes, aunque esto es posible desde Julio del año pasado, son pocos los que conocen sus posibilidades y es un poco más complicado implementarlos de forma correcta por la cantidad de posibilidades que ofrece gracias a la combinación de todas sus propiedades como: color, imagen, repetir la imagen, posición, tamaño y otras.

Si deseas empezar a utilizar esta propiedad en tus proyectos te recomiendo CSS Background Size una página creada para probar de forma rápida y directa varias configuraciones de la etiqueta background y ver fácilmente en vivo lo que significan dichos atributos, solo basta jugar un poco con los diferentes tamaños, orientación de la imagen y posición del fondo para ver el resultado.

CSS Background Size

Menú multinivel responsive para tus sitios web

21 abril, 2013 por Juanguis

En estos tiempos donde la mayoría de los visitantes de tus sitios web acceden a el desde dispositivos móviles es fundamental brindarles una forma fácil, sencilla y directa de para que lo naveguen sin complicaciones y sin tener que dar muchas vueltas para ir desde un enlace a otro, de esta forma les aseguras una experiencia tan fluida como si lo visitarán desde un PC.

Crear o tener un menú que cumpla con estas condiciones es algo complicado de realizar al primer intento, por ello hoy les presento un excelente menú creado por los chicos de Codrops, que aunque no es perfecto ni satisfará todas tus necesidades de tu proyecto, si te dará un buen punto de partida para que cumplas con tus necesidad específicas.

El menú utiliza Animaciones CSS3 para lograr los 5 diferentes efectos que tiene, fade, animación a la derecha o hacia delante o atrás.

Descargar: Responsive Multi-Level Menu

Demo: Responsive Multi-Level Menu

Guía para mejorar el rendimiento frontend en Español

29 marzo, 2013 por Juanguis

El frontend es el nombre utilizando comúnmente para referirse a la parte de los sitios web que ven los usuarios, la vista, la interfaz y la página con la que interactuan, donde ingresan y ven los datos que procesa el servidor.

El frontend al igual que el backend debe ser muy optimizado porque a través de las páginas web, formularios y demás contenidos es como el usuarios nos ingresa sus datos, interactua con la información, la edita, la comparte, la ve.

Un buen sitio web debe preocuparse porque sus páginas carguen lo más rápido posible siempre, en cuestión de 2 o 3 segundos, además es uno de las cosas a las que Google le pone cuidado cuando está indexando tu sitio web.

Bajo el nombre Como perder peso en el navegador está compilado una serie de consejos y tutoriales creados por expertos en el tema que te ayudarán a mejorar increíblemente la velocidad con la que cargan las páginas de tu sitio web, lo mejore es que está completamente en español.

Hay consejos para todos los lenguajes, desde lo más sencillos de implementar como HTML comprimido hasta otro más complicados como la optimización de solicitudes por parte del servidor.

Una guía imperdible si deseas que tu sitio web siempre sea el más veloz para tus usuarios.

Como perder peso en el navegador