Apr 26
Sin duda todos los que nos dedicamos de una u otra forma al
desarrollo y diseño web sabemos que uno de los puntos más frustrantes a
la hora de comenzar un sitio son los problemas que nos encontramos al
visualizarlo en los diferentes navegadores, rebanándonos los sesos para
encontrar alguna solución que permita que tal objeto se comporte de tal
forma en todos los navegadores.
En ocasiones se hace impepinable el uso de hacks aunque sepamos los
inconvenientes de los mismos. Desde websitetips nos proponen un extenso recopilatorio con toda clase de artÃculos relacionados con el tema, desde hacks hasta
como evitarlos, recopilatorio de bugs conocidos o tablas de información
sobre selectores css y sus compatibilidades. Un recopilatorio a tener
cerca, al que acudir cuando las cosas se pongas complicadas.
Enlace: Solutions to CSS Browser Bugs and Cross-Browser, Cross-Platform CSS Issues
written by RiCoTeRo X
Apr 26
En Free CSS Templates nos encontraremos con un buen número de layouts gratuitos, recurso
idóneo para tomarlos como base de un trabajo. Los templates son de
todas las formas y colores, con diferentes distribuciones de los
bloques, navegaciones etc, sin unos diseños espectaculares pero como
digo perfectos para tomar alguna de las estructuras como primer paso de
un desarrollo. Además se encuentran bajo licencia CC que nos permite su
utilización en proyectos personales o profesionales, cumplen los
estándares del W3C y los códigos están optimizados para la rápida carga
del sitio.
Enlace: Free CSS Templates
written by RiCoTeRo X
Apr 26
Otro sitio para la lista de aplicaciones online que nos brinda diferentes opciones
con las que facilitarnos la vida a la hora de escoger combinaciones de
colores para algún trabajo o proyecto personal.
PodrÃamos decir que dos son los ejes fundamentales del lugar, lo que
llaman combo library y combo tester. En el primero se guardan las
combinaciones de colores generadas por otros usuarios y el segundo es
la herramienta central con la que crearemos nuestras paletas, teniendo
diferentes opciones, como aplicarlas a textos, quitar determinado
color, añadir, modificar etc. Además el sitio cuenta con clasificación
de paletas por tags, lo que facilita el buscar alguna determinada y
opción de introducir una url para obtener su paleta de colores.
Enlace: ColorCombos | VÃa: puntogeek
written by RiCoTeRo X
Apr 26
Un tooltip es la palabra que se usa para denominar esos mensajes
emergentes que aparecen cuando pasamos nuestro ratón por encima de
determinado sitio de una web, usados para ampliar información, mostrar
algún mensaje concreto etc. Existen varios diferentes basados en
mootools, jQuery, javascript o solamente en css.
Uno muy interesante es el que usan en el sitio de Coda al pasar el ratón sobre la imagen superior izquierda que pone Download,
apareciendo un recuadro con esquinas redondeadas y transparencia donde
muestran información de la descarga. Conseguirlo tiene su merito y
complicación, ahora algo más fácil gracias a un tutorial liberado por jQuery for Designers donde nos dan los pasos para conseguirlo junto con los códigos necesarios.
Voy a explicar muy por encima como implementarlo, podéis ver una demo aquà y descargaros el paquete con todos los códigos que se usaron. Comentar que hay que tener cuidado con este tipo de recurso y donde lo usaremos además de ser obligatoria la visita a la entrada de jQuery for Desingners donde explican más detalladamente el proceso de creación del efecto.
Lo primero será incluir entre head y /head la llamada a jQuery, codabubble y la hoja de estilos:
<link href=“style.css” rel=“stylesheet” type=“text/css” />
<script type=“text/javascript” src=“jquery.js”></script>
<script type=“text/javascript” src=“codabubble.js”></script>
En el segundo y último paso creamos la estructura html necesario entre body y /body:
<body id=“page”>
<h1>Ejemplo de tooltio Coda Bubble
</h1>
<div class=“bubbleInfo”>
<div>
<img class=“trigger” src=“nav-download.png” id=“download” />
</div>
<table id=“dpop” class=“popup”>
<tbody><tr>
<td id=“topleft” class=“corner”></td>
<td class=“top”></td><td id=“topright” class=“corner”></td>
</tr>
<tr>
<td class=“left”></td>
<td><table class=“popup-contents”>
<tbody><tr>
<th>File:</th>
<td>coda 1.1.zip</td>
</tr>
<tr>
<th>Date:</th>
<td>11/30/07</td>
</tr>
<tr>
<th>Size:</th>
<td>17 MB</td>
</tr>
<tr>
<th>Req:</th>
<td>Mac OS X 10.4+</td>
</tr>
</tbody></table>
</td>
<td class=“right”></td>
</tr>
<tr>
<td class=“corner” id=“bottomleft”></td>
<td class=“bottom”><img width=“30″ height=“29″ alt=“popup tail” src=“bubble-tail2.png”/></td>
<td id=“bottomright” class=“corner”></td>
</tr>
</tbody></table>
</div>
</body>
Enlace: Coda Popup Bubbles
written by RiCoTeRo X
Apr 26
Interesante esta herramienta en lÃnea, psd 2 CSS Online.
Básicamente lo que se supone que hace es convertir un archivos .psd a
CSS y digo se supone por los siguiente. No probé el sistema porque no
dispongo de ningún .psd del peso máximo que admite (4MB) ni con las
caracterÃsticas necesarias, pero es fácil adivinar como funciona la
aplicación: detecta las capas que tenemos dentro de .psd y les asigna
una id a cada una de ellas con las medidas e imagen que tengan en el
archivo de photoshop. Por eso, aún sin usar la aplicación, sé que todos
mis psd darán problemas.
Para que nos funcione medianamente bien hace falta crear en
photoshop el layout a conciencia para ser usado con la herramienta, es
decir, debemos usar el menor número posible de capas y unificar
elementos (si tu logo dentro del psd tiene 10 capas juntarlas en una
sola), no nos reconocerá ningún tipo de efecto, opacidad etc, por lo
que tenemos que renderizar todas las capas y hay que estructurarlas
perfectamente. Con todo, no sé como será el resultado, si alguno lo
prueba que de su experiencia en los comentarios.
Enlace: psd 2 CSS Online
written by RiCoTeRo X
Apr 26
Desde que Google Reader incluyó el sistema de Elementos Compartidos de XXX, mi calidad de vida frente al PC a disminuido en cierta manera. Al
parecer con esta opción podemos compartir con el resto de usuario de
nuestros contactos, los artÃculos destacados de nuestros Feeds. La
idea, parece buena, pero en la práctica es realmente frustrante.
El principal problema es que despues de varios meses de decisiones
opté por eliminar ciertos blogs de mis feeds para evitar una sobredosis
de información, asà tenÃa más o menos controlados todos los sectores
que me interesan y con una cantidad de posts diarios asequibles al
tiempo del que dispongo. Pero todo eso se ha trastocado, por que la
nueva <ironia>superidea</ironia> de Google me incluye los
artÃculos destacados de mis contactos, oseacentenares de artÃculos que
me interesan (la mayorÃa) al dÃa.
Ahora, gracias a la super idea de Google, cada dÃa tengo cientos de
artÃculos que yo no he elegido seguir, no por que no me gusten, sinó
por que no puedo abarcar todo lo que me gustarÃa. Sin contar la de
articulos duplicados que me aparecen,…
¿Alguien sabe como desactivar esta opción? ¿O tendré que odiar a mis contactos de por vida?
written by RiCoTeRo X
Apr 26
NETTUTS es un blog
muy reciente que estará enfocado al desarrollo web y tips de gran
utilidad, sin duda es un blog que promete mucho. Si notan un diseño
similar al de PSDTUTS,
es precisamente porque son ellos quienes están detrás de este blog. Tan
solo lleva dÃas online, pero ya podremos encontrar algunos tips muy
interesantes, por ejemplo:
Crear Tabs usando CSS y jQuery -
Una de las formas mas simples de introducir mucho contenido en una
sección reducida, es mediante la utilización de “tabsâ€, en Nettuts
podremos encontrar un tutorial muy completo para crear bonitos tabs que
podremos usar posteriormente en nuestros proyectos. Si buscas algo
simple será muy útil, pero les recomiendo el ejemplo en el cual se ha
utilizado jQuery, porque posee unos efectos realmente extraordinarios.
Ver Demo - Mas Info Create a Slick Tabbed Content Area using CSS & jQuery
Crear formularios de pagos Paypal -
Un tips muy agradable que le servirá a aquellos que desean tener desde
sus web un formulario integrado a su cuenta paypal, y el cual permita
recibir los montos de una forma mas directa o simple. Tips útil para
recibir donación o vender.
Ver demo y mas Info Creating a PayPal Payment Form
Via css-tricks
written by RiCoTeRo X
Apr 26
Otros agradables set de Mini Iconos desde icojoy, totalmente
gratuitos para cualquier tipo de proyectos, y los podremos encontrar en
6 diferentes formatos, Ico , Icns, Tif, Gif, Bmp y Png.
Free web development icons #3 - Descarga
26 Iconos
Tamaño: 16×16
Formatos: .ico, icns, tif, gif, bmp, png
Tonos: Color, grises
Free web development icons #2 - Descarga
32 Iconos
Tamaño: 16×16
Formatos: .ico, icns, tif, gif, bmp, png
Tonos: grises
written by RiCoTeRo X
Apr 26
jay-han ha publicado en unos de sus post, una bonita recopilación de imágenes
Escaneadas de alta calidad sobre “Texturas Jeanâ€, en diversos colores y
estilos. Se los recomiendo, este tipo de texturas, en proyectos
personales suelen quedar realmente hermosos si sabemos como combinarlos.
Enlace Jeans textures free download
written by RiCoTeRo X
Recent Comments