25 Mar

Iconos sociales en forma de marcadores

Si bien la cantidad de iconos sociales disponibles en Internet es más que abundante, hay casos en los cuales encontramos un set que se vuelve imposible dejar pasar por su calidad y por lo completo que pueda ser, ya que si bien los paquetes son muchísimos, no todos incluyen los sitios que mas se utilizan. En mas de una oportunidad me pasó de encontrar un grupo genial pero en el cual faltaba un red o mas, por lo cual debía dejarlo atrás y optar por otro.

Iconos sociales gratis
El último set de iconos sociales publicado en Noupe se caracteriza por tener forma de pequeños marcadores con sombras y reflejos aplicados de la forma ideal. Creados por la experta en Adobe Illustrator de éste sitio, fueron diseñados en la versión CS5 del programa teniendo en cuenta cada detalle y logrando así un acabado más que profesional e ideal para gran variedad de temáticas.

La descarga incluye los archivos vectoriales en formatos .AI y .EPS, obviamente son escalables y para alegría de todos completamente libres para usos personales y comerciales sin problemas.

El grupo completo abarca 25 iconos de redes sociales y sitios utilizados por la mayoría de nosotros a diario, incluidos los mas buscados como LinkedIn, YouTube, Facebook, Twitter, Flickr, Vimeo, StumbleUpon, LastFM y el infaltable icono de feeds.

Descargar New Social Media de Noupe.

 

Via: http://www.kabytes.com/diseno/iconos-sociales-en-forma-de-marcadores

Share this
23 Mar

Elementos UI marrón oscuro

Quizás no se trate de un paquete muy grande pero los elementos que contiene son ideales para agregar en cualquier aplicación o web que se encuentren diseñando. Además del tono que se ha utilizado que resulta bastante original, destaco la calidad de los bordes y la utilización de luces y sombras.

Obviamente no es un color que combine con cualquier logo, pero en última instancia, al estar diseñados en Photoshop, no tendrán problemas en editarlos y armar paletas diferentes. Aunque mi recomendación sería que intenten armar una paleta de colores que incluya este marrón, para evitar inconvenientes con los degradados y que los efectos aplicados sobre los elementos desaparezcan.

Preview de elementos UI en marrón oscuro

Descargar Dark Web and Apps UI Kit | BreezyPrague

El archivo incluye un .psd con todos los elementos en un solo lugar, encontrarán botones, etiquetas, campos de búsqueda, barras de desplazamiento, botones de cambio de vista, controles, etc. Sin dudas, es una colección armónica y que puede encajar de forma perfecta en cualquier aplicación, y con la posibilidad de crear sus propias opciones a través de la utilización de los estilos de capa.

 

Via: http://www.kabytes.com/diseno/elementos-ui-marron-oscuro

Share this
21 Mar

Sistema de estadísticas PHP + MySQL

ChiliStats es un pequeño sistema de estadísticas web, desarrollado con PHP y MySQL, para el control y seguimiento de los visitantes. Muy sencillo y fácil de instalar.

Entre las principales características podemos destacar:

  • Instalación sencilla.
  • Fácil personalización del contador.
  • Bloqueo por IP’s.
  • Vista rápida de la información más importante.
  • Integración sencilla con MySQL.
  • Gráficos diseñados simplemente con CSS.
Captura de pantalla del sistema.

Sistema de estadísticas PHP con MySQL

Al momento de escribir esta entrada la versión vigente del sistema es la 3.0, en la cual se mejoraron y agregaron muchas de las principales características del sistema de estadísticas.

Pueden ver una demostración totalmente funcional en la web oficial de ChiliScripts.

Web: ChiliStats

Via: http://www.kabytes.com/programacion/sistema-de-estadisticas-php-mysql

Share this
19 Mar

15 Galerias de Imagenes para jQuery

Quienes esten dedicados a diseño web seguro mas de una vez hayan tenido la necesidad de emplear galerias de imagenes con efectos de slideshows, la verdad son muy vistosos y le dan un estilo bastante elegante a los sitios claro si se consideran dentro del diseño y se adapta correctamente, una de las librerías mas conocidas en Internet es jQuery y utilizando como base muchos son los desarrollos de galerias de imagenes jQuery las que hay en Internet, así que para ahorrarles un poco la búsqueda vamos a recomendarles algunas.

La recopilación fue hecha en Smashing Hub y contiene un total de 15 excelentes scripts jQuery para galerías de imagenes, como siempre les comparto algunos y al final el enlace para descargar todas.

Automatic Image Montage

Demo | Download

galerias de imagenes jQuery 1 15 Galerias de Imagenes para jQuery

Restaurant Website and Gallery template

Demo Download

galerias de imagenes jQuery 4 15 Galerias de Imagenes para jQuery

Grid Navigation Effects

Demo | Download

galerias de imagenes jQuery 3 15 Galerias de Imagenes para jQuery

Sliding Background Image Menu

Demo Download

galerias de imagenes jQuery 2 15 Galerias de Imagenes para jQuery

 

SLIDING LETTERS WITH JQUERY

 

slidingLetters

Demo || Download )


RESTAURANT WEBSITE AND GALLERY TEMPLATE

 

 

RestaurantTemplate

Demo || Download )


CIRCULAR DISCOGRAPHY TEMPLATE WITH JQUERY

 

 

circularDiscographyTemplate

Demo || Download )


3D WALL GALLERY

 

 

3dwallgallery

Demo || Download )

 


B&W BOX GALLERY

 

bwboxgallery

Demo || Download )

 


Thumbnails Navigation Gallery with jQuery

thumbnails_navigation_gallery

Demo || Download )


Creating a polaroid photo viewer with CSS3 and jQuery

 

creating_photo_viewer

Demo || Download )

 


AnythingSlider

 

anythingslider

Demo || Download )

 

Share this
17 Mar

Genial plantilla web para Fotógrafos

plantilla web para fotografos Genial plantilla web para Fotógrafos

Les dejo esta plantilla PSD para que creen paginas web para fotógrafos, es algo muy sencillo pero sin duda es una buena propuesta para armar un diseño web con galerías enfocadas a mostrar un mayor impacto en el trabajo fotografico, espero que sea de utilidad para ustedes esta plantilla web.

Descargar en: FreebiesGallery

 

Fuente: http://www.frogx3.com/2012/01/26/genial-plantilla-web-fotografos

Share this
15 Mar

Escucha la misma musica de tus amigos en Facebook

Facebook escuchar musica entre amigos Escucha la misma musica de tus amigos en Facebook

chat facebook escuchar musica con amigos Escucha la misma musica de tus amigos en FacebookFacebook busca por todas las maneras que compartas todo lo que haces en tu computadora con tus amigos, una de las nuevas características que permite es la posibilidad decompartir la musica que escuchas y dar la posibilidad que tus amigos escuches la misma canción sin tener que descargar un solo archivo.

Cuando uno de tus amigos conectado a Facebook este escuchando una canción aparecera una nota musical junto a su nombre en la lista de chat de facebook y si pones tu cursor encima deberás hacer click en “Listen with” para poder escuchar lo que tu amigo esta escuchando en ese momento, también se puede compartir lo que escuchas en las ventanas de chat.

Este nuevo servicio por el momento es una integración con Spotify, es decir que para que puedas compartir lo que escuchar debes tener una cuenta de Spotify y escuchar tu musica desde el mismo servicio.

Enlace: Facebook

 

Fuente: http://www.frogx3.com/2012/01/25/escucha-misma-musica-tus-amigos-facebook

Share this
13 Mar

Barras de scroll estilo OS X Lion con jQuery

LionBars es un plugin jQuery para la creación de barras de scroll copiando el mismo estilo que las del sistema operativo Lion. El script es muy liviano y funciona en la mayoría de los navegadores modernos.

Específicamente los navegadores que soportan a la perfección el uso de este plugin son: IE8, Safari, Firefox, Chrome, Opera, tanto en Windows como en OSX.

Las barras de scroll modificadas se ven de la siguiente manera:

barras de scroll estilo OS Lion

Modo de uso

1. Incluir la ruta completa al script

<script type="text/javascript" src="jquery.lionbars.0.3.min.js"></script>

2. Incluir las hojas de estilo necesarias

@include 'lionbars.css';

3. Finalmente llamar al plugin para que haga su trabajo

$('#box').lionbars();

El plugin no tiene demasiada ciencia, no obstante es un lindo detalle para utilizar en nuestros sitios web y darle un toque de distinción a nuestro diseño :D

Web: LionBars

Share this
11 Mar

Fuentes Web, soluciones y como utilizarlas

fuentes web Fuentes Web, soluciones y como utilizarlas

Cada día son mas las paginas que utilizan HTML5 y CSS3, y también los navegadores cada vez ofrecen mayor compatibilidad con estos estándares web, una de las características que estos estándares integran es el soporte para fuentes web desde el servidor via CSS utilizando @font-face y no desde el cliente (la maquina del usuario).

Antes en diseño web los diseñadores nos teníamos que limitar a utilizar fuentes comunes que podían ser visualizadas desde cualquier navegador y sistema operativo, las más comunes eran: Arial, Times New Roman, Impact, Serif, Andale Mono, Trebuchet MS y Verdana.

En la actualidad las necesidades en diseño web, son distintas y los diseñadores buscamos poder utilizar tipografías mas estilizadas que tengan un mayor impacto visual en los visitantes, para lograr esto han aparecido en los últimos años algunas herramientas, de las cuales vamos a hablarles un poco y como utilizarlas.

sIFR

 Fuentes Web, soluciones y como utilizarlasLos diseñadores siempre peleamos la posibilidad de usar otro tipo de fuentes mas estilizadas en nuestros diseños sin tener que usar imagenes, al principio la primera alternativa que salió fue sIFR que te permitia utilizar otras fuentes diferentes a las básicas mediante Flash, esta te permitia embeber un objeto flash el cual imprimia tu texto con la fuente que previamente le habías configurado en el código.

Pero el primer problema como siempre con Flash era que aumentaba el consumo de recursos del servidor y en ocasiones la compatibilidad del navegador provocaba que el texto saliera en blanco, y por ultimo sIFR ha quedado rezagado ya que Flash no es compatible con los navegadores para móviles y la gran mayoría de estos le han dado la espalda al soporte para Flash, de este modo sIFR se ha convertido en una alternativa pero que no es “todo terreno”.

Pero como todo, el desarrollo y la integración de los estándares en los navegadores cada vez fue mayor, y también surgió un problema el 90% de los usuarios que teníamos una enorme biblioteca de fuentes las teníamos en formatos legibles para nuestro sistema operativo especifico, y en web los navegadores entre su guerra había optado por ofrecer soporte para distintos formatos: EOT, WOFF, SVG, etc.

Como utilizar sIFR 3.0

  • Descargar la ultima versión de sIFR (Actualmente es 3.436 estable) (Link)
  • Sube lor archivos que descomprimiste del archivo que descargaste y agrega el siguiente código HTML, entre las etiquetas <head>
<link rel="stylesheet" href="sifr.css" type="text/css">
<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" type="text/javascript"></script>
<script type="text/javascript">
var cochin = { src: 'cochin.swf' }; //Debes subir el archivo cochin.swf que 
hace referencia a tu fuente, la cual debiste embeber en el SWF utilizando Flash.
sIFR.activate(cochin); // From revision 209 and onwards 
sIFR.replace(cochin, { selector: 'h1' });
</script>
  • Por ultimo en tu archivo CSS debes incluir esto para asignar tu fuente a las etiquetas deseadas.
.sIFR-active h1 { visibility: hidden; font-family: Verdana; line-height: 1em; font-size: 18px; } 

Convertir fuentes TTF a EOT

Entonces aparecieron las aplicaciones para convertir fuentes TTF (las mas comunes) a estos formatos, pero eran muy complicadas o costosas, entonces los usuarios exigimos algo de acuerdo a nuestras necesidades, porque claro no todos los diseñadores gráficos o web somos programadores o expertos frente a una computadora.

convertir de fuentes para web Fuentes Web, soluciones y como utilizarlas

font squirrel logo Fuentes Web, soluciones y como utilizarlasTras las exigencias aparecio Font Squirrel con un convertidor de fuentes, el cual permiteconvertir fuentes TTF a EOT y los otros formatos ofreciendo la posibilidad de utilizar nuestras fuentes en nuestra pagina web utilizando @font-face de tal modo que todos los usuarios vean el mismo estilo tipografico en nuestro diseño y que puedan interactuar con el texto copiando y seleccionando los fragmentos deseados, pero (mas peros) ahi no acaba también tiene sus carencias el sistema de Font Squirrel y no quiere decir que sean errores o este sea malo, de hecho no son carencias es respeto a las licencias, el convertidor para fuentes web no permite convertir cualquier fuente, por ejemplo si intentas convertir Helvetica para Web el sistema no te va a dejar porque esta tiene licencias comerciales que no permiten dicho proceso. Para entonces CSS3 ya se empezaba a esparcir cada vez mas por la web, entonces en Font Squirrel empezaron a generar un repositorio de fuentes web gratis que podemos descargar para utilizarlas en nuestro equipo o podemos descargar los formatos necesarios para utilizarlas en nuestra pagina web, este movimiento fue algo genial para muchos diseñadores.

Como utilizar fuentes descargas de Font Squirrel utilizando @font-face

  • Ir a Font Squirrel  y descargar la fuente que deseas o convertir tu fuente (generador).
  • Ahora sube la fuente que descargaste o creaste a tu servidor
  • Y en el archivo CSS debes incluir un código similar a este, recuerda reemplazar “myfont-webfont” por el nombre de archivo de la fuente que subiste.
@font-face {
	font-family: 'MyFontFamily_Squirrel';
	src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); }
  • Por ultimo para utilizar tu fuente en las etiquetas que desees utilizaras el valor que asignaste en el parametro font-family dentro del código mencionado anteriormente, ejemplo:
h1 { font-family: ‘MyFontFamily_Squirrel’, Arial, serif; font-weight: 400; }
  • Más información de como utilizar @font-face en: font spring

Este metodo tiene la limitante de compatibilidad con los navegadores web, sin embargo la gran mayoría de los navegadores modernos ya ofrecen soporte para @font-face, he aquí la lista: Safari 5.03+, IE 6-9+, Firefox 3.6-4+, Chrome 8+, iOS 3.2-4.2+, Android 2.2-2.3+, Opera 11+

Google Web Fonts

google web fonts logo Fuentes Web, soluciones y como utilizarlasY llego el grande, Google lanzo Google Web Fonts que en teoría ofrece el mismo servicio que Font Squirrel pero no, Google fue un poco mas halla, si para implementar las fuentes que descargabas necesitabas agregar 10 lineas en tu archivo CSS, google simplifico esto, y en su servicio ofreció la posibilidad de insertar fuentes web en tu pagina unicamente insertando un fragmento de código HTML, sin duda Google llego y ofreció mejores características, entre ellas: Simplifico la forma de uso y  puso sus servidores para que no tengamos que descargar las fuentes y subirlas a nuestro servidor, de esta manera reducio el tiempo de carga de nuestras paginas.

El servicio de Google elimino la necesidad de descargar y subir archivos al servidor, también la necesidad de utilizar @font-face.

También Google ofrece la posibilidad de descargar las fuentes para utilizarlas en nuestro equipo, actualmente el directorio de fuentes gratis en Google Web Fonts incluye un total de 436 tipografías y la verdad son muy buenas, a diferencia del directorio de Font Squirrel muchas de las fuentes publicadas en Google Web Fonts son exclusivas del directorio.

Como utilizar Google Web Fonts

google web fonts colletions 600x310 Fuentes Web, soluciones y como utilizarlas

  • Debes entrar a Google Web Fonts
  • Selecciona la tipografía que deseas utilizar en tu pagina.
  • Quick Use: Si solo utilizaras una fuente
  • Add to Collection: Si utilizaras mas de una.
  • En la opción QuickUse se abrira otra pagina baja y encontraras un código similar a este:

<link href=’http://fonts.googleapis.com/css?family=Mrs+Saint+Delafield’ rel=’stylesheet’ type=’text/css’>

  • Copia y pega tal cual entre las etiquetas <head> </head> de tu pagina, de este modo tu pagina le pedira a Google las fuentes que seleccionaste.
  • Ahora en tu CSS para aplicar las fuentes seleccionadas a tus etiquetas, en las propiedades CSS de font-family unicamente tendrías que añadir el nombre de tu fuente, por ejemplo:
h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }

Listo de este modo tu sitio ya estaría mostrando las fuentes que seleccionaste, a estas fuentes puedes cambiarles el color, tamaño o agregarles efectos CSS tal como si lo hicieras con una fuente normal.

Otras soluciones que ofrecen fuentes web gratis y con costo

OpenType

Las tipografías usualmente poseen las características básicas, como Mayúsculas, Minúsculas, numerales, símbolos de puntuación y acentuación, sin embargo las tipografías profesionales tienen aun más características que permiten que las tipografías tengan mas estilo, algunas de las características extras son:

Common ligatures “liga”
Discretionary ligatures “dlig”
Small caps “smcp”
Lining numerals “lnum”
Old-style numerals “onum”
Swash alternates (index number) “swsh” n
Styleset (01–20) “ss01–20”

CSS3 tiene soporte para utilizar estas caracteristicas sin embargo no asi todos los navegadores, los navegadores que ofrecen soporte a estas características son Firefox, Internet Explorer 10 y Google Ghrome para Windows, la siguiente imagen muestra un ejemplo utilizando la tipografía Magneta.

ejemplo de OpenType 489x350 Fuentes Web, soluciones y como utilizarlas

Como afecta OpenType en los programas de diseño? Bueno las siguientes tablas te dan una idea de en que programas puedes hacer uso de estándar para tipografías.

Mac OS
Application OpenType Support
Microsoft Word® Basic
Adobe InDesign® Basic, Multilingual, Advanced
Adobe Photoshop® Basic, Multilingual, Advanced
Adobe Illustrator® Basic, Multilingual (.ttf only)
Quark XPress® Basic
Macromedia Freehand® Basic
Corel Draw® Basic, Multilingual
Microsoft Windows
Application OpenType Support
Microsoft Word Basic, Multilingual (.ttf only)
Adobe InDesign Basic, Multilingual, Advanced
Adobe Photoshop Basic, Multilingual, Advanced
Adobe Illustrator Basic, Multilingual (.ttf only)
Quark XPress Basic
Macromedia Freehand Basic
Corel Draw Basic, Multilingual

Como utilizar OpenType en Web

Es muy sencillo en este caso no tenemos que instalar nada, solo agregar algunas lineas a nuestro código CSS, lo unico que necesitamos es que los navegadores del lado del cliente ofrezcan soporte para estas características y claro que las fuentes posean alguna de las características mencionadas arriba, les dejo el snippet:

h1 { 
-moz-font-feature-settings: "liga=1, dlig=1"; 
-ms-font-feature-settings: "liga", "dlig"; 
-webkit-font-feature-settings: "liga", "dlig"; 
-o-font-feature-settings: "liga", "dlig"; 
font-feature-settings: "liga", "dlig"; 
}

Más Información sobre Open Type:

Espero que este articulo sea de utilidad para ustedes, hemos intentado cubrir la mayoría de los aspectos y principales fuentes para el uso tipografías en Web y como utilizarlas, así como OpenType un estándar que se empieza a utilizar con CSS3 que permitira agregarles aun mas estilo a las tipografías que usemos.

Share this
09 Mar

Nuevos cambios en el diseño de YouTube

En Diciembre YouTube presentaba un nuevo diseño, prácticamente un mes después han hecho algunos cambios, nada radical pero la verdad da gusto, ya que estos cambios son porque han estado pendientes del Feedback o retroalimentación que los usuarios le dimos a la gente detrás de YouTube, como resultado están los siguientes cambios.

Editor de Video

El mayor cambio fue en el editor de video es cual basicamente fue rediseñado pensando en la usabilidad para el usuario final, ahora el editor de video de YouTube tiene un diseño muy similar a los programas de edición como Adobe Premiere o iMovie.

 cambios diseño YouTube 2 Nuevos cambios en el diseño de YouTube

Cambio en los canales

Se le cambio un poco a los canales con el nuevo boton situado en la parte superior derecha de la pagina, el cual permitira reproducir con un solo click todos los videos del canal o sección.

cambios diseño YouTube 1 Nuevos cambios en el diseño de YouTube

Administrador de Videos

El administrador de videos de YouTube también fue retocado en el se agrego un historial de búsquedas y se volvieron a poner las estadísticas de las funciones de “Me gusta” y “No me gusta”, algo sencillo pero muy útil.

cambios diseño YouTube 3 Nuevos cambios en el diseño de YouTube

Share this
07 Mar

5 Errores que Nos Impiden Iniciar un Negocio en Internet con Éxito

5 Errores que Nos Impiden Iniciar un Negocio en Internet con Éxito

 


Como en cualquier área de la vida, cuando somos nuevos en algo, es normal cometer errores por falta de conocimiento o experiencia. Sin embargo, cuando nos quedamos estancados haciendo una y otra vez lo que no debemos hacer es cuando el verdadero peligro llama a nuestra puerta.

Cometer errores está bien, es normal, pero lo mejor es informarnos lo más posible para evitarlos o al menos para no quedarnos estancados en ellos. A continuación te presento 5 errores comunes en los negocios por Internet que nos impiden progresar cuando recién comenzamos.

1. Demasiada Información y Poca Acción

En Internet existen millones de páginas Web, de artículos, videos e información gratuita de donde podemos aprender. Esto representa una gran ventaja porque podemos aprender de cualquier tema (en este caso negocios y marketing) en cuestión de minutos con un par de clics. El conocimiento y la información son lo que más cuenta hoy en día. Sin embargo, esta ventaja también puede representar un gran peligra para nuestro progreso.

Es muy común que nos la pasemos horas y horas leyendo, escuchando audios y viendo videos de negocios y marketing, pero sin hacer nada al respecto. No hay acción, no se implementa nada y por consecuencia no hay resultados de ningún tipo.

Te sugiero dejar de leer y aprender tanto. Comienza a tomar acción y a tener progreso REAL en tu negocio. Sin esto es imposible tener éxito.

2. Capacitación Errónea

La mayoría de las páginas Web y productos no ofrecen educación de calidad. Muchos prometen resultados inmediatos, ofrecen información basura, muy atrasada o sin la calidad suficiente para en verdad capacitar a alguien que apenas va comenzando su aventura por Internet.

Te recomiendo elegir muy bien de dónde y de quién aprendes.

3. Falta de planeación

Como dice la famosa frase, “Aquel que falla en planear, está planeando fallar”. Sin un plan no hay un rumbo establecido, todo lo que se hace es sin fundamento alguno y sin una motivación que de verdad impulse a seguir adelante y progresar.

Desde un principio crea un plan, elige qué vas a hacer, cómo lo vas a hacer y cuándo lo vas a hacer. De esta forma tendrás mucha más claridad, enfoque y atención en todas tus acciones diarias.

4. Muchos proyectos al mismo tiempo

En Internet hay tantas oportunidades que en muchas ocasiones nos entra la ansiedad y deseos por querer hacer muchas cosas y enfocarnos en muchos proyectos al mismo tiempo. Esto puede llegar a alentar mucho nuestro progreso y resultados. En lugar de tener 4 o 5 proyectos, ve poco a poco, enfócate primero en terminar uno y después pasa al otro. Lograrás mucho más de esta forma que queriendo hacer todo de forma simultánea.

5. Brincando de una cosa a otra

Parecido al punto anterior. Imagina que estoy en un proyecto de un sitio de marketing de afiliados que aún no termino. Me meto a un blog de negocios por Internet y veo que hay un nuevo producto que enseña la creación de productos digitales. Al ver esto me emociono, compro el producto y ahora decido trabajar mejor en crear mi propio producto digital para venderlo en Internet.

¿Qué paso con mi proyecto de marketing de afiliados? Queda completamente olvidado. No pasará mucho tiempo para que surja un “nuevo y novedoso” método para ganar dinero, en ese momento probablemente olvide el curso de crear productos y pruebe el siguiente.

En lugar de estar “saltando” de oportunidad en oportunidad, termina uno por uno los proyectos y planes que tengas y después busca otras opciones. Así tendrás mejores y más rápidos resultados.

Al evitar estos 5 errores notarás que tu negocio va progresando a un ritmo mucho más acelerado y constante. Si ya estás cometiendo alguno, haz hoy mismo algo para eliminarlo y tomar otro camino que te pueda ayudar a lograr tus objetivos establecidos.

Share this

© 2006 Miracle Design. Todos los derechos reservados