Cree una pantalla de teletipo de noticias de página completa con widgets CSS y RSS

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

Si eres un Noticias blogger, la importancia de mantenerse al día sobre las últimas noticias es aún más crítica. Desde que comencé 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. Como utilizo dos pantallas con mi computadora portátil, me di cuenta de que podía configurar una pantalla para que sea exclusivamente para transmitir tickers 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 un flujo muy pequeño de texto entrante o son difíciles de personalizar para que se vean exactamente de la manera que desee. un modo de pantalla completa.

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

Para resolver este problema, me di cuenta de que tendría que construir algo yo mismo. Como realmente no quería tomarme el tiempo para escribir una aplicación completa, decidí crear una página web con las secuencias 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 propia, es una plantilla de página web gratuita basada en CSS (elegí la plantilla de empresa gratuita creada por SliceJack), y una cuenta de Google para acceder a Google Web Elements y Alertas de Google.

Así es como se veía la plantilla comercial predeterminada de SliceJack antes de comenzar a hackear 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 final de transmisión de noticias.

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 en 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 cambiar 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 las etiquetas. los “id =” El parámetro le indica qué elemento CSS se utiliza para definir el formato. Sin embargo, en este caso, voy a borrar toda la sección definida por “. Realmente es tan fácil como borrar 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 una fuente de noticias de YouTube. Primero, identifique la sección que desea reemplazar con las etiquetas nuevamente. Encontré la sección de la barra lateral derecha dentro del “barra lateral” etiqueta div.

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

Incrustar widgets en su página personalizada

Ahora viene la parte divertida. Una vez que tenga el formato correcto, puede comenzar a incrustar feeds de transmisión en su página. Lo primero que quiero hacer es incrustar el elemento de YouTube de [NO YORK WORKS] Google Web Elements.

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

Otro gran recurso para obtener fuentes de noticias a través de RSS es FeedWind Feed Wind: Genere un widget incorporable a partir de fuentes RSS Feed Wind: Genere un widget incorporable a partir de fuentes RSS. Realmente me gusta porque solo pegas el feed que deseas, lo personalizas y te da un widget bonito y limpio que puedes incrustar directamente en tu página.

Además, si va a monitorear las noticias dentro de cierto nicho, no puede olvidar monitorear la búsqueda de Google dentro de ese nicho. Dentro de Alertas de Google, solo 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 de transmisión en tiempo real finalmente ha terminado. El menú superior le permite crear múltiples 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 buena página formateada en la que puede insertar sus diversas fuentes de noticias para una buena visualización de noticias en tiempo real a toda página.

Esto es mejor que la mayoría de las aplicaciones de transmisión de noticias en tiempo real que encontrarás en cualquier lugar de forma gratuita, y también te permite personalizarlo exactamente según tus 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? ¿Te colgaste en alguna parte o descubriste otras fuentes interesantes para widgets de noticias en tiempo real? Comparta sus ideas en la sección de comentarios a continuación..

Haber de imagen: ShutterStock