Dos utilidades muy atractivas:
sIFR (Scalable Inman Flash Replacement) es una técnica que permite, con JavaScript y Flash, mostrar tipografías más ricas que las habitualmente disponibles en los navegadores, manteniendo la accesibilidad.
Ver el siguiente ejemplo, con sIFR:
En WebResourcesDepot muestran este conjunto de botones clásicos, construidos a partir de los iconos silk de famfamfam.
El entorno de desarrollo de WaveMaker es en sí mismo una aplicación web Ajax-Java. Puedes echarle un vistazo en estas demostraciones.
Ahí van algunos sitios:
yelowicon, stockicons, iconfactory, fasticon, devianart, CrystalXP, IconBase, Ziotism, vistaico, wackypixel, afterglow, dryicons, iconbulk, ganato, iconarchive, vistaicons, pixelgirlpresents, leoparddocks
Ahí van algunas:
Ya se sabe que el tipo de letra que elijamos en nuestro editor de textos, para programar, debe contar con unas características muy concretas:
Un buen tutorial, fácil de hacer, en PSDTuts:
Un fondo con un gradiente suave, un tipo de letra gruesa y elegante, colores bien elegidos, efectos "Drop Shadow", "Inner Shadow", "Bevel and Emboss", "Gradient Overlay" y "Stroke"... y un toque final de gradiente blanco-transparente para el brillo superpuesto.
Para mayor facilidad descargar el psd.
Algunas webs que convierten imágenes en texto:
En Visual Literazy nos muestran, en forma de tabla periódica, varios métodos de visualización de procesos (letras en azul) y estructuras (letras en negro).
Ver los ejemplos de todos estos tipos de gráficos:
En Office 2007, se pueden definir, de forma rápida y fácil, representaciones visuales de la información, eligiendo entre diferentes diseños o incluso creándote los tuyos propios.
Algunas ideas o mensajes que se pueden comunicar con SmartArt: Listas, Procesos, Ciclos, Jerarquias, Relaciones, Matrices, Pirámides.
Se ve que en esto de los colores también hay modas.
Mile's Blog no presenta los colores de la web 2.0 en 2007.
Muy útil.
Anand Agarawala presenta un interfaz de usuario que sigue la metáfora del escritorio llevada al extremo: es un lío maravilloso...
Aunque el vídeo está en Inglés, merece la pena echarle un vistazo:
Con el siguiente truco, mediante JavaScript, puedes aplicar diferentes estilos CSS en función del navegador del usuario e incluso dependiendo del sistema operativo:
1. Incluye este JavaScript en tu página, de la siguiente manera:
<script src="css_browser_selector.js" type="text/javascript"></script>2. Utiliza las siguientes clases CSS en tu hoja de estilos: .[so].[nav] (sin espacio entre .[so] y .[nav]), como en los siguientes ejemplos:
html.gecko div#header { margin: 1em; }Códigos de sistema operativo disponibles [so]:
.opera #header { margin: 1.2em; }
.ie .mylink { font-weight: bold; }
.mac.ie .mylink { font-weight: bold; }
.[so].[nav] .mylink { font-weight: bold; }
Algunas de las mejores prácticas de trabajo con hojas de estilo CSS:
* {Ver también las siguientes propuestas:
padding:0;
margin:0;
}
@import url("reset.css");De forma que sólo sea el master el que se incluya en las páginas:
@import url("global.css");
@import url("flash.css");
@import url("structure.css");
<style type="text/css" media="Screen">Ver otras recomendaciones relacionadas en "10 CSS Tips from a Professional" de 72dpiintheshade.com.
/*\*/@import url("css/master.css");/**/
</style>
<p class="floatLeft alignLeft width75">...</p>Ejemplo de librería:
.width100 { width: 100%; }5. Organizar cada hoja de estilos en apartados y bloques.
.width75 { width: 75%; }
.width50 { width: 50%; }
.floatLeft { float: left; }
.floatRight { float: right; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }
Las técnicas existentes para diseñar este tipo de cajas...
... bueno, mejor ahorramos algo de tiempo utilizando la siguiente web.
Permite diseñar 3 tipos de cajas, proporcionando en tiempo real los recursos a incluir en la página: el propio código html, los estilos y las imágenes utilizadas.
Algunas soluciones para crear mapas mentales y publicarlos en la web:
<script type="text/javascript"
src="http://www.elholgazan.com.googlepages.com/flashobject.js">
</script>
<div id="flashcontent1">El plugin de Flash o JavaScript están desactivados.
Activar ambos y recargar la página para ver el mapa mental.
</div>
<script type="text/javascript">
var fo = new FlashObject(
"http://www.elholgazan.com.googlepages.com/visorFreemind.swf",
"http://www.elholgazan.com.googlepages.com/visorFreemind", "100%", "400", 5, "");
fo.addParam("quality", "high");
fo.addParam("bgcolor", "#ffffff");fo.addVariable("startCollapsedToLevel", "2");
fo.addVariable("initLoadFile", "http://www.elholgazan.com.googlepages.com/Chapter-1.mm");
fo.addVariable("openUrl", "_blank");fo.write("flashcontent1");
</script>
Desde siempre la naturaleza ha servido para inspirarnos. Y es que nos lleva unos años de ventaja.
En este artículo nos enseñan cómo para hacer un diseño gráfico, podemos construir un esquema de color inspirándonos en las ranas y en los sapos.
Muy curioso...
¿Es que la naturaleza nos parece estética?¿o es que nuestra idea de la estética está condicionada por lo que estamos acostumbrados a ver en la naturaleza?
¿Te has preguntado a veces qué fuente se utiliza en un tipo de letra que has visto en algún sitio?
Pues bien, esta web: http://www.identifont.com/identify.html, intenta adivinarla a partir de una serie de preguntas relacionadas con las letras que has visto.
Al realizar una prueba, con el logo de la marca Verbatim por ejemplo, la fuente resultante ha sido Arrus BT.
Tras buscar la fuente en http://www.upseros.net/fonts.php, he aquí el resultado:
Parece que no es exáctamente la misma letra aunque sí que es muy similar.
