Stwórz pełnoekranowy wyświetlacz Ticker z widżetami CSS i RSS

Reklama

Jeśli jesteś blogerem, bardzo ważne jest, aby być na bieżąco z najnowszymi wiadomościami z Twojej konkretnej niszy. Ludzie traktują cię poważniej, gdy jesteś jednym z pierwszych, którzy relacjonują ważne wydarzenie - tym bardziej, jeśli zdajesz sobie z tego sprawę, zanim główne media głównego nurtu nawet go złapią.

Jeśli jesteś Aktualności bloger, znaczenie bycia na bieżąco z najświeższymi wiadomościami jest jeszcze bardziej krytyczne. Odkąd zacząłem relacjonować więcej wydarzeń związanych z wiadomościami na własnym blogu, zdałem sobie sprawę, jak ważne jest ciągłe monitorowanie wiadomości w czasie rzeczywistym. Ponieważ używam dwóch ekranów z laptopem, zdałem sobie sprawę, że mogę ustawić jeden ekran wyłącznie do przesyłania strumieniowego wiadomości przychodzących.

Jedynym problemem jest to, że chociaż istnieją przyzwoite aplikacje do przesyłania strumieniowego pojedynczych wierszy wiadomości, takie jak widżety Yahoo lub GlowDart, te wyświetlają albo obejmują tylko niewielki strumień przychodzącego tekstu lub trudno je dostosować, aby wyglądały dokładnie tak, jak chcesz w trybie pełnoekranowym tryb.

Tworzenie własnej pełnej strony Wiadomości w czasie rzeczywistym

Aby rozwiązać ten problem, zdałem sobie sprawę, że sam muszę coś zbudować. Ponieważ tak naprawdę nie chciałem poświęcać czasu na napisanie całej aplikacji, postanowiłem utworzyć stronę internetową z osadzonymi strumieniami RSS. Mógłbym wyświetlić tę stronę, otwierając przeglądarkę w trybie pełnoekranowym.

Narzędzia, których użyłem do stworzenia tej strony, i wszystko, czego potrzebujesz, aby stworzyć własny, to darmowy szablon strony internetowej oparty na CSS (wybrałem darmowy szablon biznesowy utworzony przez SliceJack), a także konto Google umożliwiające dostęp do Google Web Elements i Google Alerts.

Oto jak wyglądał domyślny szablon biznesowy SliceJack, zanim zacząłem hakować kod tła.

Przyznaję, że to moja ulubiona metoda tworzenia stron internetowych. Nienawidzę ponownego wymyślania koła. Ta strona zawiera wszystkie elementy, które chcę zintegrować z moją ostatnią stroną z aktualnościami.

Dwa elementy u góry - główny artykuł i zdjęcie - zamierzam usunąć. To, czego naprawdę chcę użyć, to trzy kolumny na środku strony.

Po pobraniu szablonu na własny komputer plik index.html znajduje się w folderze głównym, a następnie pliki .css w folderze arkuszy stylów. Przeglądając plik index.html, zwykle dość łatwo jest znaleźć sekcje, które chcesz zmodyfikować. W takim przypadku edytuję górny pasek, aby wyświetlić „Moje wiadomości”I zmieniając linki menu do różnych kategorii, dla których zamierzam utworzyć dodatkowe strony z wiadomościami.

Zazwyczaj można znaleźć sekcje strony, szukając

Następną rzeczą, którą chcę zrobić z szablonem, jest zmiana prawej kolumny paska bocznego na strumieniowy kanał informacyjny z YouTube. Najpierw określ sekcję, którą chcesz zastąpić

Nie podoba mi się kolor tej sekcji (jest szary i wyglądałby głupio z białym filmem w środku), więc muszę go zmienić na biały. Znajdź główny plik css i wyszukaj identyfikator. Znalazłem „pasek boczny” w main.css, a tło ustawiono na #FFF. Aby zmienić kolor na biały, zrobiłem to # 000.

Osadzanie widżetów w niestandardowej stronie

Teraz część zabawy. Po prawidłowym sformatowaniu możesz rozpocząć osadzanie kanałów strumieniowych na swojej stronie. Pierwszą rzeczą, którą chcę zrobić, jest osadzenie elementu YouTube [BRAK DŁUŻSZYCH DZIAŁAŃ] Google Web Elements.

Po prostu wybierz źródło wiadomości, które chcesz, a następnie skopiuj i wklej kod. W rzeczywistości możesz zbudować całą stronę z wiadomościami przesyłanymi strumieniowo za pomocą Google Web Elements za pomocą elementu Google Reader. Chcę jednak pokazać, ile źródeł jest dostępnych dla aktualizacji w czasie rzeczywistym. Zanim przejdziesz dalej, koniecznie pobierz Google News Element, a także skopiuj i wklej ten kod na swojej stronie.

Innym doskonałym źródłem informacji o kanałach informacyjnych za pośrednictwem RSS jest FeedWind Wind Feed: Wygeneruj osadzony widżet z kanałów RSS Czytaj więcej . Bardzo mi się podoba, ponieważ po prostu wklejasz wybrany kanał, dostosowujesz go, a to daje ładny, czysty widget, który możesz osadzić bezpośrednio na swojej stronie.

Ponadto, jeśli będziesz monitorować wiadomości w określonej niszy, nie możesz zapomnieć o monitorowaniu wyszukiwania Google w tej niszy. W ciągu Alerty Google, po prostu wybierz „Feed” w polu „Deliver to”.

Następnie możesz użyć tego adresu URL kanału w FeedWind, aby utworzyć widżet wyników wyszukiwania Google. Teraz, gdy wszystkie te różne źródła wiadomości są osadzone na stronie - wyświetlanie wiadomości strumieniowych w czasie rzeczywistym jest w końcu zakończone. W górnym menu można utworzyć wiele takich stron z widżetami, które dostarczają ukierunkowane źródła wiadomości.

Jest to teraz łatwe, gdy masz już przygotowaną pierwszą stronę główną. Jak widać, użycie szablonu CSS zapewnia ładną, sformatowaną stronę, na której możesz po prostu wstawić różne kanały informacyjne, aby uzyskać ładny, całostronicowy wyświetlacz wiadomości w czasie rzeczywistym.

Jest to lepsze niż większość aplikacji do strumieniowego przesyłania wiadomości, które znajdziesz gdziekolwiek za darmo, a także pozwala dostosować go dokładnie do swoich potrzeb - to piękno korzystania ze strony internetowej, a nie aplikacji.

Czy stworzyłeś własną stronę wraz z tym artykułem? Czy odłożyłeś słuchawkę gdziekolwiek lub odkryłeś inne fajne źródła strumieniowych widżetów wiadomości w czasie rzeczywistym? Podziel się swoimi spostrzeżeniami w sekcji komentarzy poniżej.

Źródło zdjęcia: ShutterStock