Cree una pantalla de noticias completa con marcadores de CSS y RSS

Cree una pantalla de noticias completa con marcadores de CSS y RSS / Internet

Cuando eres un blogger, es realmente importante estar al día con las últimas noticias dentro de tu nicho particular. La gente lo toma más en serio cuando es uno de los primeros en cubrir un evento significativo, incluso más si lo cubre antes de que los principales medios de comunicación incluso se enteren..

Si eres un Noticias Blogger, la importancia de estar al día sobre las últimas noticias es aún más crítica. Desde que empecé a cubrir más eventos relacionados con noticias en mi propio blog, me di cuenta de lo importante que era monitorear constantemente las noticias en tiempo real. Ya que uso dos pantallas con mi computadora portátil, me di cuenta de que podía configurar una pantalla para que fuera exclusivamente para transmitir teletipos de noticias entrantes.

El único problema es que si bien hay aplicaciones decentes para transmitir una sola línea de noticias, como Yahoo Widgets o GlowDart, esas pantallas cubren solo una muy pequeña secuencia de texto entrante o son difíciles de personalizar para que se vean exactamente de la manera que quieres. un modo de pantalla completa.

Creación de su propia pantalla de noticias en tiempo real de página completa

Para resolver este problema, me di cuenta de que yo mismo tendría que construir algo. Como realmente no quería tomarme el tiempo para escribir una aplicación completa, decidí crear una página web con las transmisiones RSS incrustadas. Podría mostrar esa página abriendo mi navegador en modo de pantalla completa.

Las herramientas que utilicé para crear esta página, y todo lo que necesita para crear la suya, es una plantilla de página web gratuita basada en CSS (elegí la plantilla de negocios gratuita creada por SliceJack) y una cuenta de Google para acceder a elementos web de Google y Alertas de Google.

Aquí es cómo se veía la plantilla de negocios por defecto de SliceJack antes de que comenzara a piratear el código de fondo.

Este es mi método favorito para crear páginas web, lo admito, odio reinventar la rueda. Esta página tiene todos los elementos que quiero integrar en mi página web de transmisión de noticias final.

Los dos elementos en la parte superior, el artículo principal y la imagen, los voy a eliminar. Lo que realmente quiero usar son las tres columnas en el centro de la página.

Cuando descargue la plantilla a su propia computadora, encontrará el archivo index.html en la carpeta principal, pero luego los archivos .css en una carpeta de hojas de estilo. Al ver el archivo index.html, generalmente es bastante sencillo encontrar las secciones que desea modificar. En este caso, estoy editando la barra superior para mostrar “Mis noticias” y cambiando los enlaces del menú a diferentes categorías para las que voy a crear páginas de noticias adicionales.

Por lo general, puede encontrar las secciones de la página buscando el

etiquetas los “id =” el parámetro le dice qué elemento CSS se utiliza para definir el formato. Sin embargo, en este caso solo voy a borrar toda la sección definida por “
. Realmente es tan fácil como eliminar la sección de la página..

Lo siguiente que quiero hacer con la plantilla es cambiar la columna de la barra lateral derecha a un flujo de noticias de YouTube. Primero, identifique la sección que desea reemplazar con la

etiquetas de nuevo. He encontrado la sección de la barra lateral derecha dentro de la “barra lateral” etiqueta div.

No me gusta el color de esa sección (es gris y se vería tonto con un video blanco en su interior), así que tengo que cambiarlo a blanco. Encuentra el archivo css principal y busca el ID. encontré “barra lateral” dentro de main.css, y el fondo se establece en #FFF. Para cambiar a blanco, hice este # 000..

Incrustar widgets en tu página personalizada

Ahora viene la parte divertida. Una vez que tenga el formato correcto, puede comenzar a incrustar fuentes de transmisión en su página. Lo primero que quiero hacer es incrustar el elemento de YouTube desde [No más trabajos] Elementos web de Google.

Simplemente seleccione la fuente de noticias que desea y luego copie y pegue el código. De hecho, podría crear toda su página de noticias de transmisión con solo los elementos web de Google utilizando el elemento Google Reader. Sin embargo, quiero mostrar cuántas fuentes están disponibles para las actualizaciones en tiempo real. Antes de continuar, definitivamente asegúrese de tomar el elemento de Google News, y copie y pegue ese código en su página también..

Otro gran recurso para obtener noticias a través de RSS es FeedWind. Me gusta mucho porque solo pegas el feed que deseas, lo personalizas y te da un widget agradable y limpio que puedes incrustar directamente en tu página..

Además, si va a supervisar las noticias dentro de un determinado nicho, no puede olvidar monitorear la búsqueda de Google dentro de ese nicho. Dentro de las Alertas de Google, simplemente seleccione “Alimentar” en el “Entregar a” campo.

Luego, puede usar esa URL de feed en FeedWind para crear su widget de resultados de búsqueda de Google. Ahora que todas estas fuentes de noticias diferentes están incrustadas en la página, la visualización de noticias en tiempo real finalmente está terminada. El menú superior le permite crear varias páginas como esta, con widgets que traen fuentes de noticias específicas.

Y hacerlo es fácil ahora que tienes la primera página principal hecha. Como puede ver, el uso de la plantilla CSS proporciona una página con un formato agradable en el que solo puede insertar sus diferentes fuentes de noticias para obtener una bonita pantalla de noticias en tiempo real en toda la página.

Esto es mejor que la mayoría de las aplicaciones de teletipo de noticias de transmisión por secuencias que encontrará en cualquier lugar de forma gratuita, y también le permite personalizarlo exactamente según sus necesidades: esa es la belleza de usar una página web en lugar de una aplicación..

¿Creaste tu propia página junto con este artículo? ¿Se quedó colgado en algún lugar o descubrió alguna otra fuente interesante para los widgets de transmisión de noticias en tiempo real? Comparte tus ideas en la sección de comentarios a continuación.

Crédito de la imagen: ShutterStock

Explorar más sobre: ​​RSS.