Túnel Carpiano » Resultados de la búsqueda » label/css

Timelapse CSS [lo que hace el empaquetado]

Jose Frechín — Tue, 13 May 2008 18:49:00 +0000

http://www.vimeo.com/moogaloop.swf?clip_id=955135&server=www.vimeo.com&fullscreen=1&show_title=1&show_byline=1&show_portrait=0&color=
Timelapse CSS (II) from Matthew Buchanan on Vimeo.

Visto en Ajaxian, ver cómo crearlo con Matthew Buchanan

Principios básicos del diseño y desarrollo web [presentación]

Jose Frechín — Fri, 22 Jan 2010 14:44:33 +0000

Replico por aquí la interesante iniciativa de Killian Barrera: Frontend. Principios básicos. Una guía de estilo y fundamentos web. Una presentación que recopila ideas, principios y conceptos para dar algo de luz a los que empiezan en el diseño y desarrollo web. Directamente para delicious

Frontend. Principios básicos. Una guía de estilo y fundamentos web.

View more presentations from Kilian Barrera.

Cambiando de fuentes con Google Font Directory

Jose Frechín — Thu, 20 May 2010 16:42:02 +0000

El uso de fuentes tipográficas en la web siempre ha estado muy acotado. El problema es bien sencillo, cada ordenador tiene sus tipos de letra, cada sistema operativo, versión, etc…

Hay una serie de fuentes que son coincidentes en casi todo los sistemas, así que lo más que se podía hacer es elegir una y sus análogas, y rezar para que el diseño se viera “más o menos igual” en todos los sitios. Este es un ejemplo, de los muchos que hay, sobre la cantidad de elementos cambiantes con los que cuenta un diseñador web a la hora de hacer una jompeich.

La única alternativa era hacer un apaño complicado y lento, tirando de javascript y flash para redibujar el texto con la fuente, para que fuera seleccionable (y claro está, indexable). O eso, o rotular con imágenes directamente, lo cual es una cutrada antiseo.

Resumiendo, como no habían garantías de que todo el mundo tuviera las mismas fuentes, te tenías que cortar a la hora de hacer el diseño sin salirte mucho de Arial, Helvetica, San-serif.

Ayer Google presentó Google Font Directory, un directorio de fuentes alojadas en la nube (en sus servidores) y que puedes usar para tus web, con lo que se garantiza que cualquier usuario dispondrá de dichas fuentes en su navegador, sin necesidad de tenerlas instaladas.

La solución es tan buena como sencilla, en vez de citar a la fuente que podría estar instalada(o no) en el ordenador de quien visualiza la página, se cita la fuente que está alojada, si o si, en los servidores de Google, lo cual da muchas más garantías a la hora de maquetar. El riesgo está, claramente, en que estarás externalizando un elemento del diseño (el de las tipografías) a su alojamiento en los servidores de Google, aunque no creo que sea un riesgo grande, en cualquier caso, siempre puedes seguir definiendo las siguientes fuentes en la lista.

Al grano, he hecho una prueba en este blog, con la fuente Lobster, para los títulos de las entradas y funciona perfectamente. Lo que hay que hacer es lo siguiente:

1º Copiar el código a incrustar de la fuente, el de la pestaña “Get code“:

2º Ir a la cabecera de la plantilla, en este caso, al fichero header.php (ya que está en wordpress) y copiar el código.
3º Redefinir el estilo para que tenga en cuenta la nueva fuente, en este caso redefiní el h3:
h3 { font-family: 'Lobster', arial, serif; }

Busqué una letra cantosa para que se notara.

Cambio de plantilla en Túnel Carpiano

Jose Frechín — Tue, 11 Aug 2009 14:04:00 +0000

Me acabo de dar cuenta de que las vacaciones son para ~~las bicicletas~~ los cambios de look, las pasadas navidades le di un geito a la plantilla y ahora me he liado la manta a la cabeza otra vez, no lo había pensado, pero el hecho de disponer de tiempo para perder ayuda a los cambios de diseño.

Como no recordaba los pasos con detalle tiré del post del año pasado “Nuevo diseño en Túnel Carpiano“, que ahora mismo sigue siendo válido para el cambio.

Pero este post no va a ser sólo de autocomplacencia, aprovecho para apuntar algunos detalles más relacionados con el infierno que supone cambiar de plantilla en blogger.

Me gustó la plantilla Evidens que vi publicada en Blog and Web, con tres columnas y ancho líquido, después del cambio tuve que restaurar los siguientes widgets:

Nube de etiquetas: Setup and configuration for New Blogger Tag Cloud / Label Cloud
Títulos de los posts: Optimizar los titulos de los Post en Blogger
Sustituir Favicon de Blogger: How to add a favicon in Blogger

Hay ciertos elementos gráficos que son imposibles de personalizar en blogger, como los estilos en la caja incrustada de comentarios (que va sobre un iframe), y algún que otro widget (como el de twitter), o eso, o que no he sabido dar con el punto.

Cambiado queda el diseño, esperaré a las próximas vacaciones para darle otro viaje al estilo.

Airea tu lifestreaming en twitter

Jose Frechín — Mon, 03 Nov 2008 16:56:00 +0000

Hace tiempo que uso Friendfeed como centro neurálgico de todo mi lifestreaming. Aunque, a decir verdad, nunca le he dado un uso real y práctico como lector. De hecho, me es casi imposible leer los correos diarios que llegan con la actividad de los amigos. La cantidad de rastros que puede dejar una persona en las distintas redes es enorme, no digamos la de un grupo de diez. Resumiendo, del lado del lector, no tengo por dónde cogerlo.

Hace poco han puesto en funcionamiento, en fase beta, la vista Real Time, una idea bastante interesante en caso de que quieras hacer el seguimiento en vivo de la actividad de tu red de amigos. Pero ni por esas.

Si has llegado aquí preguntándote el significado de lifestreaming mira la siguiente explicación:

An online record of a person’s daily activities, either via direct video feed or via aggregating the person’s online content such as blog posts, social network updates, and online photos. [Word Spy].
O dicho de otro modo, un sitio que aglutina todo tu material genético diseminado por la red.

Pero, ahora, desde el lado del que escribe puedes configurar friendfeed para que toda tu actividad se puede publicar automáticamente en twitter. De manera que si, por ejemplo, marcas una canción como favorita en last.fm, publicas una foto en flickr, un post en tu blog, un vídeo en youtube o compartes algo en google reader, se publicará directamente en tu cuenta de twitter.

Llevo un par de días usándolo sin problemas, la cadencia de publicación es de una media hora y acorta las url con ff.im un acortador propio que redirecciona al correspondiente ítem en friendfeed. Es altamente configurable, pudiendo especificar los servicios de friendfeed que quieres publicar en twitter y los que no. Cuidado con tener tu twitter como entrada en friendfeed y le asignes el autotwitteo, no vayas a crear un bucle infinito.

Para activar esta opción sólo hay que ir a Account y editar Feed publishing.

También, aunque no se desde cuando está habilitado, se puede insertar un widget en tu blog, de manera que salga todo tu lifestreaming en un apartado de tu blog o web, se puede configurar el tamaño y reescribir los estilos css para que se ajusten a tus requerimientos.

Crónica Cadius de abril-2009

Jose Frechín — Fri, 17 Apr 2009 09:36:00 +0000

Anoche se celebró la edición de abril del Cocktail Cadius de Canarias en Tenerife, a la que asistimos unos cuantos y fue realmente interesante.

Foto flickr de Ruymán

Allí estaba Carlos chr5 con un libro debajo del brazo “Desigining with web standards” de Jefrey Zeldman; Julio Loayza dando la bienvenida a los nuevos fichajes, hablando del programa Vostok de formación y explicando las bondades de Coda, el editor que usa en mac, muy chulo (text editor + file transfer + svn + css + terminal + books + more = whoah); Marcos Pérez con el que casi no pude hablar porque me quedaba algo lejos (lo cual correlaciona directamente con el éxito de la convocatoria, buena noticia para estas reuniones); Diana que estuvo explicando concpetos interesantes relacionados con los espacios de trabajo flexibles; Alberto con un diseño propio muy chulo sobre tumblr; Mónica con la que hablamos sobre formación y reclama más presencia femenina en los B&G; y Ruymán Gil buscando soluciones para la mejor gestión del tiempo (fundamental), brevemente tuvimos a Yapci por videocoferencia cutrona (móvil con altavoz).

Julio mostrando Coda

La cosa estuvo muy animada, así que ya sabes, nos vemos en el próximo Cadius.

Julio picando código

Curso online sobre diseño de webs eficaces

Jose Frechín — Wed, 14 Jan 2009 07:30:00 +0000

Desde el 9 de marzo al 5 de abril de 2009 se impartirá la segunda edición del curso en línea de introducción al diseño de webs eficaces, por la Universidad de Murcia. El plazo de matrícula comienza el 2 de febrero y cuesta 100 €.

Estructurado en tres áreas fundamentales promete ser un muy interesante curso: Diseño de sitios web con HTML y CSS (Prof. Inma Bermejo Salar), Usabilidad y accesibilidad (Prof. Juan Carlos García Gómez) y Arquitectura de la información (Prof. Yusef Hassan Montero).

Cuenta con un test de autoevaluación para conocer tu propio nivel.

Más información en Úsalo. y en la página oficial del curso.

Aprender html

Jose Frechín — Sun, 21 Sep 2008 11:16:00 +0000

El viernes pasado Tooenchumbao y Mapoto me preguntaron si es muy dificil aprender HTML, les dije que en realidad es bastante sencillo, que le iba a enviar el manual con el que aprendí yo hace unos años, pero no lo encuentro, así que les dejo unos cuantos tutoriales esperando que les sean de utilidad:

El HTML, acrónimo inglés de Hyper Text Markup Language (lenguaje de marcación de hipertexto), es un lenguaje informático diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estándar de las páginas web.

Para realizar tu página Web necesitas en principio un editor de textos para escribir los ficheros que la compondran.

Simplemente usando un Bloc de Notas puedes realizar tus páginas Web, ya que una pagina Web es simplemente un texto al que se le añaden diferentes etiquetas con el objeto de indicar diferentes propiedades. De cualquier manera existen editores específicos para realizar paginas Web. Dichos editores permiten por medio de menús e iconos incluir etiquetas de HTML sin necesidad de teclearlas.
Manual completo de HTML en WebTaller.

Más manuales interesantes y didácticos en: