Frogx Three

Diseño Web

Artículos sobre diseño web, tips para SEO, galerias de diseño web para inspirarnos, optimización de paginas web, recursos web gratis, etc.

Inter XDK una herramienta para crear Apps móviles híbridas

Intel-XDK_3

Intel XDK es la apuesta de Intel por involucrarse en el mundo del desarrollo de Apps para móviles, Intel XDK es una interesante herramienta para crear Apps móviles híbridas utilizando tecnologías web como lo es HTML5, es un editor gráfico que te permite trabajar de igual manera con el código fuente de tu aplicación la cual podrás distribuirla en las diferentes tiendas de aplicaciones como la App Store de Apple, Play Store de Google y otros, incluso podrás crear aplicaciones para escritorio basadas en HTML5. Intel XDK ofrece soporte para Cordova 3.x la poderosa API que ofrece la fundación Apache para el desarrollo de Apps basadas en tecnología web, con el API de Cordova puedes crear aplicaciones para Android, iOS, Windows 8 y Windows Phone 8. Para el desarrollo de Apps para Android también ofrece como alternativa Crosswalk una alternativa bastante interesante para el desarrollo de Apps especiales para Android que ofrece......

Seguir leyendo 68

Generador de paletas de color inspiradas en Google Material Designs

paleta colores google material desings

Google tan querido y tan odiado es capaz de crear cosas que todos deseamos, tal como lo ha conseguido Apple aunque con tipos de productos diferentes, una de las últimas cosas que lanzo Google y que ni siquiera es un producto pero que muchos diseñadores quieren emular, es Material Designs, la cual fue lanzada como la guía de diseño de aplicaciones de Google para mantener una homogeneidad entre el diseño de sus aplicaciones ya sea para web o de dispositivos móviles, en lo personal puedo decir que me pareció atractiva y muy minimalista, pero no creo sea la octava maravilla. Pero bueno para los que estén enamorados de este estilo de diseño que ha propuesto Google, les comparto un enlace bastante interesante que pueden sumar a su lista de recursos de diseño, se trata de un generador de paletas de color inspiradas en los colores usados en Google Material Designs, es......

Seguir leyendo 81

Inspiración: 10 Diseños de paginas web – Diciembre 2014

cover diseno web diciembre 2014

Ya estamos a menos de 20 días para finalizar el 2014 y como prometí el mes pasado cada mes estaría realizando una recopilación de diseños de paginas web para recolectar un poco de inspiración, si no la vieron les recomiendo mucho ver la recopilación de diseños de paginas web de Noviembre si ya la vieron entonces igual y les va a interesar esta nueva galería de inspiración con otros 10 diseños de paginas web de Diciembre 2014 para llenar de inspiración e ideas a todos los diseñadores web que cruzan por este blog día a día. Como mencione hace un mes el trabajo para mejorar Frogx Three aun no termine y continuara de forma indefinida por que es un proyecto que literal amo, y me resulta genial la idea de aprender y compartir lo que aprendo con ustedes cada que busco nuevo contenido para publicar, una de las cosas que......

Seguir leyendo 48

BPG el nuevo formato de imágenes que quizás reemplace al JPEG

16 diciembre, 2014 Enlace Corto

imagen comparativa bpg vs jpg img 1

Esta es una excelente noticia para los diseñadores que le dan la importancia debida a la optimización del tamaño de sus imágenes y la calidad, se trata del reciente nacimiento de BPG el nuevo formato de imágenes que podríamos empezar a considerar como una alternativa real al famoso JPG el cual vio la luz de manera oficial como un estándar de compresión de imagen en 1992 y que creció su popularidad con el paso de los años al ser considerado la mejor opción en compresión de imágenes que la menor perdida de calidad de las mismas, actualmente el formato JPG tiene un porcentaje de uso del 70% en comparación con otros formatos de imagen como PNG o GIF. Pero bueno la noticia es sobre el futuro en la compresión de imágenes digitales, BPG (Better Portable Graphics) es un nuevo formato de compresión de imágenes el cual fue creado por el......

Seguir leyendo 94

Plugins para agregar efectos elástico a elementos de tu interface web

elastic-svg-elements

Ultimamente estoy compartiendo con ustedes algunos recursos bastante interesantes enfocados a diseño web, entre los clásicos recursos como iconos, templates web y plantillas PSD para interfaces de usuario también hemos compartido recursos SVG que se han vuelto mas que una tendencia, se han vuelto una necesidad pensada en la calidad de diseños que realizamos y el diseño web responsivo, aunque el uso de elementos SVG aun no se puede considerar como un estandar puesto que no todos los navegadores actuales ofrecen soporte completo para esto, si podemos decir que es el futuro enfocado al uso de elementos visuales en diseño web. Dado esto y continuando con nuestra tendencia interna de compartir recursos para diseñadores web relacionados con elementos SVG les quiero compartir un enlace en donde encontrar una serie de plugins para agregar efectos elástico a elementos de tu interface web, de forma sencilla y que le ofrecerán un aspecto elegante,......

Seguir leyendo 60

Evil Icons un paquete de iconos SVG gratuitos

evil icons

Les comparto un fantástico paquete de iconos vectoriales totalmente gratuitos, se trata del paquete Evil Icons que incluye un total de 56 iconos SVG gratuitos que puedes utilizar en tu diseño web o en algún diseño impreso que desees realizar sin preocuparte por temas de licencias, este fabuloso paquete de iconos SVG gratis fueron creados por los diseñadores Alexander Madyankin y Roman Shamin ambos originario de Rusia quienes decidieron aportar un poco de su conocimiento a la comunidad de diseñadores en todo el mundo y de forma gratuita. Estos iconos pueden ser descargados en formato Ai para Adobe Illustrator o también puedes acceder al proyecto en GitHub en donde explican los métodos disponibles que ofrece Evil Icons para utilizar los iconos en tu pagina web directamente desde los repositorios dedicados por medios de Rail o directamente desde archivos CSS. Definitivamente un paquete de recursos para diseñadores web perfecto para complementar......

Seguir leyendo 78

Beetle template web responsiva con efectos parallax gratis

beetle

Excelente template web responsiva con efectos parallax hecha utilizando los estándares de programación web HTML5, CSS3 y como no podía faltar JavaScript, esta template para diseños web lleva el nombre de Beetle la cual fue creada por el diseñador de interfaces UI Frank Rapacciuolo y el desarrollador web Pasquale Vitiello, Beetle es una template HTML5 completamente gratuita con propiedades responsivas que se adapta fácilmente computadoras, laptops, tabletas y teléfonos móviles. En el sitio web de Beetle el cual enlazamos al final de estas lineas, podrán encontrar un demo de esta maravillosa template web y ademas de los archivos HTML y CSS podrán descargar los archivos PSD fuentes con los que fue diseñada esta plantilla los cuales te pueden ser muy útiles para presentar mockups del diseño de la pagina a tu cliente utilizando los elementos que utiliza la template Beetle. En el mismo sitio los desarrolladores ofrecen una versión de esta......

Seguir leyendo 53

Cactus, App para generar plantillas HTML5 para paginas web

cactus

Cactus es un simple, interesante y poderosa App para generar plantillas HTML5 para paginas web de una forma muy pero muy rápida y sencilla, literalmente con un click, Cactus es una App para Mac que se convirtió en una aplicación gratuita recientemente y que te podrá ahorrar algo de tiempo en desarrollo de paginas web, esta App integra una serie de plantillas HTML5 prediseñadas y que te pueden servir de base para ahorrar algunas horas de programación para generar la base de un diseño web. Cactus te permite crear paginas web rápido en base a sus plantillas las cuales puedes modificar libremente para incluir todos tus assets, con archivos CSS e imágenes que integren tu diseño final, la App no genera el producto final de tu pagina web, de hecho solo genera plantillas HTML base para empezar a hacer paginas web y ahorrarte un poco de tiempo en el trabajo.......

Seguir leyendo 71

WebFont gratis con 74 iconos de métodos de pago, PaymentFont

payment font

PaymentFont es una WebFont gratis especial para paginas de comercio en linea, PaymentFont incluye un total de 74 iconos de métodos de pago entre estos Paypal, las clásicas Visa, MaterCard, eTrust, WesternUnion y una gran cantidad de otros servicios relacionados con el comercio electrónico y que podrían ser muy útiles para paginas web que acepten pagos en linea, como la gran mayoría de los recursos que publicamos aquí esta WebFont puede ser utilizada libremente sea en proyectos personales o comerciales sin problemas de licencias o costos de uso. En la pagina oficial del proyecto PaymentFont podrán encontrar la documentación necesaria para utilizar esta fuente en tu pagina web, basta con incluye las carpetas y archivo CSS en el directorio de tu pagina web, incluir la llamada al archivo CSS en la cabecera de tu pagina y para utilizar los iconos basta con asignar una clase de preferencia a un elementos HTML......

Seguir leyendo 50

PhotoSwipe script para galerías de imágenes con soporte de gestos Touch

photoswipe

PhotoSwipe es uno de los mejores scripts JavaScript disponibles en Internet para crear galerías de imágenes para paginas web, es un script completamente gratuito que no tiene dependencias con otros scripts o frameworks, es decir no tendrás necesidad de utilizar jQuery, Mootools ni ningún otro framework, PhotoSwipe ofrece un completo soporte de gestos Touch y MultiTouch que convierte a esta galería de imágenes en un excelente recurso para diseñadores web que ofrezcan diseños de paginas web responsivas con soporte para móviles y tabletas. PhotoSwipe, a su vez utiliza elementos de navegación SVG que se adaptan de forma automática a cualquier resolución sin perdida de calidad, ofrece soporte de navegación con el teclado, otra característica bastante interesante de PhotoSwipe y que la hace diferente a otras opciones disponibles en Internet es su optimización para SEO, ya que tiene un generador de URL’s que permiten ser generadas para cada elementos de tus......

Seguir leyendo 53

GluePrint es una App para comparar Mockups con tu diseño final

glueprint

GluePrint es una interesante App para Mac perfecta para los diseñadores que le den la importancia debida a los detalles, después de todo aquel dicho que dice “el diseño esta en los detalles” es muy cierto, con GluePrint podrás comparar el Mockups final de tu diseño con el diseño ya implementado para comprobar las dimensiones y espacios entre elementos, todo con el fin de conseguir que el diseño web de tu pagina o el diseño de la interface de tu App sea idéntico al planeado en la propuesta de diseño previamente realizada en Photoshop, Sketch o cualquier otra aplicación de diseño. ¿Como funciona? muy fácil. GluePrint te permite abrir la imagen de tu mockup final incluyendo esta en una ventana semi transparente que podrás ubicar sobre el diseño ya implementado, como si estuvieras poniendo una hoja de acetato sobre un dibujo para comparar las lineas de tu diseño, solo que......

Seguir leyendo 63

Recursos HTML5/CSS3 para crear efectos hover elegantes y fuera de lo común

html5 css3 efectos hover img 1

Quiero compartir con ustedes una recopilación de recursos HTML5/CSS3 perfecta para diseñadores web que estén cansados de usar los efectos básicos que ofrecen los navegadores con el fin de ofrecer a sus clientes y los visitantes de las paginas que realicen una experiencia diferente y atractiva al navegar en una pagina, se trata de una recopilación de recursos y tutoriales para crear efectos Hover elegantes y totalmente fuera de lo común aprovechando todas las ventajas que ofrece el trabajar con HTML5, por supuesto con CSS3 y algo de JavaScript. Todos los recursos y tutoriales de esta recopilación son gratuitos, y en todos los enlaces encontraran ejemplos de los efectos Hover, tutoriales e indicaciones de uso y el código fuente de estos ejemplos para que puedas practicar con ellos aplicandolos bajo el entorno y diseño en el que estés realizando, los enlaces a cada uno de estos recursos estás aplicados en las......

Seguir leyendo 46

Google presenta el nuevo “No CAPTCHA reCAPTCHA”

recaptcha

Todos, nos hemos quejado alguna vez del Captcha aquel pequeño campo en los formularios en donde debemos escribir exactamente las letras distorsionadas que nos presenta una imagen adjunta a ese campo, bueno pues ese pequeño campo ha sido una de las mejores formas para disminuir el SPAM en las cuentas de correo y la falsificación de cuentas en diferentes servicios, en 2009 Google adquirió a la empresa desarrolladora de reCaptcha uno de los tantos servicios de Captcha existentes en la red. Bueno pues el día de hoy Google ha anunciado el mejorado sistema de reCaptcha para paginas web, bajo la leyenda “No CAPTCHA reCAPTCHA“, que viene a facilitar a los usuarios la forma en como le demuestran a los usuarios que no son un robot (bot), el nuevo sistema reCaptcha que plantea Google es mucho mas sencillo y amigable al usuario y por otro lado también mejora la seguridad de......

Seguir leyendo 94

Semantic UI un framework CSS para diseño de interfaces

semantic ui framework css diseno interfaces

Les quiero compartir un nuevo recurso para diseñadores esta vez orientado al diseño de interfaces y el diseño web, dos especialidades que actualmente ya no son una tendencia son casi una obligación, ya que no hay empresa que no necesite una pagina web y por consiguiente un diseño de interface, bueno pues lo que les deseo compartir es un Framework CSS/HTML para diseño de interfaces, se trata de Semantic UI un framework que es relativamente nuevo. Semantic UI ofrece: Más de 3000 variables CSS. 50 definiciones de elementos UI prediseñados que puedes utilizar para aplicar en el diseño de tu pagina o aplicación. Es un proyecto Open Source en el cual están involucrados multiples diseñadores y desarrolladores quienes han puesto un granito de arena para hacer posible este proyecto que actualmente cuenta con mas de 2,800 Commits. Este framework orientado al diseño de interfaces ofrece un paquete de templates entre......

Seguir leyendo 81

Inspiración: 10 Diseños de paginas web – Noviembre 2014

diseños web diciembre 2014 cover

Ya se nos esta acabando el año y quiero seguir mejorando Frogx Three en cuanto a diseño y también mucho en cuanto a contenido, la idea es compartir con todos muchas dosis de inspiración en relación a varios temas, y por supuesto que me gustaría conocer sus consejos y opiniones eso sería genial porque al final lo que comparto en este blog es para todos un recurso útil, por ello a partir de hoy empezaremos con una nueva serie post mensuales con galerías de diseños de paginas web con el fin de compartir un poco inspiración para diseñadores web. El fin de estas galerías es que tu como diseñador de paginas web te atrevas a realizar diseños diferentes, darte cuenta que hay cosas increíbles que se pueden crear y que en diseño web como en cualquier especialidad de diseño casi no existen limites. El único limite que tiene el diseño es......

Seguir leyendo 89

Tumult Hype Pro el futuro de la animación con HTML5/CSS3

tumul hype professional

Tumult la empresa que desarrolla  Hype una de las mejores aplicaciones para crear animaciones web y diseños de paginas web en Mac, Tumult esta preparando el lanzamiento de una nueva versión de su poderos App, se trata de Hype Pro el futuro de la animación con HTML/CSS3 o al menos así lo están dando a conocer, entre las características que promete Tumult para la nueva versión de Hype, aparte de la posibilidad de crear animaciones para Web, Hype Pro incluye un nuevo método para crear paginas web responsivas de forma intuitiva y muy sencilla sin necesidad de programar. El nuevo Hype Pro también te permitirá crear animaciones con movimientos naturales sin utilizar keyframes o código, simplemente utilizando las funciones que el mismo programa ofrece, también ofrece una forma mas sencilla para agregar interacción y gestión de eventos para controlar las animaciones, perfecto para crear juegos HTML5 para móviles con eventos Touch, otra......

Seguir leyendo 66

Blocs la App para diseñar paginas web responsivas sin programar

blocs app

Les presento Blocs App una nueva e increíble App para diseñar paginas web responsivas sin programar, así es no necesitas saber nada de programación para utilizar Blocs App y crear paginas web que sean responsivas, bonitas y con optimización para SEO, esta fantástica App para Mac es una de las nuevas aplicaciones que se están convirtiendo en toda una tendencia en Internet y que permiten diseñar paginas web sin tener que ser un programador, eso si deberás conocer los conceptos básicos sobre diseño web para que tu pagina sea un éxito, no bastan con diseñar y no programar, Blocs App no hace magia solo te ayuda a ser mas productivo en tu trabajo. A pesar de que Blocs App dice ser la App definitiva para los diseñadores web que no saben programar, la verdad es que saber un poco de programación mínimo lo básico de HTML5, CSS3 y JavaScript es necesario......

Seguir leyendo 107

Underscores, generador de plantillas base responsivas para WordPress

underscores

Underscores o _S es una plantilla base para WordPress la cual podemos utilizar para implementar a partir de ella nuestros diseños web y tomarla como base para crear los diseños de nuestra pagina web utilizando WordPress como motor principal, en el sitio web que enlazo al final de estas lineas podrán encontrar un generador de plantillas base responsivas para WordPress gratuito el cual genera plantillas basado en la plantilla Underscores, la cual es Open Source. El sitio te genera un archivo Zip con la plantilla underscore con soporte responsivo el cual puedes utilizar para tu pagina web, en el sitio antes de generar puedes personaliza el nombre de la plantilla, el nombre del autor, la URL del autor, la descripción e incluso puedes solicitar que en el paquete se incluya un archivo SASS para manejar los estilos CSS utilizando SASS. Este generador de plantillas para WordPress es gratuito, y seguro que les......

Seguir leyendo 73

Inspiración: Diseño web para Discovery Channel

diseno web discovery channel cover

Les dejo un poco de inspiración para este fin de semana, se trata de la propuesta de diseño web para Discovery Channel que hizo la agencia Huge Inc. de Rio de Janeiro Brasil el año pasado para ganar se cuenta de esta gran marca, lo cual consiguieron, la propuesta de diseño que hizo el estudio fue utilizada por los sitios de Discover Channel regionales, y algunos aun la utilizan sin embargo el sitio de Discovery Channel de los Estados Unidos utiliza un diseño totalmente diferente. Los sitios regionales de Discovery utilizan la propuesta de diseño que hizo en su momento el estudio Huge Inc. y que pueden ver completamente en la siguiente imagen, aunque la realidad de la propuesta con la versión que utilizan los sitios de Discovery es otra pues en la practica el diseño de las paginas web de Discovery tiene algunas variaciones en su diseño y estructura,......

Seguir leyendo 53

Tips: El arte de las animaciones en interfaces web

15 noviembre, 2014 Enlace Corto

css animations

Llevamos muchos tiempo hablando del diseño de interfaces y de la importancia que tienen las animaciones en interfaces web aprovechando las capacidades que ofrece CSS3, HTML5 y JavaScript combinados logrando enganchar y enamorar a tus visitantes con algunas animaciones simples y sutiles que dan una sensación de innovación y comodidad al navegar a través de una pagina web o cualquier interface de una aplicación sea cual sea el medio en el que la estemos utilizando. Por ello quiero compartirles un enlace que me encontré muy interesante y que todos deberías leer, es una pagina web en forma de diapositivas que nos ofrece muchos tips sobre el arte de las animaciones de interfaces, así como muchos recursos para utilizar de forma inteligentes estos recursos para diseñadores de interfaces  web y móviles, en el documento encontrarán desde Frameworks CSS y JavaScript recomendados, ejemplos de código, recomendaciones de su uso e incluso algunos......

Seguir leyendo 54

Pagina 1 de 28123...6...Antiguas »

#Ranascreativas // Últimas imágenes enviadas