Textualmente:

“Configuración: Es necesario desactivar cualquier tipo de antivirus o firewall (cortafuegos), ya que bloquean el javascript y el Java de los cursos.”

Revista Emprendedores (Nº 142 – julio 2009) Página 113

Como lector habitual de la revista “Emprendedores” les envío mi particular fe de erratas vía “pingback”. 

No es necesario que te dediques al sector de la teleformación para quedarte boquiabierto al leer tal disparate sobre todo porque me temo que es el consejo que muchos alumnos reciben.

Me imagino esos equipos en la distancia atestados de virus enviándoles consultas al tutor de porqué su equipo no responde y el tutor respondiendo que la plataforma y el material del curso no contiene ningún virus, que será cosa de su equipo.

Son de esas cosas que dejarían estupefacto a Alejandro Eguía de SpamLoco y que demuestran que aunque para muchos el término “nuevas tecnologías” es ya viejo, hay lagunas y desinformaciones muy peligrosas.

¡Qué peligroso es enseñar lo que no sabes!

Personalmente abogo por:

• la accesibilidad en el e-learning,
• en contenido usable y accesible,
• en el uso de tecnologías open-source,
• no intrusivas,
• por la integración de soportes,
• porque dejemos de usar el término “nuevas tecnologías”
• y por la homologación y certificación de cursos, plataformas y tutores on-line.

Dicotomías relacionadas en pqpq.es 

• Educación | Presencial vs. E-learning o Teleformación
• El mejor y el peor LMS o Plataforma de Teleformación
• El mejor y el peor antivirus
• Educación pública vs. Educación privada
• Reforma universitaria: El proceso de Bolonia ¿A favor o en contra?
• Educación cívica: ¿en casa o en el colegio?

Twitts literales:

1. aberron @Maikelnaiblog Mi sentencia de gurú de hoy: Twitter es como tener moto, muy útil cuando se te estropea el coche (blog) :-P
2. Maikelnaiblog @aberron Fíjate, a mi a lo que más se me parece el twitter es a la percepción extrasensorial. A veces me entero de cuando caga fulanito ;-)
3. alpoma Twitter: el obituario más rápido. ;-)
4. md_twtr @earcos twitter es a internet, lo que la teta a un recien nacido, es bueno cada 3hs
5. Strike: En los tiempos que corren, el auge de Twitter es el mejor ejemplo de austeridad económica. Aunque sea de lenguaje.
6. samram como explicarle que es un libro a un niño de 2009: "Un libro es un twitter muy muy muy largo."
7. Fotomaf: ¿Por qué amo twitter? Porque tener mas de 25 respuestas a una pregunta en menos de 5 minutos no me lo consigue Google. Gracias amigos!
8. jordiperales: Como explicarle twitter a un abuelito de 2009: "Twitter es un libro muy muy muy corto"
9. piscosour @synchronicity23 ¿la hora de los aforismos? Twitter es el medio perfecto para pensar en one-liners. Contraints are liberating.
10. the_fricky @marialuisarios …claro, Chávez como trending topic, a veces me parece que twitter es una extensión de tumblr,…
11. jgiromini: La mejor cura contra la filosofía continental es saber algo de inglés y tener un Twitter
12. MVRH: @__Jazz Tener la familia en facebook o twitter es peligroso.
13. PetiteOrange: me pregunto si autofavoritearse en twitter es una masturbación 2.0
14. cperalta Twitter es un megáfono virtual. Cada quien le da el uso que mejor le parezca.
15. JoseCarlosTecno Como diría nuestro presidente: Twitter es el telegrama de Interné
16. FabianPrieto @Die_Grausamkeit twitter es una empresa que está esperando el momento para obtener ganancias
17. KarlaRobles A veces creo que esto del twitter es sólo una perdedera de tiempo……………………………. luego recapacito, y twitteo… jajajaja!
18. aelete En clases del @diplomadouc, siguiendo el intercambio entre @marvargas y @ozzady… twitter es el nuevo pasarse papelitos al parecer
19. graciadelcielo Es una paradoja que la síntesis obligada de #Twitter permita acceder a una profundidad sin límites en la vida real.
20. JDGE El Twitter es la herramienta que lleva el derecho a la expresión del uso al abuso, siendo yo un libertino, no podría importarme menos
21. graphiczoo pensando: twitter es como leer las citas del Reader´s Digest en vivo y en directo (por lo memorable de muchos comentarios) mezclado con IRC
22. skaflok Ya entendi todo el concepto de twitter… es para sacarte cosas de tu maldita mente!!!
23. cangrejis twitter es como cuando te regaña tu mamá, dice muchas cosas pero realmente sólo pones atención a las importantes
24. israeltavizon Increíble que aún hay gente que cree que estar en twitter es no tener mas que vida virtual. Los nuevos prejuicios tecnológicos.
25. chocolatebitter tratando de hacer mi presentacion de tesis, el twitter es una gran arma para procrastinar
26. albertcuesta Twitter es el nuevo SMS, incluso en la tele: La nueva normativa legal y el cansancio del público, menos dispues.. http://tinyurl.com/lk87pt
27. tangersoto: Twitter es un recurso renovable, el tiempo NOOOOO
28. chiopb dicen que esto del twitter es como un "amor celoso".. uhm una definicion muy curiosa pero veridica

Twitter según YouTube

Dicotomías relacionadas en pqpq.es 

• Micro Blogging: Tumblr vs. Twitter
• Redes sociales ¿Twitter o Facebook?
• ¿Prefieres Twitter o RSS?
• ¿Tienes blog?
• ¿Es un blogger un escritor o un periodista frustrado?
• ¿Deben tener comentarios los Blogs?
• ¿Estamos llegando al fin del fenómeno blogs?

La selección de las definiciones ha sido personal, hay muchos pero que muchos twitts que hablan de lo adictivo de Twitter, que lo definen como un chat, como la revolución, como lo más, como una “cagá” e incluso simplemente como una “página wé”. Las que he publicado creo que definen conceptos y usos singulares o simplemente son geniales.

¿Cómo lo definirías tú? Deja un comentario o dímelo en menos de 140 caracteres en @ceslava

Los autores, requeridos ya por Buenafuente, han querido agradecer el éxito de sus cortos ofreciendo la última parte de la trilogía, “Aquello era otra cosa”, primero al público de una sala de teatro sevillana y luego en la red.

Un ejemplo claro de éxito en la red, de hecho Mundo Ficción se define como productora y Social Media. No tienen site simplemente han utilizado YouTube y desde hace poco twitter. Han creado marca ofreciendo entretenimiento a “BOB” (aludiendo al término con el que César García define al consumidor actual). Así que BOB acude a la marca, incluso pagaría por disfrutar de ella. Fijaros que este post no es más que un anuncio que les publico completamente gratis.

Quizás el único handicap es que su alcance es muy local, este humor andaluz no sé que radio de alcance tiene, habrá que ver qué otras cosas nos ofrecen o si simplemente su estrategia es de ámbito local.

“Aquello era otra cosa” se estrenará el 9 de julio a las 22:00 en la Sala Malandar. Entrada gratuita hasta completar aforo. En uno o dos días vía twitter anuncian que lo tendrán subido a YouTube.

Os dejo las dos primeras partes por si aún no los conocéis:

Esto ya no es lo que era

Esto es así

Dicotomías relacionadas en pqpq.es 

• La mejor y la peor Dieta de adelgazamiento
• Ropa durante una dieta | ¿Comprar o alquilar?
• ¿Cine o literatura?

Anteriores pix-talking

• Resoluciones discriminatorias
• Píxeles verduscos por Irán
• Estrés pixelado

Daniel me ha informado que su libro ha sido todo un éxito y ya se ha agotado la 1ª Edición de “Adobe After Effects CS3 Vol. 1”. La buena noticia es que la 2ª edición que acaba de lanzar Daniel está completamente actualizada a la CS4: ¨Aprenda el lenguaje de los efectos especiales Vol 2¨ basado en la versión CS4, con más páginas y más ejemplos y proyectos en el DVD adjunto. Material que está dirigido a los que desean conocer en profundidad todos los secretos de este maravilloso programa.  (Para más información sobre el libro contacten o dejen un comentario.)

Descargar archivos para el tutorial, para acelerar la descarga utiliza esta extensión para Firefox:

• Megaupload : http://www.megaupload.com/?d=IM24I5Z1
• Filefactory: http://www.filefactory.com/file/ag992bb/n/6_Entrega_Luces_rar

Los siguientes vídeos muestran el resultado del tutorial:

Luces en After Effects

Para AE, la luz , es una capa con muchos de los atributos comunes a otros tipos de capas. Se crea desde menú: Capa > Nuevo > Luz (Ctrl +Shift +Alt +L), ó desde el menú contextual del panel Tiempo. Sólo afectan capas 3D, por este motivo, una capa de luz incide sobre los colores de la capa 3D sobre la que ilumina, dependiendo de sus ¨Ajustes de luz¨ y de las ¨Opciones de material¨ de la capa 3D¨.

La manera de desplazar las luces es idéntica a la de las cámaras, debemos seleccionar la vista adecuada y tirar del vértice del cono y para desplazar el punto de interés, arrastrarlo con la herramienta de selección (V).

Parámetros de Transformación de las luces:

• Punto de interés: medido en px, es la distancia entre el origen de la luz y la capa receptora de dicha luz
• Posición: medido en px, es la distancia entre el origen 0,0 de pantalla y la capa de luz. Esta variable no afecta al Punto de interés
• Orientación: medido en º (grados para X,Y Z) Esta variable rota la luz sobre su eje local, y como es de esperar, modifica el Punto de interés (excepto Orientar en Z)
• Rotación X,Y,Z: medido en º (grados), al igual que Orientación, sirve para rotar la luz sobre su eje local

Tipos de Luz:

• Paralela : luz direccional sin cono, semeja una pantalla luminosa. Posee parámetros de Posición y Punto de interés
• Luz concentrada: luz desde un origen limitado por un cono, semeja un spot. Posee parámetros de Posición, Punto de interés, Orientación, y Rotación
• Punto : luz ilimitada y omnidireccional, semeja una lámpara de tungsteno. Posee parámetro de Posición solamente
• Ambiente :no tiene origen, simplemente ayuda a aportar luminosidad general a la escena y no proyecta sombras. No posee parámetros de transformación.

Ajustes de Luz

• Intensidad (T) Es el brillo de la luz. Los valores negativos restan luz. La ausencia de luz resta color a la capa. Por ejemplo, si una capa ya está iluminada, la creación de una luz direccional con valores negativos también orientada hacia esa capa, oscurece un área de la capa. (Fig.16)
• Ángulo de cono (sólo para Luz concentrada) Es el ángulo del cono que rodea el origen de una luz, que determina la anchura del rayo a una distancia.
• Calado de cono (sólo para luz concentrada) El suavizado del borde de una luz concentrada
• Color. Es el color de la luz
• Proyecta sombras (combinar con aceptar sombras de Opciones de Mat. de la capa) Su atajo es Alt + Shift + C y sirve para activar o desactivar la proyección de sombras
• Oscuridad de la sombra Define el nivel de oscuridad de la sombra. Esta opción está activa únicamente cuando se selecciona la opción Proyecta sombras.
• Difusión de la sombra Define la suavidad de la sombra en función de la distancia entre ésta y la capa que la proyecta. Los valores más altos crean sombras más suaves. Esta opción está activa únicamente cuando se selecciona la opción Proyecta sombras.
• Especificar la resolución que se utilizará en el procesamiento de sombras Normalmente, la resolución de una sombra se calcula automáticamente en función de la resolución de la composición y los ajustes de calidad de la capa. Si la resolución normal no lo satisface o se procesa con demasiada lentitud, ajuste la resolución del mapa de sombras.

En la entrega anterior, Cámaras viajeras 2, creamos dos spots por cada capa, donde la capa se reflejaba en el piso. Este reflejo se genera a partir de la traslucidez de la capa iluminada y de la reflexión del piso. (fig 17)

Fig 17

Opciones de Material

Al hablar de luces, nos vemos obligados a conocer Opciones de material, que son los ajustes de interpretación en la incidencia de la luz sobre la capa afectada

• Proyecta sombras (Activado / Desactivado): Especifica si una capa proyecta sombras sobre otras capas. La dirección y el ángulo de las sombras están determinados por la dirección y el ángulo de los orígenes de la luz. La opción Proyecta sombras en Sólo provoca que la capa sea invisible pero que se proyecte sólo su sombra.
• Transmisión de la luz: El porcentaje de luz que brilla a través de la capa, proyectando el color de la capa sobre otras capas como una sombra. 0% especifica que la luz NO atraviesa la capa;. 100% especifica que el valor de color completo se proyecta en la sombra . Se la utiliza mayormente para generar reflejos de color (Fig. 17 Transmisión de luz = 100%)
• Acepta sombras (Activado / Desactivado / Solo) También se activa con el atajo Alt + Shift + C. En modo Solo, la capa actúa como sombra solamente, muy buen efecto para aplicarla a capas difusas (nubes de humo) y proyectarlas a otras capas como sombras difumadas.
• Acepta luces (Este ajuste no afecta a las sombras).
  Especifica si el color de una capa se ve afectado por la luz que la alcanza
  Ambiente Reflectividad ambiente (no direccional) de la capa
  100% especifica la mayor reflectividad; 0% especifica que no existe reflectividad
  Este parámetro trabaja sólo en el grado de recepción de la Luz Ambiente, a mayor % mayor luminosidad ambiente habrá.

La idea de esta entrega es que aprendan como lograr los efectos que necesiten para determinadas ocasiones, como ejemplo ,explicaré dos composiciones simples:

Intensidad negativa

1. Abrir AE y crear una comp. llamada ¨Intensidad negativa¨ ajustada a D1/Pal y de 3 seg de Duración.

2. Importar el archivo ¨Textura¨ y arrastrarlo a la comp. ¨Intensidad negativa¨, este jpg, servirá de ¨piso¨ para nuestra composición.

3. Aplicar el definidor ¨Capas 3D¨. Notar el archivo posee un tamaño inferior al de la comp., para corregir esto y su perspectiva en X para que sirva a nuestros fines, abrir sus parámetros de transformación Escala, Rotación y Posición (S, Shift + R, y Shift + P )

4. Ingresar Rx = 90º, P = 450 px, y E = 100*5 (significa 100% x 5, una manera de empezar a utilizar otros modos de operar con las variables)

5. Crear una Luz direccional (Ctrl + Shift + Alt + L), cambiar el nombre ¨Luz 1¨ y llamarla ¨Positiva¨ Luego ¨Aceptar¨ el resto de los valores predeterminados.

6. Seleccionar del botón. ¨Diseño de vistas¨ del panel Comp a modo ¨4 vistas izquierda¨

7. Copiar los valores del parámetro Posición de la capa ¨Textura¨ al ¨Punto de interés (A) ¨de la capa de luz ¨Positiva¨

8. Desplegar el parámetro ¨Posición¨ de la capa luz ¨ Positiva¨ e ingresar P = 500;0;0 .Observar permanentemente los cambios producidos en cada vista.

9. Crear otra capa de luz duplicando la existente, seleccionando la capa luz ¨Positiva¨ y pulsando el atajo ¨Ctrl + D¨

10. Para ajustarla, podemos abrir el cuadro de diálogo ¨Configuración de luz¨ desde el atajo ¨Ctrl + Shift + Y ¨ o bien pulsar el atajo ¨A A ¨ para desplegar los parámetros ¨Opciones de luz¨ , vale una aclaración ya que ambas opciones poseen las mismas variables aunque la gente de Adobe les haya dado diferentes títulos

11. En esta oportunidad, usaremos las ¨Opciones¨ desde el panel Tiempo. En primer lugar, sustituimos el nombre ¨Positiva 2¨ por ¨Negativa¨ , (tecla ¨Intro¨ sobre el nombre ¨Positiva 2¨ ,sobrescribirlo y ¨Enter¨)

12. Ingresar : Intensidad = -40 (negativo) y Angulo de cono = 50

Hasta aquí, aplicamos dos luces para lograr un efecto tipo ¨linterna¨ . Usted verá la utilidad que pueden darle a esta técnica. Si desea usarla en una composición propia, debería conocer algo acerca de ¨Emparentamiento¨ con ¨Objetos nulos¨, que sin dudas, será tema de próximas entregas. En la comp. ¨Intensidad negativa 2¨ (parte del archivo .rar adjunto a este tuto) les dejo un adelanto de lo más sencillo con respecto a ¨Emparentamientos¨. Desde esta comp. realicen modificaciones en las variables del objeto nulo y vean que sucede con las luces.

Reflejos

En esta comp, ajustaremos las ¨Opciones de Material¨ de la capa a traslucir.

1. Crear una comp D1/Pal de 3 seg de duración y denominarla ¨Reflejos¨

2. Importar el archivo ¨Textura ¨, llevarlo a la comp

3. Aplicar ¨Capas 3D¨ para ¨Textura ¨

4. Para utilizarla de piso, abrir Rotación ( R ). Posición ( Shift + P) y Escala ( Shift + S)

5. Ingresar E = 500, Rx = 90º, Py = 450

6. Acomodar el visor comp. a ¨4 vistas Izquierda¨

7. Arrastre ¨Composición final.avi¨ hasta la comp. ¨Reflejos¨, de manera que se ubique por encima de ¨Textura ¨, y aplicarle el definidor ¨Capas 3D¨

8. Desplegar sus parámetros e ingresar P = 360;310;0 y S = 40%

9. Crear una capa de luz direccional, llamada ¨Spot¨¨

10. Para ubicar correctamente el ¨Punto de interés¨ de la luz, copiar las coordenadas de ¨Posición¨ de la capa ¨Composición final.avi¨ y pegárselas.

11. Despliegue el parámetro Posición de la capa avi, y cambie a ¨Vista personalizada 1¨ (F11) Desde allí, tomando la herramienta ¨Cámara unificada (CS4) u Orbital (CS3)¨ busque una perspectiva adecuada para corregir la posición de la capa de luz ¨Spot 1¨

12. Tomar la herramienta ¨Selección ¨( V ) y arrastrar la luz desde su origen hasta posicionarla justo del lado opuesto, sus coordenadas deben ajustarse a P = 360;40;310

13. Volver el visor comp. a vista ¨Cámara directa ¨ (F12), Fíjese que en esta posición, desaparece la capa .avi, porque la luz ¨Spot¨ se sitúa justo detrás de ella

14. Seleccionar la capa ¨Composición final.avi¨ y desplegar sus ¨Opciones de material¨ con el atajo ¨A A ¨ . Luego activar : ¨Acepta sombras ¨, acción que inmediatamente muestra la sombra proyectada sobre el piso

15. Ingresar Transmisión de luz = 100% para la capa .avi. Piense que el reflejo de esta capa en el piso, depende de varios parámetros:

§ Transmisión de luz de la capa iluminada

§ Intensidad de la luz

§ Brillo de la capa piso (donde se refleja la capa iluminada)

16. Para resaltar más el reflejo en el piso, ingresar ¨Brillo = 1¨ en ¨Opciones de material¨ de la capa Textura¨

17. Crear otra capa de luz, pero esta vez del tipo ¨Punto¨, llamarla ¨Punto ¨, ajustar su intensidad = 80% y desactivar ¨Proyecta sombras¨

18. Desplegar su parámetro Posición e ingresar P = 360;288;-100, esta luz sirve simplemente para iluminar mejor nuestro escenario.

19. Volver a vista ¨Cámara activa ¨

Hasta aquí, la composición estaría terminada, pero vamos a agregarle una cámara para visulizar en 360º alrededor de la capa avi

20. Crear una nueva capa ¨Cámara 1¨ aceptando los ajustes predeterminados para 50mm

Siempre que necesitemos hacer girar una Cámara en 360º alrededor de la capa, conviene crear un ¨Objeto nulo¨ y que éste gire sobre su eje en Y, para luego emparentarlo a la Cámara

21. Crear un ¨Objeto nulo ¨ y activarlo como ¨Capa 3D¨

22. Ir al inicio de la comp (tecla Inicio) y crear un Fotograma Clave para Rotación en Y

23. Ir al final de comp. (tecla fin) e ingresar Ry = 360º

24. Emparentar ¨Cámara 1¨ arrastrando con clic desde su ícono espiral, hasta la capa ¨Objeto nulo¨

La composición queda terminada con el giro de la Cámara en 360º alrededor de la capa avi, Observar que en la comp ¨Intensidad negativa 2¨, la cámara obedece el comportamiento del texto ¨VCS ¨, en idioma Adobe, se dice que la Cámara es Secundaria de la capa VCS. En cambio, en la comp. Reflejos, se creó un Objeto nulo que provoca el giro de la Cámara.

Les dejo la comp. Reflejos 2 (copia de la que hemos desarrollado) con algunas diferencias para que analicen, hay un Objeto nulo ¨Plataforma¨ que gobierna el piso y la capa avi. Notar hay dos acercamientos repentinos de Cámara hacia la capa avi. Y ambos con diferente procedimiento. En general, con AE siempre tenemos opciones distintas para acceder a finales parecidos. Conociendo las diferentes técnicas, podremos optar por el de mejores resultados.

Finalmente las composiciones ¨Intensidad negativa 2¨ y ¨Reflejos 2¨ las colocamos en ¨Cola de procesamiento¨ para renderizarlas y archivarlas con el formato de video que necesitemos:

1. Seleccionar ambas comp desde el panel Proyecto y elegir del menú : Composición > Añadir a cola de procesamiento (Ctrl + Shift + >). Acción que abre el panel ¨Cola de procesamiento¨ con las dos composiciones puestas en él.

2. De la 1º comp visible, ir al botón ¨Módulo de salida¨ y elegir ¨Personalizar ¨

3. Del cuadro ¨Ajustes del módulo de salida¨ elegir el formato deseado. Para este caso, elegí ¨FLV¨ que es liviano y apto para publicarlo en el blog. Ud puede probar el resultado con otros formatos.

4. Cerrar el cuadro de ajustes y hacer clic en el nombre ( a la derecha de ¨Salida a¨) para especificar el sitio donde se archivará la película, AE utiliza predeterminadamente el nombre de la comp. como nombre de la película.

5. Luego de haber elegido la carpeta, Aceptar. (Si queremos, podemos cambiar el nombre de la película antes de renderizarla e incluir numerosas operaciones más que serán tema de otras entregas).

6. Repetir los mismos pasos para la 2º comp.

7. Hacer clic sobre el botón ¨Procesar¨ y a esperar.

Entregas anteriores:

1. Curso de Adobe After Effects por Daniel Paniagua | 1ª Entrega
2. Integración de Photoshop y After Effects | 2ª entrega
3. Cómo generar una animación en After Effects | 3ª entrega
4. Cámaras Viajeras I en After Effects | 4ª entrega
5. Cámaras Viajeras II en After Effects | 5ª entrega curso AE

Les recuerdo que aquellos que deseen aprender After Effects en profundidad, pueden adquirir el libro de mi autoría : ¨Aprenda el lenguaje de los efectos especiales Vol 2¨ basado en la versión CS4, para más información contacten con Cristian Eslava o dejen un comentario.

Gracias por vuestra atención, y hasta la próxima entrega.

Daniel Paniagua

Para cualquier duda sobre After Effects y edición de vídeo utilicen el foro sobre Edición de vídeo y After Effects.

Ventajas de crear un icono con CSS en vez de con una imagen:

• el icono será escalable y vectorial,
• con fondo transparente en todos los navegadores,
• y según el tamaño tendrá menor peso que una imagen.

Hay dos formas de crear el icono:

1. Utilizando la propiedad de esquinas o bordes redondeados. Una forma sencilla pero que no es compatible con IE ni con Opera  (Demo 1)
2. Utilizando texto. Cross-browsers, compatible con todos los navegadores. El siguiente icono está formado por 3 caracteres: “o”, “o” y “.” con sólo CSS, puedes probar a aumentar el tamaño del texto (CTRL +) y comprobarás que es vectorial.

(Demo 2)

A continuación muestro el código necesario y al final algunas conclusiones.

Icono RSS con la propiedad CSS de esquinas redondeadas:

Creamos un div contenedor que llamamos icon-rss y en su interior dos capas anidadas para los dos arcos y el carácter del punto para el círculo.

<a title="RSS" href="http://feeds2.feedburner.com/ceslava">

<!--// enlace al feed-->
<div id="icon-rss"> <!--// div contenedor, el que especifica el tamaño del icono-->
	<div class="ext"> <!--// arco exterior-->
		<div class="int"> <!--// arco central-->
			. 	<!--// el punto hace de círculo-->
		</div>
    </div>
</div>
</a>

Ahora vamos a darle formato con CSS

#icon-rss {
width:100px; /*definimos el tamaño del div contenedor*/
height:100px;
overflow:hidden; /*ocultamos todo lo que sobresalga de este div*/
}

.ext {
width:200px; /*definimos el tamaño del arco exterior*/
height: 500px;
margin:0 -120px; /*utilizamos un margen negativo para llevarlo a la izquierda*/
border: 10px solid #333; /*estas son las propiedades del borde*/
-moz-border-radius:0 100px 0 0; /*redondeamos la esquina superior derecha para Firefox*/
-webkit-border-radius:100px;/*redondeamos la esquina superior derecha para Chrome, Safari*/
border-radius:100px; /*propiedad CSS3 que día haría este código compatible con todos los navegadores */
}

.int {
width:100px;
height: 300px;
margin:30px 50px;
border: 10px solid #333;
-moz-border-radius:0 100px 0 0;
-webkit-border-radius:50px;
border-radius:100px;
/*esto dará formato al punto*/
font-size:110px;
color:#333;
text-indent:42px;
line-height:23px;
}

a {
cursor:pointer; /*cambiamos el puntero para indicar que hay un enlace*/
text-decoration:none;
}

(Demo 1)

El problema de esta solución es que para Internet Explorer y Opera deberíamos utilizar alguna de estas opciones para redondear las esquinas, de otro modo en estos navegadores veremos el icono de esta forma:

y en el resto (escalado):

Icono RSS con texto y CSS:

Ahora en vez de capas vamos a utilizar caracteres, para los arcos utilizamos la “o” y seguimos con el punto para el círculo:

<a title="RSS" href="http://feeds2.feedburner.com/ceslava">

<!--// enlace al feed—>

<div id="icon-rss"> 

<!--// div contenedor, el que especifica el tamaño del icono—>

<span class="ext">o</span>
<span class="int">o</span>
<span class="circulo">.</span>
</div>
</a>

Y ahora el CSS

#icon-rss {
width:100px; /*definimos el tamaño del div contenedor*/
height:100px;
overflow:hidden; /*ocultamos todo lo que sobresalga de este div*/
position:absolute; /*la position absolute del contenedor hará que otros elementos hijos también con absolute queden en su interior*/
font-family:"Courier New", Courier, monospace; /*definimos la fuente de sistema para que la "o" sea lo más circular posible*/
color: #333; /*definimos el color de los elementos de nuestro icono*/
}

#icon-rss span {
position:absolute; /*damos a los 3 elementos este valor*/
}
a {
cursor:pointer; /*cambiamos el puntero para indicar que hay un enlace*/
text-decoration:none;
}

.ext{
font-size:450px; /*damos tamaño a la "o" exterior*/
text-indent:-138px; /*damos posición horizontal a la "o" exterior*/
font-weight:300; /*damos grosor a la "o" exterior*/
line-height:153px; /*damos posición vertical a la "o" exterior*/
}

.int{
font-size:250px; /*damos tamaño a la "o" interior*/
font-weight:600;
text-indent:-75px;
line-height:174px;
}

.circulo{
font-size:110px; /*damos formato y posición al punto*/
text-indent:-25px;
line-height:136px;
}

(Demo 2)

Conclusiones

En resumen puedo decir que esto no es más que un simple experimento, el código que se genera no es semántico.

La 1º opción de los bordes redondeados requiere de alguna solución extra para que sea compatible con IE y Opera, si alguno quiere probar aquí publiqué 24 técnicas para generar esquinas redondeadas con CSS. Con la especificación CSS3 y los futuros navegadores se salvará este problema de compatibilidad.

La 2º opción puede ser divertida, espero tener tiempo para generar algunos iconos más sólo con CSS y texto. Lástima el renderizado del anti-aliasing…

La he testado bajo Windows XP en las últimas versiones de IE, Safari, Opera, Chrome y en Firefox 3.0.11 (ya sé que ha salido la 3.5 pero prefiero esperar a que actualicen también Firebug)

Todas vuestras aportaciones, sugerencias y correcciones como siempre bienvenidas.

Dicotomías relacionadas en pqpq.es 

• Micro Blogging: Tumblr vs. Twitter
• Redes sociales ¿Twitter o Facebook?
• ¿Prefieres Twitter o RSS?
• ¿Tienes blog?
• ¿Es un blogger un escritor o un periodista frustrado?
• ¿Deben tener comentarios los Blogs?
• ¿Estamos llegando al fin del fenómeno blogs?

En este artículo de Ramón Peco  “Pero, ¿es que ya existía Photoshop en el siglo XIX?” se echa la vista atrás para mostrar la evolución de los hacedores y de los receptores de fotomontajes.

Antes de Photoshop la manipulación a veces inocente era difícilmente descreída por el público. Los receptores actuales son más recelosos y en seguida se cuestionan la autenticidad y virginidad de la fotografía.

Esta es la portada de 1891 de L’Illustration, un fotomontaje con estos 4 elementos (mujer, sombra, tren y fondo)

Dicotomías relacionadas en pqpq.es 

• Fotografía en color vs. Fotografía en Blanco y Negro
• El mejor y el peor plugin para Photoshop
• Gráficos para web | Photoshop vs. Fireworks
• ¿Se debe usar Photoshop para retocar a modelos?
• ¿Utilizas Photoshop CS3 u otra versión anterior?
• ¿Vas a actualizarte a Adobe CS4?
• Blog de diseño vs. Diseño de Blog
• ¿Tienes blog?

Cursos relacionados en cursos v2b

• Montaje con Adobe Photoshop CS4: Boca de metro
• Adobe Photoshop CS4 Básico
• Adobe Photoshop Lightroom 2
• TODO Photoshop CS3: Photoshop CS3 Básico y Photohop CS3 Fotógrafos
• Adobe Camera RAW 5.0 NOVEDADES
• Adobe Camera RAW 5.0

En 31 Useful Twitter Plugins For Wordpress To Choose From puedes encontrar variedad de posibilidades y plugins para integrar ambos servicios.

A título personal…

Aún no veo necesaria dicha integración, al menos bidireccionalmente.

Mis twitts son alusiones rápidas a otros artículos, recordatorios, preguntas y conversaciones muchas veces triviales. No creo que fuese contenido útil para mi sidebar, por otra parte, necesitado de una profunda limpieza.

Cuando sigo a alguien en Twitter que no conozco personalmente suele ser porque me interesa su blog, no porque haya leído sus últimos twitts en su sidebar. De hecho creo que hasta que el servicio de Twitter no sea más estable es algo incómodo ofrecer a tus lectores un servicio continuamente saturado. Así supongo que genero mis followers, a través del enlace a mi cuenta que encuentran en este blog (aparte de los spammers).

Lo que sí hago es utilizar twitterfeed para publicar mis posts, tanto de ceslava como de pqpq.es y las fotos de Flickr en Twitter. Encuentro esta aplicación mucho más cómoda que instalar cualquier plugin.

Mi relación con Twitter

1. Empecé como muchos sin ver su finalidad,
2. tuve como muchos que leer sobre él casi a diario en los blogs que sigo,
3. tuve como muchos que aprender a regañadientes
4. y empiezo como muchos a divertirme y encontrarle utilidad.

Hasta ahora además de para ahorrarme algún email Twitter ha sido:

1. inspirador de artículos,
2. iniciador de gratas conversaciones
3. y pozo de divagaciones varias.

Es lógico pues que pienses que el problema sigue siendo personal, no me he integrado del todo en Twitter y por eso no encuentro la necesidad de integrarlo en el blog.

Es sin duda la herramienta en auge en detrimento de blogs, cualquier empresa y CEO utiliza Twitter como herramienta de marketing sobre todo en Estados Unidos, en Europa y aún menos en España (véase mi caso) aún no ha cuajado Twitter.

Me interesa tu opinión, en el caso de que tengas blog y cuenta en Twitter ¿los tienes integrados? ¿crees que debería integrarlo en este blog?

Dicotomías relacionadas en pqpq.es

• Micro Blogging: Tumblr vs. Twitter
• Redes sociales ¿Twitter o Facebook?
• ¿Prefieres Twitter o RSS?
• ¿Tienes blog?
• ¿Es un blogger un escritor o un periodista frustrado?
• ¿Deben tener comentarios los Blogs?
• ¿Estamos llegando al fin del fenómeno blogs?

De por ejemplo por qué los medios de información online no enlazan…

En estos dos artículos vimos dos ejemplos contrapuestos, el de PC Actual  y el del Diario de Sevilla:

• Si el papel enviara trackbacks o pingbacks. PC Actual no tiene versión online sin embargo uno de sus redactores se encarga de enlazar a sus referenciados.
• El “blogger” que sabía de diseño | Artículo en prensa. En la versión online de Diario de Sevilla no enlazan con las URLs publicadas.

Manuel lo explica mucho mejor:

Dicotomías relacionadas en pqpq.es 

• ¿Tienes blog?
• ¿Es un blogger un escritor o un periodista frustrado?
• ¿Deben tener comentarios los Blogs?
• ¿Estamos llegando al fin del fenómeno blogs?