Home » Archivado por Categoria 'Diseño'
Listado de Diseño
Diseño y Herramientas y Trucos de Diseño en General
- Javascript Library: Tamaño de Fuente flexible a diferentes dispositivos
Javascript Library: Tamaño de Fuente flexible a diferentes dispositivos
FitText, Librería que adapta el tamaño de la fuente de diferentes diseños web para adaptarse a los diferentes dispositivos que nos encontramos, como Ordenadores de Sobremesa, Tablets o Smartphones. Aunque la primera idea que se nos viene a la cabeza es utilizar CSS, con una librería Javascript nos da más poder a la hora de adaptar nuestros diseños a los diferentes dispositivos.... - 3ToDo: Velocidad de Analytics, Imagenes a Efecto Dibujo y Cachear con PHP
3ToDo: Velocidad de Analytics, Imagenes a Efecto Dibujo y Cachear con PHP
3 Cosas a tener en cuenta para Analizar, Diseñar y Desarrollar en nuestros proyectos webs. Medir la velocidad de carga de las páginas en segundos desde Analytics es un dato realmente interesante, para darse cuenta que tipo de páginas son las que más tardan en cargar. En cuanto al diseño, en ocasiones vienen bien imágenes con un Efecto Dibujo (efecto pintado a mano). La idea es poder crear este efecto sin necesidadd de tener conocimientos de PhotoShop. Por último, saber como crear páginas estáticas para la cache a partir de páginas dinámicas PHP.... - Estilos de Sombras con CSS sin Imagenes
Estilos de Sombras con CSS sin Imagenes
Sorprendente utilización de las sombras con CSS sin utilizar imagenes. Diferentes efectos de Sombras con CSS sin imagenes que consiguen efectos asombrosos como levantar esquinas, curvar esquinas, perpectiva, levantar conjunto, rotar, personalizar sombras en vertical o horizontal. Podemos usar el efecto que mejor nos convenga, veamos por ejemplo como rotar y aplicarle sombra.... - Diseño de una perfecta pagina de destino
Diseño de una perfecta pagina de destino
En kissmetrics nos muestran el diseño de una perfecta Landing Page (página de destino), en nuestro wordpress el fichero single.php. Titulares de la página Titulares limpios y concisos Gramática impecable Indicadores de confianza Usar Strong para llamar la atención Los botones y acciones deben destacarse Los enlaces deben ser sencillos y accesibles Imagenes y vídeos relacionados Mantenerse siempre arriba Test Clickar en la imágen para verla en grande vía kissmetrics... - Lo Mejor de #Tectonilogia del 2010
Lo Mejor de #Tectonilogia del 2010
Recopilación de Artículos publicado en Tectonilogia.com. De todo lo que se ha escrito el pasado año, vamos a refrescar aquellos artículos agrupados por su categoría principal (Ayuda Técnica, Diseño, Moviles, Programacion, Seguridad, Sistemas). No vamos a refrescar los artículos más visitados, sino que en su lugar ponemos en una lista todos los artículos que desde nuestro punto de vista nos parecen mejores y más interesantes.Ayuda Técnica
73+ Plugins Con Ajax ,Seguridad, Mantenimiento y otros Recopilación de plugins interesantes para Wordpress Alternativa al Adsense Asincrono, para mejorar la velocidad De momento Adsense no es Asíncrono, una de las mejores maneras para cargar el Script y que impacte lo menos posible en el rendimiento de la página. Insertar Codigo Html, Php, … desde un QuickTag de WordPress Código Javascript llamado desde el QuickTag de Wordpress, para que transforme los carácteres "especiales" en ASCII HTML. Listado completo de Ayuda TécnicaDiseño
Round-Corners y Gradient CSS para Todos los Navegadores Colección de Colección de Iconos Efecto Llamas con PhotoShop Listado completo de DiseñoMoviles
Aunque los artículos han estado centrados en las grandes novedades y características de los Smartphones Android o IPhone. Aplicaciones Android utiles para el Movil Destacar un artículo específico de Libros y Herramientas para Leer Libros en Android Htc Wildfire vs Htc Desire Apple con lo Nuevo y los Problemas del IPhone 4 Aunque todavía sigue siendo el Smartphone mejor considerado por muchos (Rendimiento, Pantalla, Navegación) Listado completo de MovilesProgramación
Errores Tipicos de bases de datos cometidos por los Desarrolladores Llamadas al servidor desde el cliente con DoCallBack y DoPostBack ASP.NET Como crear una Sesion Infinita o que no caduca nunca Como ejemplo de las diferentes herramientas que podemos encontrar en esta Categoría. Listado completo de ProgramaciónSeguridad
Centrado en como prevenir Malware utilizando el sentido común (si se puede), recomendando Antivirus y prevenir de las nuevas amenazas que surgen. El Mejor Antivirus 2010 / 2011 Stuxnet, el virus informatico que infecta a las infraestructuras de un Pais El Virus Informático más importante y problemático hasta el momento 4 Antivirus Online, Herramientas para Escanear Virus Listado completo de SeguridadConclusiones
Y que vengan muchos más. ¿Alguno que queráis recomendar vosotros?... - Round-Corners y Gradient CSS para Todos los Navegadores
Round-Corners y Gradient CSS para Todos los Navegadores
Bordes Redondos y fondo degradado en todos los navegadores. Con CSS3 aparecen nuevas propiedades como border-radius, text-shadow o box-shadow. El problema es que todos los navegadores No cumplen con CSS3, por eso el poder utilizar un estilo CSS de bordes redondos o fondos degradados que funcione en todos los navegadores es un poco más difícil.Bordes Redondos Con CSS
Poniendo las siguientes líneas funciona en todos los navegadores. Como siempre tenemos la Excepción del Internet Explorer, pero para eso los chicos de google nos proporcionan un código Javascript que redondea el "Elemento" en función de lo indicado en la propiedad "border-radius". Este código es un fichero llamado "border-radius.htc" que hay que copiar en la raiz de nuestra página web (o Theme de Wordpress). .box-rounded{ background-color:#CEE3F6; color:#0101DF; width: 300px; margin: auto; padding-left: 30px; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; behavior: url(border-radius.htc); } .box-gradient{ background:#CEE3F6; color:#0101DF; border: 1px solid navy; margin: auto; padding-left: 30px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CEE3F6', endColorstr='#ffffff'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#CEE3F6), to(#fff)); /* for webkit browsers */ background: -moz-linear-gradient(top, #CEE3F6, #fff); /* for firefox 3.6+ */ } .box-shadow-down{ -moz-box-shadow: 5px 5px 5px #888; -webkit-box-shadow: 5px 5px 5px #888; box-shadow: 5px 5px 5px #888; } .box-rounded{ background-color:#CEE3F6; width: 300px; margin: auto; padding-left: 30px; /*Para Redondear Bordes*/ -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; behavior: url(border-radius.htc); } El código podemos descargarlo de code.google - curved-cornerFondo Degradado Con CSS
El Degradado también requiere de 3 líneas en el Estilo CSS, de esta forma se verá el fondo degradado en todos los Navegadores. Con Internet Explorer también se ve el degradado, aunque tenemos menos opciones de configuración. .box-gradient{ background:#CEE3F6; border: 1px solid navy; margin: auto; padding-left: 30px; /*Para Fondo degradado*/ /* for IE */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CEE3F6', endColorstr='#ffffff'); /* for webkit browsers */ background: -webkit-gradient(linear, left top, left bottom, from(#CEE3F6), to(#fff)); /* for firefox 3.6+ */ background: -moz-linear-gradient(top, #CEE3F6, #fff); }Bordes Redondos y Fondo Degradado Con CSS
Si juntamos dentro de un estilo CSS las propiedades del Borde Redondo y lo del Fondo Degradado, podemos tener un "elemento" con Bordes Redondos y Fondos Degradados. Como siempre Internet Explorer es una Excepción y los dos estilos no conseguimos hacer que funcione. Aplicando las clases CSS box-gradient y box-rounded al mismo elemento tenemos Bordes Redondos y DegradadoDegradado Redondo Sombra y CSS
Ejemplo Anterior + Propiedad sombra del CSS3 ¡combinando estilos!Referencias
Más información sobre Redondear Bordes en Border Round Corner With CSS Más información sobre Degradados en CSS en Gradient CSS Cross Browsers Más información sobre Las Sombras del CSS3 en box-shadow, features CSS3... - Menus Dinamicos en Vertical con CSS y Javascript
Menus Dinamicos en Vertical con CSS y Javascript
Pasos para saber como crear Menus Dinámicos en Vertical para los Proyectos Web. Sin pensarlo demasiado creía que sólo con CSS ya se podía hacer los menus en verticales. Cierto, pero no Menus tipo DropDown List, Menu tipo Lista Desplegable que se muestre u oculte en función del movimiento del ratón. Por lo que Necesitas Javascript, y después de buscar un poco de información encontré un artículo que Recopila Ejemplos de Menus Desplegables Navegables Multinivel (Ejemplos y Tutoriales de Drop Down Navigation Menus). Algunos utilizan código javascript personalizado y otros librerías tipo JQuery, Prototype, Mootools. Pero las funcionalidades básicas se pueden encontrar en el primer ejemplo de dynamicdrive, sencillo, funcional y encima nos podemos descargar el código fuente de ejemplo. También hemos encontrado un Plugin de Wordpress para generar Menus Navegables Multilevel Navigation Plugin (No lo he probado) Recomiendo utilizar primero un Ejemplo Sencillo que podamos modificar e intentar adaptarlo a nuestras necesidades, y después ya nos iremos complicando la vida. Pensad que es posible que a más complicación, más tiempo de carga. ¿Existe alguna forma de Crear Menus Dinámicos en Vertical sin usar Javascript?... - Texturas Online Gratuitas
Texturas Online Gratuitas
Texturas Online Gratuitas para nuestros diseños Web. Cientos de Imágenes con diferentes Texturas que podemos escoger para aquellos diseños o imágenes que queremos crear. Hace unos días vi el artículo donde nos proporcionaba dos sitios para crear imágenes aleatorios. Este artículo me dio la idea de apuntarme en algún lugar (que mejor que esta página), enlaces donde poder obtener texturas para los fondos de imágenes. Texturevaul Royalty Free Textures Cientos, Miles, de Texturas para los "Backgrounds".... - Coleccion de Colecciones de Iconos
Coleccion de Colecciones de Iconos
Colecciones de Iconos Sociales y para el Blog. Muchas veces necesitamos iconos para nuestros proyectos y lo primero que hacemos es buscar en Google Images (almenos en mi caso), pero cuando queremos algo más concreto tenemos que ajustar las búsquedas. En ocasiones has visto un icono que te gusta, pero como en la vida real, cuando lo necesitas no lo encuentras. Por eso he decidido crear una Colección de Colecciones de Iconos. Colección de Iconos de Papel (a mano alzada o dibujados a mano) en acrisdesign Colección de Iconos Rss o Feed supernetx blogandweb Inkilino Colecciones de Iconos sociales (social media, twitter, feed, ...) en cssblog Colección de Iconos para el Twitter negociosyemprendimiento y también tener en cuenta twitterbuttons para crear botones "FollowMe" 40 Conjuntos de Colecciones en trazos web. 15 sitios para buscar iconos en trazos web ¿Alguna colección de Iconos más para aportar?... - Como Configurar La Presion del Lapiz (Pen Pressure) en Photoshop
Como Configurar La Presion del Lapiz (Pen Pressure) en Photoshop
Pen Pressure es la presión que se ejerce al lápiz de una tabla digitalizadora, y poder ver sus efectos en el Dibujo de Photoshop. Como principiante que soy, no siempre estoy utilizando esta opción, por eso cuando algún día me decido que quiero utilizarla para hacer un dibujo propio, no me acuerdo de la configuración exacta que tengo que poner. Este es el objetivo del Artículo, tener claro los conceptos de configuración para no tener que buscar entre los problemas con el Pen Pressure en Photoshop. Utilizar la Presión del Lápiz para dibujar en Photoshop, nos permite utilizar los siguientes efectos Líneas mas o menos gruesas en función de la presión que ejercemos Líneas mas o menos transparentes en función de la presión del lápiz Degradados de color entre los 2 escogidos en función de la presión... - Photoshop e ImageReader para crear Gif Animados
Photoshop e ImageReader para crear Gif Animados
Como Crear Gif Animados con Photoshop y ImageReader paso a paso, la herramientas de Adobe para imágenes. Hace tiempo que quería aprender a realizar un Gif Animado utilizando Photoshop, lo que no sabía era para que servía la herramienta ImageReader. Los Gifs animados pueden ser muy útiles, en el ejemplo que pondremos a continuación nos centraremos en crear un Banner de Pulbicidad. En algunas ocasiones es mejor utilizar imágenes animadas en lugar del problemático Flash.... - Lista de Shorcuts, Hot Keys o Teclas Rapidas de Photoshop
Lista de Shorcuts, Hot Keys o Teclas Rapidas de Photoshop
Si queréis saber los accesos rápidos de teclado o claves rápidas del "keyboard" para Photoshop sólo tenéis que echar un vistazo a la lista de Shortcuts que mostramos a continuación. Este "miniapunte" nos ayudará para ir más rápido en nuestros diseños y retoques. Ctrl. + T. Para cualquier transformación libre. Ctrl. + Shift. + V. Pegar dentro de la selección. Alt. + Click "Eye(ojo)" de una capa. Oculta el Resto de las Capas. Ctrl. + Alt. + Arrastrar un objeto. Duplica y desplaza ese elemento. Alt. + Supr. Rellena la capa con el color de primer plano. Supr. Rellena la capa o la selección con el color de fondo. Ctrl. + F . Aplicael último filtro utilizado. Doble Click "Lupa". Devuelve la vista al 100%. Pero podéis ver el listado completo de Shortcuts para vuestra versión de Photoshop CS, CS2, CS3, CS4 en morris-photoshop.... - Como crear una Imagen con Efecto Grunge
Como crear una Imagen con Efecto Grunge
Recorriendo mis feeds para volver a reorganizarlos, me he encontrado con una entrada de Blog & Webs que explican en un mini tutorial, como hacer un banner con efecto Grunge con Photoshop. No sólo eso, sino que proporcionan alguna que otra utilidad que podría serme útil en el futuro, por eso me lo apunto. RePost: Post Original Blog & Webs, La imagen es del Artículo original... - Efecto Llamas con Photoshop
Efecto Llamas con Photoshop
Sabía que había hecho anteriormente el Efecto Llamas con Photoshop, demostrado en mi blog de música, pero no me acordaba que lo escribí en mi blog personal Komoloves y por eso le hago referencia, para tenerlo recopilado aquí, que es su lugar.Efecto llamas con PhotoShop
... - Como hacer un Efecto Post-It con PhotoShop
Como hacer un Efecto Post-It con PhotoShop
Un claro ejemplo de lo que comentaba con ¿Esto ya lo he hecho antes?, una pregunta que he tenido que emplear para conseguir este efecto y que no me acordaba de como hacerlo. Así que se va convertir en el primer Apunte de Photoshop para este Blog Técnico. El resultado sería algo así Para conseguir tan esperado efecto Post-It podemos seguir el Tutorial de Kaoz, que te lo explica bien clarito aunque esté en Ingles. Imagen extraída del artículo original...