diseño | RFS Digital - Tecnologia, Aplicaciones web gratuitas e Internet

Mostrando entradas con la etiqueta diseño. Mostrar todas las entradas

lunes, mayo 19, 2014

Fontastic: Herramienta para crear fuentes

Fontastic es una aplicación que permite poder crear o diseñar tu propia fuente con una serie de íconos, alrededor de 9000, para poder agregarlo a tu página web o blog. Permite la modificación y la edición de las fuentes vía CSS.

Basta con crearte un usuario con tu correo y contraseña para luego cargar la aplicación y empezarla a utilizar. Se puede escoger una serie de iconos o agregar tu propios íconos en formato SVG para que formen parte de tu fuente.

Se puede escoger la serie de íconos que deseas para tu fuente. Asimismo se le puede poner un nombre a tu creación y agregarle un prefijo para las llamadas en CSS a la fuente.

Finalmente la aplicación te permite descargarla fuente para que puedas agregarla en tu fuente o sitio web o alojarla en los servidores de la propia aplicación.

Link: Fontastic

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google+.

viernes, mayo 16, 2014

NastyIcons: Compendio de íconos graciosos

NastyIcons es un tipo de letra web (o también llamado fuente) con un conjunto de caracteres como gráficos de tipo obsceno o gracioso para ser utilizado en proyecto de diseño como creación de logos o impresión en polos.

Importante: En el caso de que se desee utilizar la fuente como parte de un proyecto web, el autor solicita que se le contacte para solicitar autorización en el uso de la fuente.

Link: NastyIcons

Descarga directa: nastyicons.com/pack/NASTY-ICONS.zip

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google+.

miércoles, abril 30, 2014

3D CSS Text Generator: Generador de texto utilizando CSS 3

3D CSS Text Generator es una sencilla aplicación que nos permite poder editar texto y agregarle propiedades de CSS3 para crear un efecto llamativo sin el uso de imágenes, se trata de puro css3 compatible con los navegadores más utilizados en la actualidad como Chrome, Firefox, IE10, Safari y Opera.

Link: 3D CSS Text Generator

¿Qué les pareció? ¿Conocen alguna utilidad similar para trabajar con propiedades de CSS3 online?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google+.

viernes, abril 04, 2014

MacBook y iMac: Diseño en CSS3

En el siguiente post les mostraremos una animación de la versión de escritorio de Apple, el iMac y su laptop, una MacBook, hecho enteramente en CSS3.

Asimismo, tenemos una galería de animaciones y diseño hechos en CSS3 que pueden revisar.

Pueden darle un vistazo en el siguiente enlace.

Link: Designing MacBook & iMac Using CSS3

¿Qué les parece la animación? ¿Conocen alguna animación en CSS3 similar?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +

miércoles, abril 02, 2014

Modern.IE: Encuentra errores en páginas web

modern.IE es una herramienta práctica de Microsoft que nos permite realizar el escaneo de una página web para detectar errores comunes de codificación. Advierte sobre malas prácticas como la especificación incompleta de las propiedades CSS, doctypes no válidos o incorrectos, y las versiones obsoletas de bibliotecas de JavaScript populares.

El test más práctico se realiza ingresando la URL de nuestro sitio, y esta herramienta nos indica los errores de diseño comunes que han sido detectados.

Como se menciona en la misma página de Microsoft:

¿En qué consiste esta herramienta?

En la actualidad, hacer que tus experiencias web sean geniales (o que, simplemente, funcionen) en diversos navegadores y dispositivos puede llevar mucho tiempo. Esta herramienta detecta los procedimientos de codificación comunes que pueden conllevar problemas de compatibilidad o impedir que los usuarios disfruten de la mejor experiencia posible con la página web. Siempre que resulte posible, recomendamos aplicar correcciones o mejoras de acuerdo con estándares web como HTML5 y CSS3 (o con procedimientos alternativos adecuados). No se trata de una lista de comprobación completa para la codificación de Web actual, sino de un punto de partida que te permite emplear menos tiempo en la realización de pruebas para IE y más tiempo en la creación de lo que de verdad importa en Web.

Este test tiene su versión open source, la cual se puede descargar desde Github.

Link: Modern.IE

¿Qué les pareció? ¿Utilizan algún otro test para sus páginas web?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google+.

miércoles, febrero 12, 2014

Border-Radius: Bordes redondeados [IE, Chrome, Firefox]

Border-Radius es una propiedad que permite agregar bordes redondeados a un elemento de una página web, de acuerdo con al W3C, encargado de producir recomendaciones para la web.

En la actualidad es soportado por casi todos los navegadores web, como podemos apreciar en el siguiente enlace.

Sin embargo, las propiedades cambian de acuerdo al navegador. Por ejemplo si se utiliza webkit, utilizado en Chrome y Safari, se requiere de la siguiente propiedad en CSS:

-webkit-border-radius: 15px;
-webkit-border-bottom-right-radius: 50px;
-webkit-border-bottom-left-radius: 50px;

Esto cambia si es que utilizamos Mozilla Firefox:

-moz-border-radius: 15px;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 50px;

Internet Explorer reconoce las siguientes líneas

border-radius: 15px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;

Para aplicar estas propiedades con facilidad y probarlas en tiempo real, podemos utilizar Border-Radius, una aplicación web que permite editar las propiedades de borde en cada una de las cuatro esquinas de un elemento web y definir si las queremos para WebKit, Gecko o simple CSS3.

¿Qué les pareció la aplicación? ¿Conocen alguna similar para diseño web?

Link: Border-Radius

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google+.

lunes, febrero 03, 2014

Cómo acceder a la Consola Web [IE, Firefox, Chrome]

En el siguiente post explicaremos como activar la consola web de los 5 navegadores web más populares:

Chrome: En el caso de Chrome se puede hacer de dos maneras:

1. En el ícono de la tuerca en la esquina superior derecha, se escoge la opción Herramientas > Herramientas para Desarrolladores. Luego cuando se abra la ventana en el cuadro inferior. Se escoge la opción Console (Consola).

2. El acceso directo a las Herramientas de Desarrollador es: Ctrl + Mayúsc. + I

Firefox: En el caso de Firefox se puede hacer de dos maneras:

1. En el botón de la tuerca en la esquina superior derecha, luego se escoge Desarrollador Web > Consola Web. Luego cuando se abra la ventana en el cuadro inferior se puede utilizar la consola.

2. El acceso directo a las Herramientas de Desarrollador es: Ctrl + Mayúsc. + K

Internet Explorer: En el caso de Internet Explorer se puede hacer de dos maneras:

1. En el ícono de la tuerca, en la esquina superior derecha del navegador, se escoge la opción Herramientas de Desarrollo. Luego cuando se abra la ventana en el cuadro inferior se escoge la segunda opción y ya se puede utilizar la consola.

2. El acceso directo a las Herramientas de Desarrollador es: F12

Opera: En el caso de este navegador el acceso es un poco diferente:

Se hace click derecho en cualquier parte de la página y se escoge la opción 'Inspeccionar Elemento'. Luego cuando se abra la ventana en el cuadro inferior. Se escoge la opción Console (Consola).

Safari: Como aparece explicado en la documentación oficial del navegador:

Se deberá de activar la barra de menú desarrollo, para ello se deberá de presionar el botón Alt para que aparezca el menú, luego se escoge Edición > Preferencias...

Cuando se abra la ventana de preferencias, en la pestaña de Avanzado, se marca la opción 'Mostrar el menú Desarrollo en la barra de menús'.

Una vez cargado el menú Desarrollo, se escoge la opción mostrar inspector web. Luego cuando se abra la ventana en el cuadro inferior. Se escoge la opción Console (Consola).

El acceso directo a esta opción es: Ctrl. + Alt. + I

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google+.

viernes, enero 31, 2014

jQuery: Ver la versión utilizada en tu proyecto

En este corto post explicamos qué versión de jQuery están utilizando actualmente.

jQuery es la biblioteca en JavaScript más utilizada para crear animaciones en páginas web y, en concreto, para manipular el árbol dom de un documento web en html.

En algunos casos como en la depuración de código, cuando se trabaja en un entorno de trabajo web con jQuery instalado por defecto en este, cuando un plugin determinado requiere una versión específica de jQuery o cuando se trabajar con diferentes versiones de la biblioteca (práctica no recomendada) se requiere saber la versión que se utiliza o la que se está cargando en el browser o navegador.

Para poder ver la versión utilizada, se puede utilizar la consola web del navegador para ejecutar una línea en JavaScript o instalar en Chrome o Firefox un plugin de desarrollo web como Firebug. Se puede escribir cualquiera de las dos líneas:

 // Retorna la versión de jQuery con el siguiente formato: "1.10.2"
jQuery.fn.jquery;

// $ reemplaza a jQuery
$.fn.jquery;

Cómo activar la consola web en los navegadores:

Firefox: Ctrl. + Mayúsc. + K
Chrome: Ctrl. + Mayúsc. + I
Internet Explorer 11: F12
Opera: Se hacer clic derecho en cualquier zona de la página web y se escoge la opción 'Inspeccionar Elemento'

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google+.

sábado, julio 06, 2013

Fuentes Gratuitas: 7 Alternativas que debes ver

Ya hemos hablamos anteriormente sobre aquellas alternativas para descargar fuentes de uso gratuito para nuestro proyectos con una gran cantidad de fuentes gratuitas. En esta oportunidad tenemos aún más opciones para agregar a nuestra lista de fuentes gratuitas para su blog o proyecto web:

1001 Fonts:

Tiene la opción de poder bajar individualmente de forma gratuita cada una de las fuentes.

AbstractFonts:

Con alrededor de 13 700 fuentes, AbstractFonts también es una fuente de consulta para encontrar aquellas fuentes que necesitamos.

Acid Fonts:

AcidFonts tiene una gran cantidad de fuentes clasificadas por categorías las cuales hacen más fácil su búsqueda.

FontSpace:

Con más de 20000 tipos de fuentes para encontrar la adecuada, FontSpace tiene una gran base de fuentes en la que podemos encontrar la más adecuada a nuestras necesidades.

Font Squirrel:

Una opción similar a las anteriores que permite buscar las fuentes por las más populares, así como ver que el uso de la fuente sea compatible para escritorio, móviles, entre otros.

FontStruct:

Con FontStruct puedes crear tu propia fuente a través de la herramienta de dibujo que tiene esta aplicación. Es la que más me gustó por ofrecer esa funcionalidad para crear de forma online tu propia fuente.

Urban Fonts:

Urban Fontos tiene una base de 8000 fuentes gratuitas y algunas otras que tienen precio bajo la categoría 'premium'.

¿Conocen alguna otra página que ofrezca fuentes gratuitas?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google+.

sábado, junio 01, 2013

iPhone4 hecho en CSS3

En el siguiente post les mostraremos una animación del teléfono de Apple, el iPhone 4 en este caso, hecho enteramente en CSS3. Me llamó la atención por el parecido a la interfaz de iOS.

Entre las características de esta animación se tiene:

Bloquear / Desbloquear y Apagado / Encendido
El sonido de desbloqueo y apagado
Animaciones de los íconos
Una alerta en css3
Cambios de color de la carcasa

Pueden darle un vistazo en el siguiente enlace.

Link: iPhone 4 in pure CSS3

¿Qué les parece la animación? ¿Conocen alguna animación en CSS3 similar?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.

jueves, mayo 16, 2013

Dabblet: Prueba código en CSS online

En el siguiente post les hablaremos de Dabblet, una aplicación que permite probar código en CSS directamente desde el navegador, sin necesidad de instalar software como el Adobe Dreamweaver o algún otro editor de páginas web.

Permite realizar pruebas en tiempo real de código en JavaScript, HTML, CSS y ver los resultados a medida que se escribe algo de código.

Es algo parecido al Mozilla Thimble del cual hablamos anteriormente.

Link: Dabblet

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.

viernes, abril 12, 2013

CCFinder: Programa freeware para buscar imágenes gratuitas

Si eres un webmaster, blogger o diseñador gráfico y deseas utilizar imágenes con licencia Creative Commons o sea gratuitas (para evitar infringir las leyes de algún país, o vulnerar derechos de autor) para tus proyectos, este estupendo programa freeware: CCFinder, te será de mucha utilidad para buscar y encontrar muchas imágenes gratuitas vía Internet.

Estas imágenes gratuitas que analizará el programa son de la base de datos de Flickr, ya que son muchos los usuarios de esta web que ceden los derechos de autor sobre sus trabajos fotográficos. Este programa CCFinder, es para las PC con Windows y Net Framework 4, que es una de las plataformas más utilizadas junto con Adobe AIR y Java.

Con su buscador avanzado (para poder filtrar y encontrar las imágenes que deseamos) el programa encontrará las fotos al instante. También gracias al programa se pueden añadir algunos efectos a las imágenes.

Características principales de CCFinder:

- CCFinder es un buscador de fotos publicadas bajo la licencia Creative Commons (imágenes que estamos autorizados a publicar).
- Las búsquedas y descargas son de los archivos fotográficos de Flickr.
- El programa nos permite poner un filtro de color a la foto para cambiar su aspecto.
- Encontradas las imágenes podremos establecerlas como fondo de escritorio.
- CCFinder es un programa freeware, gratuito.

Enlace: CCFinder

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google+.

lunes, marzo 25, 2013

Ribbet: Excelente editor de fotos en línea

¿Estás buscando una manera fácil de mejorar tus fotos? Si es así Ribbet.com, es la mejor alternativa a escoger hoy en día. Esta aplicación web es muy completita, tiene muchas funciones fáciles de usar y lo mejor, edita nuestras fotos muy rápido.
¿Qué podremos hacer con este editor fotográfico online Ribbet?

- Primero no necesitas instalar nada ya que es online, usamos nuestro navegador favorito.
- Corregir y arreglar nuestras fotos en un solo clic.
- Afinar todos los resultados con controles avanzados como: Recortar, redimensionar, rotar y todo en tiempo real.
- Tiene muchísimos efectos especiales para escoger.
- Es increíblemente rápido en nuestro navegador. Doy fe de ello.
- Tiene muchas y variadas fuentes para añadir textos, firmas o marca de agua, etc.
- Esta web funciona en Mac, Windows y Linux.
- No necesitas registrarte y es gratis.

Con un solo clic del ratón podemos editar todas nuestras fotos y se verán mucho mejor. He editado muchas fotos y todos con resultados óptimos. Sólo tenemos que subir la foto, y la mejoramos de inmediato, sin mayor esfuerzo de nuestra parte ya que esta aplicación web lo hace todo. Lo que me encanto también es que es muy rápido. Recomendado.

Enlace: ribbet.com

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google+.

jueves, marzo 21, 2013

Íconos de Photoshop hechos en CSS3

En el siguiente post les mostraremos una animación de los logos de Adobe, Adobe Photoshop CS3, Adobe Photoshop CS4 y Adobe Photoshop CS5 hecha enteramente en CSS3.

La animacipon está compuesta por los logos del famoso editor fotográfico en sus diferentes versiones hasta la más reciente.

Es un diseño en CSS3 parecido a la animación original.

Link: A tribute to Adobe Photoshop

¿Qué les parece la animación? ¿Conocen alguna animación en CSS3 similar?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.

jueves, marzo 14, 2013

umbrUI: Diseño de inputs en CSS3

En el siguiente post les mostraremos una animación basada en el tratamiento de elementos html input estilizados con CSS3 sin hacer uso de imágenes adicionales o JavaScript.

Cabe mencionar que son visibles en Chrome o Safari, si usan Firefox no se verá correctamente ya que, como el autor indica, está hecho para navegadores que soporten Webkit.

Pueden darle un vistazo en el siguiente enlace.

Link: CSS3 appearance none

¿Qué les parece la animación? ¿Conocen alguna animación en CSS3 similar?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.

sábado, marzo 09, 2013

Nyan-Cat hecho en CSS3

En el siguiente post les mostraremos una animación del Nyan - Cat hecha enteramente en CSS3.

La simulación está compuesta por el famoso gato en movimiento y con su música de fondo. Se recomienda ver la animación con los parlantes apagado por obvias razones.

Es un diseño en CSS3 parecido a la animación original.

Link: CSS Nyan Cat

¿Qué les parece la animación? ¿Conocen alguna animación en CSS3 similar?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.

miércoles, marzo 06, 2013

íconos de iOS hechas en CSS3

En el siguiente post les mostraremos iconos del sistema operativo de Apple, iOS, hecho enteramente en CSS3. Me llamaron la atención por el gran parecido con los íconos de las aplicaciones de Apple.

Cabe mencionar que son visibles en Chrome, si usan Firefox no se verá correctamente ya que, como el autor indica, está hecho para navegadores que soporten Webkit.

Pueden darle un vistazo en el siguiente enlace.

Link: iOS Icons in pure CSS

¿Qué les parece la animación? ¿Conocen alguna animación en CSS3 similar?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.

martes, marzo 05, 2013

Ballena de Twitter en CSS3

En el siguiente post les mostraremos la animación de la famosa ballena de Twitter, hecha enteramente en CSS3. Es una animación creada por Steve Dennis, basada en el diseño original de Yiying Lu.

La simulación está compuesta por la conocida ballena que aparece cuando Twitter está caído y el conjunto de palomas que intentan levantarla.

Es un diseño en CSS3 parecido a la animación original.

Link: Pure CSS Twitter Fail Whale

¿Qué les parece la animación? ¿Conocen alguna animación en CSS3 similar?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.

lunes, marzo 04, 2013

Adobe Photoshop en HTML5 y CSS3

En el siguiente post les mostraremos una simulación de la interfaz de Photoshop hecha enteramente en CSS3.

La simulación está compuesta por la interfaz que sale al iniciar el programa, la interfaz principal del programa y una ventana emergente.

Es un desarrollo en CSS3 visualmente atractivo que vale la pena ver.

Link: Adobe Photoshop Simulator

¿Qué les parece la animación? ¿Conocen alguna animación en CSS3 similar?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.

viernes, marzo 01, 2013

TinyPng: Comprime imágenes PNG sin perder su calidad

Diseñadores, bloggers, webmasters y todo aquel que necesite imágenes claras o nítidas para su blog sabe que la mayoría de fotos con extensión PNG suelen ser muy pesadas por su buena calidad, siendo así estos archivos inviables por lo general para ser usados en una página web. Una solución a ese problema es: TinyPng.org, que reduce casi en dos terceras partes el peso de estos archivos de imagen, algo que sería de mucha ayuda en el desempeño de una web ya que se gana imágenes de buena calidad PNG y debido a su menor peso estas cargan más rápido a la hora de abrir una web, usándose menos ancho de banda.
Esta herramienta web solo se especializa en este tipo de archivos con extensión PNG. Tampoco requiere que instalemos nada en nuestro computador y lo mejor, es gratuito.

Esta útil herramienta web utiliza técnicas de compresión que disminuyen selectivamente el número de colores de una imagen, requiriendo un menor número de bytes para almacenar sus datos, lo que es casi imperceptible a la vista pero que genera una reducción muy considerable en el tamaño del archivo final.

Características principales de TinyPng.org:

- Aplicación web gratuita para reducir el tamaño de imágenes con extensión PNG sin perder su calidad.
- También reduce archivos PNG cuando se usa transparencias, característica de este tipo de extensiones.
- Permite optimizar hasta 20 imágenes al mismo tiempo, tamaño máximo 3MB por cada archivo.
- Al momento de optimizar las imágenes se muestra en la web una barra con la diferencia de tamaños entre la imagen original y la nueva imagen que se va generando.
- Los resultados son rápidos y se puede descargar el archivo al instante.

Enlace: tinypng.org

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google+.