03 diciembre 2014

Melissa Robles. Un talento descubierto en YouTube

Melissa Robles tocando el Ukulele

YouTube es un medio que permite trascender más allá de los límites que imponen las barreras geográficas, y ofrece oportunidades únicas para emprendedores, gente como tú, que desea comunicar sus conocimientos, aficiones y/o habilidades entre muchas otras cosas, por medio de videos.

Millones de personas acuden al sitio día a día, en búsqueda de información tan variada que va, desde los videos musicales, hasta los videotutoriales de infinidad de temas, y mucho más. Es por eso que representa una excelente apuesta para todos aquellos que por ejemplo, desean incursionar en nuevos campos, exponiendo antes los ojos del mundo todo aquello que les apasiona y desean compartir.

Pero, ¿te has preguntado hasta dónde se puede llegar gracias a YouTube? ¿Es posible conseguir la fama, o una oportunidad única que cambiaría tu vida para siempre?

Pues hoy quiero contarte a grandes rasgos la historia de Melissa Robles, una talentosa joven mexicana, nativa de Mexicali B.C. que, gracias a su dulce voz y gran carisma, ha logrado no solo conquistar el corazón de muchísimos usuarios en YouTube, sino que, actualmente se encuentra a un paso de lanzar un disco, acompañada de otros dos talentosos músicos.


Veamos un poco más de cerca la historia de Melissa Robles y sus comienzos en YouTube


Melissa cargando su ukulele
La historia empieza a tejerse en junio del 2012, cuando Melissa Robles de 22 años, y quien en aquel entonces dirigía su propia academia de baile, sube a la plataforma un video con un cover para compartirlo con sus amigos y familiares, acompañada de un ukulele, instrumento que recientemente aprendía a tocar, motivada por su interés nato en la música.

Dicho video se convertiría en el primero de una serie de videos que publica en la plataforma con los llamados "covers", en donde transmite su gran pasión por la música, y en los que se aprecia y resalta su sencillez y carisma, cualidades que le permiten ir ganando seguidores, mismos que constantemente le solicitan temas para que los interprete.

Fue precisamente uno de esos covers, interpretando la canción: "Fascinación", del cantante Carlos Rivera (quien, como posiblemente recordarás, fue el ganador en el reality show "La Academia en su tercera edición"), lo que la encaminó a lo que inevitablemente se convertiría en su futuro modo de vida: "cantar de forma profesional", ya que es éste quien la pone en contacto con dos músicos que en aquel entonces, buscaban una voz femenina para integrarla a un grupo musical que se planeaba crear.

La creación de la agrupación musical ya se ha materializado y la han llamado: "Matisse". Está formada por: Pablo preciado, Román Torres, y Melissa, y ya ha lanzado su primer sencillo con el respaldo de una importante compañía discográfica.

Actualmente Melissa se encuentra viviendo en la ciudad capital de México, trabajando arduamente en el proyecto musical que comienza y que promete mucho, aunque, su actividad artística no se ha limitado a colaborar en la agrupación musical que integra, ya que, también ha participado con otros artistas, por ejemplo, en la interpretación del tema: "Prometiste" con Pepe Aguilar, en una versión unplugged.

El haberse mudado a otra ciudad o el hecho de integrar la susudicha agrupación, no ha comprometido hasta ahora su presencia y actividad en YouTube, ya que continúa subiendo videos de forma regular en su canal, incluso, ya nos ha regalado algunos tutoriales para aprender a tocar el ukulele, por ejemplo, este que me encanta, interpretando el popular tema All about that bass de Meghan Trainor ¿te animas...?

Ya para terminar, te dejo el video oficial con el sencillo que recientemente lanzó el grupo, y que se titula: "La misma Luna", para que puedas juzgar por ti mismo, la calidad de las voces de sus integrantes incluyendo la de Melissa. Así que, ¡échale un vistazo!





Referencias
http://www.digitallpost.mx
http://lovemusik.org/carlos-rivera-nos-descubre-a-melissa/#.VH7De9KG_HQ
https://www.youtube.com/watch?v=mlFElb2OTZY&feature=youtu.be

Crédito de las fotografíasMartín Valdez



13 mayo 2014

Cómo Saber si tu PC tiene la Versión 32 bits o 64 bits en Windows 8

Windows 8

Te encuentras a un paso de instalar ese programa que siempre has querido tener o que necesitas con urgencia, y para instalarlo, tienes que elegir en las opciones de instalación si tu PC tiene la versión de 32 bits o la de 64 bits, y la duda te detiene...

¡No te preocupes!, saber qué versión tiene tu PC, cuando tienes Windows 8, implica llevar a cabo unos cuantos pasos, mismos que a continuación te explico ;)

Pasos

  1. Presiona la tecla del logotipo de windows logo de windows + Q del teclado (la tecla de windows más la tecla "Q" al mismo tiempo).
  2. Escribe en el campo de búsqueda: "Sistema".
  3. Cuando se empiece a mostrar la lista de resultados "debajo del buscador", haz click sobre "Sistema".



  4. Luego, se abrirá una ventana que muestra la información básica del equipo. Toma nota donde dice: "Tipo de sistema". Ahí aparecerá si se está ejecutando la versión de 32 bits o la de 64 bits de Windows 8.


    Información básica acerca de Windows 8
¡Y listo!, ahora si podrás instalar ese programa, que por un momento, parecía escapársete de las manos ;)

Si utilizas Windows Vista o Windows 7, échale un vistazo a este artículo del centro de soporte técnico de Microsoft, donde se explican los pasos para saber ese dato ;)

¿Sabías qué? 
Los términos 32 bits y 64 bits hacen referencia a la forma en que el procesador de un equipo (también denominado CPU), procesa la información. La versión de 64 bits de Windows administra grandes cantidades de memoria de acceso aleatorio (RAM) de forma más eficaz que la versión de 32 bits. Vía: Microsoft.

Y recuerda:
Solo instala programas de fuentes en las que confíes plenamente,  y de proveedores de probada reputación ;)

08 mayo 2014

Bonitas Fotografías Gratis libres de Derechos de Autor (CC0 licencia)

Me encanta contemplar fotografías con paisajes y otras escenas, porque dan rienda suelta a mi imaginación transportándome a lugares inimaginables... Justamente eso hacía en el sitio: unsplash.com, que conocí gracias a una publicación en Twitter de +Josue Ochoa, sitio donde además de deleitarte la pupila con bonitas fotografías, podrás descargarlas sin restricción alguna, para ser usadas en tu blog o cualquier otro proyecto digital.

Según la página, todas las fotografías tienen licencia de creative commons: CC0 1.0. Eso quiere decir que el autor ha renunciado a todos los derechos patrimoniales, por lo que, su uso y abuso no está restringido ;)

Así pues, es posible utilizar la imagen original, o bien, adaptarla haciendo las modificaciones que creas pertinentes para luego usarla.

Todas las fotografías fueron tomadas por fotógrafos profesionales (al menos las que estuve viendo) así que puedes tener buenas expectativas de la calidad de imágenes que puedes encontrar. Además, sus administradores han hecho la promesa de subir 10 fotografías nuevas cada diez días, lo que equivale a una diaria, por lo que bien vale la pena seguir el sitio.

¡Todas las imágenes son de alta resolución y de gran tamaño! Puedes encontrarlas de hasta 5000 pixeles de ancho, por lo que puedes usarlas como fondo de escritorio, incluso como fondo de una página, o bien, como fondo en la portada de alguno de tus perfiles de redes sociales.

A continuación, solo una muestra de las fotografías que puedes encontrar ;)


Puente

Brooking bridge

New_York

Camara_Fotografica

libro abierto

Mujer en el campo a la caída del sol

Bicicleta posando frente a una Choza pintoresca

Restaurant estilo antiguo

Triciclo de niño sujetado con una cadena

Automóvil clásico 1938

Camionet Volkswagen Combi estacionada frente a malecon

Aves del mar

Bote clásico antiguo

edificaciones del medio oriente

tigre caminando

Mujer posando sobre una paja en el campo

Cafetera con te

Perro que parece pensar viendo al horizonte


07 mayo 2014

Trucos para Poner Código desde las Entradas o Páginas y que Funcione

Probablemente hayas abandonado algún proyecto como el de incluir un elemento que necesite código HTML en una entrada o página del blog, porque el resultado no fue el esperado.

Para que puedas insertar el código de un elemento en una entrada o en una página estática, como por ejemplo el de una galería de imágenes, una sección con pestañas, o cualquier otra cosa, hay que seguir ciertas pautas en la configuración de las entradas/páginas, y echar de mano de alguno que otro truco que de no saberlo y usarlo, evitará que las cosas funcionen como Dios manda... o como tú esperas  :)

Es por eso que hoy quiero compartirte algunos trucos y cosas que debes tomar en cuenta y que seguramente te serán útiles cuando quieras implementar cualquier cosa que utilice código HTML desde el editor de entradas o páginas, y que he aprendido sobre la marcha al usarlos.

1. Eligiendo el modo de redacción
Este es un punto básico y de partida a la hora que empiezas a redactar una entrada, y cuando vas a agregar código que desees que se "interprete", es decir, que no aparezca tal y como lo has agregado, yo te recomendaría usar la opción: "Interpretar HTML escrito" tal y como muestro en la siguiente imagen.

Opción de modo de redacción


Si lo haces de ese modo, puedes pegar el código estando en la opción: "Redactar", con la seguridad de que el código será interpretado y se visualizará el elemento que quieres poner.

Ten en cuenta que si usas la opción "Interpretar HTML escrito" y pasas a la opción HTML porque por ejemplo vas a agregar el ancho y alto de una imagen, o cualquier otra cosa en alguna etiqueta, al regresar a la opción "Redactar" se va a visualizar el elemento y no el código de éste.

Lo mismo sucederá si utilizas la opción "Mostrar HTML tal cual", en cuyo caso debes poner el código del elemento estando el la opción HTML de la entrada para que funcione.

Otra cosa importante que debes saber, es que, las preferencias son almacenadas, por lo que, cada vez que empieces una nueva entrada, o accedas a una para editarla, por defecto aparecerán seleccionadas las últimas preferencias que configuraste.


2. Evitar el uso de etiqueta <br>
Desde las opciones de configuración de la entrada, puedes elegir si se agrega o no la etiqueta <br> para lograr crear un salto de linea. Por ejemplo para que el navegador muestre el texto que le sigue en otra nueva linea.

Lo que hace una etiqueta <br> sería el equivalente a pulsar la tecla "Enter" o intro. Por ello la opción de "Salto de linea" dice: Utilizar etiqueta <br> y la otra: Pulsar intro para los saltos.

Una etiqueta <br> y que se ve así:  "<br />"  si accedes al HTML de la entrada, puede provocar un "desastre" si es que al estar editando el código con el que estás trabajando, separas cada linea usando la tecla: "Enter", ya que estarías agregando la etiqueta <br> entre el código cada vez que lo hagas.

Por ejemplo, en una galería de imágenes que estés agregando, puede hacer que se cree un espacio en blanco arriba de cada imagen, al insertarse dicha etiqueta por el editor.

Si vas a poner código desde el editor de entradas, selecciona la opción: "Pulsar Intro para los saltos" de ese modo el editor no agregará la etiqueta <br> y estropeará el resultado.




3. Cómo usar etiquetas <span> o <p> u otras que desaparecen
Una de las particularidades del editor de Blogger es que "desaparece" como por arte de magia algunas etiquetas como la etiqueta "span" cuando no lleva ningún atributo, al cambiar la vista Redactar a la vista HTML. 

Por ejemplo, esto va a quedar sin la etiqueta span, cuando cambies la vista de "HTML" a "Redactar":

<span> Un texto o cualquier otra cosa dentro </span>

La verdad, no sé si ésto fue intencional o se trata de un bug o error del editor, lo único que nos queda es evitarlo, si es que el código que vamos a insertar lleva esa etiqueta, ya que si por ejemplo han sido definidos algunos estilos para dicha etiqueta, pues simplemente no se van a aplicar porque la etiqueta ya no va a "estar en el código".

 ¿La solución? Una solución sencilla es poner un atributo, por ejemplo agregarle una clase, como se puede apreciar a continuación, al usar una etiqueta span:

<span class="te_quedas">Soy un texto que se supone debe verse muy mono con fondo rosita </span>

Al agregar el atributo "class" con el valor: "te_quedas" (es solo un ejemplo, puede ser cualquier otro nombre/texto) la etiqueta no va a desaparecer.

Hasta ahí se soluciona el problema, pero podemos mejorarlo si es que ha sido definido CSS para dicha etiqueta y que usa el elemento que estamos queriendo poner.

Pensando en eso, habría que escribir o editar el CSS usando esa clase que agregamos a la etiqueta. De otro modo, no estaría justificado su uso, excepto el de evitar que desaparezca al usar el editor de entradas o páginas.

Por ejemplo, supongamos que en el CSS de una galería de imágenes que quieres poner se definió la presentación de dicha etiqueta así:

#galeria span{
/* todos los estilos definidos para la etiqueta "span" aquí dentro */
}


Al agregar la clase a la etiqueta span, cambiaríamos "#galeria span" (que es el llamado "selector" en CSS) por el nombre de la clase de la etiqueta:

.te_quedas{
/* todos los estilos definidos para la etiqueta "span" aquí dentro */
}


De ese modo, estaríamos especificando los estilos de la etiqueta span a la cual identificamos con la clase: "te_quedas" y "evitamos" que desaparezca dicha etiqueta por no tener ningún atributo.

Otra forma de solucionar la susodicha desaparición, sería ponerle algún estilo que no interfiera con la presentación del contenido de la etiqueta. Por ejemplo:

<span style="font-family:inherit"> Soy un texto que se supone debe verse muy mono con fondo rosita </span>

Lo que hacemos es usar el atributo "style" y pensando en usar "pocos caracteres para no extender mucho nuestro código" agregamos la propiedad "font-family" a la que le ponemos el valor: "inherit" para que "herede" el tipo de fuente de la sección donde aparecerá el elemento en cuestión (que en este caso sería de las entradas) o que haya sido definido.

También es una solución válida y aunque sea redundante, soluciona el problema de "la desaparición de la etiqueta", incluso yo la he usado porque me resulta muy práctico y rápido hacerlo, aunque, podemos hacerlo mejor, evitando escribir ese estilo cada vez, usando la clase, tal y como te comentaba anteriormente.

Siéntete libre de compartir tu experiencia al usar el editor, cuando agregas código, o bien, de hacernos una sugerencia para mejorar la experiencia al agregar código desde el editor.

Espero sea útil ;)

25 abril 2014

Cómo Agregar Iconos de Redes Sociales a las Vistas Dinámicas de Blogger

Demostración iconos de redes en vistas dinamicas


¡Hola qué tal! Como ya te lo había prometido, hoy veremos la forma de agregar iconos de redes sociales a las vistas dinámicas de Blogger.

Como usuario de las vistas dinámicas, seguramente ya te habrás dado cuenta que no es posible agregar código desde el gadget con la opción HTML/Javascript, mismo que comúnmente es usado para agregar iconos de redes sociales.

De todos modos, aunque se pudiera usar dicho gadget, el contenido quedarían "oculto" en una pestañita, ya que todos los gadgets que agregas, aparecen a la derecha en la página en dichas pestañas, con excepción al widget de páginas estáticas que se muestra en la barra que aparece debajo de la cabecera.

Bueno, pues pensando en tener los iconos sociales visibles cuando un usuario acceda al blog, lo que haremos entonces es usar el gadget de páginas estáticas para que se muestren, usando también un poco de CSS.

¿Quieres verlo en acción?, échale un vistazo a la  Demostración

Sobre el tutorial

El tutorial consta de dos partes. La primera parte explica cómo agregar los enlaces de redes sociales a la lista de páginas estáticas. Es muy sencillo, pero para usuarios nuevos será de gran ayuda. Si ya lo sabes, ve directo a la segunda parte ;)

En la segunda parte explicaré la forma en que cambiamos el texto de los enlaces por iconos respectivamente. Ahora vayamos al grano y veamos paso a paso cómo lograrlo ;)


Primera parte: Agregando los enlaces de las redes sociales que usas



Pasos:

  1. Agrega el gadget de Páginas si es que no lo has hecho, yendo a la pestaña "Diseño" luego, haces click en agregar un gadget, (en cualquier sección ya que de todos modos se mostrará debajo de la cabecera) y selecciónalo de la lista de gadgets disponibles.
    Opcion Gadget de paginas
  2. Luego, copia todas las direcciones web de las distintas redes sociales que usas. Para ello dirígete a cada página en cuestión, y cópiala desde la barra de direcciones del navegador. Por ejemplo, esta sería la dirección web de mi página de Twitter:

    https://twitter.com/compartidisimo
  3. Una vez que tengas todas las direcciones web de las páginas de las redes sociales que usas, y que deseas agregar a tu blog, dirígete al panel de Blogger, y haz click en la pestaña "Diseño".
  4. Después, haz click en editar en el gadget de "Páginas" luego en "Añadir página con enlace".

    Opcion para agregar enlaces en gadget de paginas


  5. Una vez que se abra el cuadro de "Dirección web", agrega una a una, todas las direcciones web de las páginas de redes sociales que ya copiaste y guárdalas. Deberás repetir el proceso para cada red social que uses. Por ejemplo en la siguiente imagen puedes ver que estoy agregando a dirección web de Twitter:

    Formato para agregar enlaces
Nota: Si por error pusiste mal una dirección web y la guardaste, ¡no todo está perdido! Aunque no puedes editarla, si puedes eliminar el enlace, y volverlo a poner,  ;)

Cuando termines de agregar todos los enlaces, entonces pasa a lo siguiente ;)



Segunda parte: Personalizar los enlaces de las páginas con iconos de redes sociales


Para reemplazar los textos de los enlaces por iconos, vamos a usar un solo archivo de imagen conteniendo todos los iconos. De ese modo hacemos la carga más eficiente, ya que enlazaremos una sola imagen en lugar de varias que necesitaríamos.

He creado esta imagen con los iconos que creo pueden ser usados y es el que puedes ver a continuación:

Sprite con iconos de redes sociales

En donde de izquierda a derecha se muestran así: Inicio, Twitter, Facebook, Pinterest, Instagram, Google+, RSS, Acerca de, LinkedIn, Contacto.


El truco consiste en usar el llamado selector de hermano adyacente en CSS, de tal modo que podamos seleccionar cada elemento de la lista de páginas estáticas para poder remplazar el texto por la imagen del icono.

En tu blog, los iconos no necesariamente tienen que mostrarse en el orden que aparecen en la imagen (de izquierda a derecha), ni tampoco ponerlos todos. Lo que si hay que tener en cuenta es la posición de cada uno dentro de la imagen, para poderlos reemplazar correctamente según corresponda.

A continuación puedes ver la posición que corresponde a cada icono en la imagen que creé, y que vas a usar para mostrar cada icono según necesites:

Posición
Icono por defecto
Posición
Icono :hover
Inicio0 00 -35px
Twitter-35px 0-35px -35px
Facebook-70px 0-70px -35px
Instagram-140px 0-140px -35px
Pinterest-105px 0-105px -35px
Google+-175px 0-175px -35px
LinkedIn-280px 0-280px -35px
RSS-210px 0-210px -35px
Acerca de-245px 0-245px -35px
Contacto-315px 0-245px -35px


Donde dice: "Posición Icono por defecto" se enlista la posición que ocupa en la imagen el icono que aparece por defecto. Por otro lado, "Posición Icono :hover" corresponde a la posición del icono al poner el puntero del ratón encima de la imagen (del evento :hover). 


Pasos:

  1. Primero, hay que agregar el siguiente CSS independientemente de de los iconos que vayas a agregar. Esto lo haces yendo a Plantilla > Personalizar  > Avanzado > Añadir CSS.


    .tabs li{
    background:url
    (http://2.bp.blogspot.com/-8KguVN5ZlTQ/U1rrOLmXLGI/AAAAAAAAQMA/0655t_U6M74/s1600/iconos-compartidisimo-vista.png) no-repeat 0 0;
    margin:0 !important;
    padding:0;
    width: 35px;
    float:left;
    cursor:pointer;

    border-right: 1px solid #585858/*color de borde debe ser igual*/
    -webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;
    }
    .tabs li:first-child{
    border-left:1px solid #585858; /*color de borde debe ser igual*/
    }

    .tabs ul li a{
    display:block;
    line-height:80;
    }



    He agregado la URL de la imagen y la he resaltado de rojo. Para evitar sorpresas, te recomiendo alojarla por ti mismo desde Blogger. Si no sabes hacerlo, échale un vistazo a este tutorial.

    Para que pueda entenderse mejor cómo mostrar el icono respectivamente en cada enlace, vamos a suponer que vas a mostrar los siguientes 4 enlaces que a continuación se citan, siguiendo el orden de izquierda a derecha:

    Inicio       Twitter       Facebook      Instagram

    Una vez que agregues el CSS anterior, los enlaces se verán así:

    Cómo luce icono de inicio sustituido

    Como puedes observar, los cuatro enlaces han sido reemplazados por el icono de inicio. Esto sucede porque en el primer bloque de CSS, definimos la imagen que se mostrará en cada elemento de la lista de enlaces y que es la imagen que te facilito. 
  2. Ahora viene lo bueno: especificar la posición de la imagen a mostrar para cada icono según corresponda al enlace.

    Lo que necesitamos entonces es especificar la posición de la imagen para mostrar los iconos de Twitter, Facebook, e Instagram.  La clave está en definir el CSS que corresponde a cada enlace, de izquierda a derecha, por ello empezamos por el icono de Twitter, ya que el de inicio, quedará tal y como se muestra en la imagen, es decir, con el icono de la casita.

    Vamos a tomar nota de la posición que te puse en la tabla anterior para mostrar el icono por defecto de Twitter, y la colocamos en la propiedad "background-position", como se aprecia a continuación:

    .tabs li+li{
    background-position: -35px 0;
    }



    Si observamos el CSS anterior, a: #pages li que definimos al principio, hemos agregado el caracter "+" y enseguida hemos agregado  "li". Eso hará que apuntemos al "segundo enlace", al cual le definiremos la posición de la imagen que facilito, usando: "background-position" de ese modo, se mostrará el icono de Twitter en sustitución al de inicio que anteriormente se mostraba (el de casita).

    Para nuestro "tercer enlace" y que sería el de Facebook, agregaríamos de nuevo "+li" enseguida del anterior que pusimos, y definimos la posición que corresponde al icono de Facebook, y que puedes ver en la tabla de arriba. Entonces nos quedaría así:


    .tabs li+li+li{
    background-position:-70px 0;
    }


    Por último, tenemos que reemplazar el icono de Instagram, y que sería nuestro "cuarto enlace" de izquierda a derecha y para ello declaramos otra regla de CSS, agregando otro "+li", y declaramos la posición del icono tomando en cuenta la tabla. Nos quedaría entonces así:



    .tabs li+li+li+li{
    background-position:-140px 0;
    }


    ...y así lo harás sucesivamente para cada icono que necesites poner.


  3. ¡Muy bien! Hasta ahora hemos reemplazado todos los iconos respectivamente. Lo que nos falta entonces, es definir la posición de cada icono al poner el puntero del ratón encima de cada uno, es decir, para que se lleve a cabo lo que se conoce como evento :hover.

    Será muy sencillo porque lo único que vas a tener que hacer, es copiar cada bloque de CSS que definimos para cada botón, y agregarle :hover al final del selector, luego copia la posición del botón de la tabla que facilito donde dice: "Posición icono :hover", y ponla según el icono que corresponda, incluyendo el del primero icono que es el de inicio y que agregaste en el paso 1.

    Para no enredarte mucho, mejor veamos cómo sería el CSS que haría que el botón cambie como en la demostración al poner el puntero encima del botón de inicio:


    .tabs li:hover{
    background-position:0 -35px;
    }


    Luego para el de Twitter:


    .tabs li+li:hover{
    background-position:-35px -35px;
    }


    Para el de Facebook:


    .tabs li+li+li:hover{
    background-position:-70px -35px;
    }


    Por último para el de Instagram:


    .tabs li+li+li+li:hover{
    background-position:-140px -35px;
    }


    Una vez que agregues todo este CSS, ya tendrás funcionando los botones de Inicio, Twitter, Facebook, Instagram. Si quieres poner más hay que definir el CSS tal y como lo he explicado, para que se vea cada uno.   
  4. OPCIONAL: Mover a la derecha los iconos como se muestran en la demostración, recorrer los iconos del administrador si decides ponerlos a la derecha y eliminar el divisor que aparece antes del primer enlace.

    Para lograr todo lo anterior, agregamos el CSS que se indica, también desde el diseñador de plantillas en añadir CSS:

    Para que los iconos aparezcan a la derecha como en la demostración necesitas esto:


    #header #pages {
    float:right;
    }


    Para anular el caracter pipe "|" que se usa como divisor y que aparece antes de cada enlace (si no lo quitas va a quedar encima del borde del primer icono y se va a ver feo), necesitarás este CSS:


    #pages:before {
    content:normal!important;
    }


    Para desplazar los iconos de administrador que aparecen a la derecha en la barra y que solo son visibles para ti (solo si es que desplazas los iconos a la derecha) necesitarás este CSS:


    #header .admin-controls {
    right:380px !important; /*Valor que puedes editar según necesites*/
    }



¡Y listo!, ya tienes iconos de redes sociales, visible en las vistas dinámicas.

Parece difícil porque se ve largo, pues lo estoy explicando paso a paso, aunque no lo es tanto. Solo lee con atención y ya verás que con paciencia lo logras. Si crees que algo expliqué mal u omití algún punto importante, no duces en comentarlo.



Notas sobre el tutorial, y otros puntos importantes
  • Hubiera sido más sencillo y eficiente para el navegador utilizar las llamadas Pseudoclases estructurales (li:nth-child(n)pero, no funcionan en Internet Explorer 8, así que, esta vez nos vamos a tener que quedar con las ganas :)
  • El efecto suave del cambio de icono y que puedes apreciar en el navegador, claro, si usas uno de los buenos, bonitos y modernos, funciona en los principales navegadores "modernos" incluyendo Internet Explorer 10. 
  • Los iconos serán reemplazados correctamente en todos los navegadores incluyendo Internet Explorer 8. Es decir, se va a ver todo "decente"... en su lugar pues ;) 
  • Los bordes del icono se definieron en el CSS que facilito en el primer paso. Deben ser iguales; he puesto ahí el comentario y puedes editarlo según el color de fondo de la barra.


Espero sea útil ;)