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

Si eres un bloguero de noticias, la importancia de mantenerse al día con las últimas noticias es fundamental. 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.

Si eres un bloguero de noticias, la importancia de mantenerse al día con las últimas noticias es fundamental.  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.
Anuncio

teletipo de noticias Cuando eres un blogger, es muy importante estar 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 lo capten.

Si eres un bloguero de noticias, la importancia de mantenerte al día con las últimas noticias es aún más crítico. 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 fuera exclusivamente para la transmisión de noticias entrantes.

El único problema es que, si bien existen aplicaciones decentes para transmitir líneas únicas de noticias, como Yahoo Widgets o GlowDart, esas pantallas cubren solo una pequeña cantidad de texto entrante o son difíciles de personalizar para que se vean exactamente como usted desea. un modo de modo de pantalla completa.

Creando tu propia página completa 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 transmisiones RSS incorporadas. 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 comercial gratuita creada por SliceJack) y una cuenta de Google para acceder a elementos web de Google y Alertas de Google

Esto es lo que parecía la plantilla de negocio predeterminada de SliceJack antes de comenzar a piratear el código de fondo.

teletipo de noticias

Este es mi método favorito para crear páginas web, lo admito, odio volver a inventar 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 eliminaré. Lo que realmente quiero usar son las tres columnas en el centro de la página.

teletipo de noticias gratis

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 simple 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 las diferentes categorías para las que voy a crear páginas de noticias adicionales.

teletipo de noticias gratis

Por lo general, puede encontrar las secciones de la página buscando las etiquetas. El parámetro "id =" le dice qué elemento CSS se usa para definir el formato. Sin embargo, en este caso, voy a eliminar toda la sección definida por ". Realmente es tan fácil como simplemente 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 nuevamente la sección que desea reemplazar con las etiquetas. Encontré la sección de la barra lateral derecha dentro de la etiqueta div de "barra lateral".

teletipo de noticias gratis

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

marcador de noticias de escritorio

Incrustar widgets en su página personalizada

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

marcador de noticias de escritorio

Simplemente seleccione la fuente de noticias que desea y luego copie y pegue el código. De hecho, podría compilar toda su página de noticias de transmisión con 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, asegúrese de tomar el Elemento de Google Noticias y copiar y pegar ese código en su página también.

marcador de noticias de escritorio

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

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

Además, si va a supervisar las noticias dentro de un nicho determinado, no puede olvidar controlar la búsqueda de Google dentro de ese nicho. Dentro de Google Alerts, simplemente seleccione "Feed" en el campo "Entregar a".

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

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

teletipo de noticias

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 diversos canales de noticias para obtener una buena visualización de noticias en tiempo real a toda página.

Esto es mejor que la mayoría de las aplicaciones de teletipo de noticias de transmisión 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.

¿Creó su propia página junto con este artículo? ¿Te colgaron en cualquier lugar o descubrieron otras fuentes geniales para los widgets de noticias de transmisión en tiempo real? Comparta sus ideas en la sección de comentarios a continuación.

Crédito de la imagen: ShutterStock

In this article