System newsów

Dla internautów odwiedzających naszą stronę bardzo przydatna może się okazać lista wprowadzonych ostatnio nowości w całym serwisie wraz z ich opisami. Najczęściej tego typu skrypty nazywa się systemem newsów. Umieszcza się ją zwykle na stronie głównej. Maja taką zaletę w stosunku do daty aktualizacji, że nie trzeba przeglądać wszystkich stron, aby znaleźć te, które były ostatnio modyfikowane (co w przypadku słabego transferu i obszernej witryny może dość długo trwać). Natomiast w odróżnieniu od sygnalizowania nowości, system newsów zbiera w jednym miejscu wszystkie informacje wraz z opisami wprowadzonych zmian. Wystarczy spojrzeć i już można szybko przenieść się do nowych stron, klikając odpowiednie odsyłacze.

Wymagana wiedza:

• Odsyłacze
• Wstawianie obrazków
• Podstawy stylów CSS (m.in. arkusze stylów)

Aby wprowadzić system newsów, należy skopiować poniższy kod i zapisać go w pliku z rozszerzeniem *.css - np. news.css:

📋 Zaznacz kod ▶ Edytuj na żywo

/* Tytuł: */
.news dt {
	font-size: 14px;	/* rozmiar czcionki */
	text-align: left;	/* wyrównanie tekstu: left, right, center, justify */
	padding: 5px;	/* margines wewnątrz */
	border-width: 1px;	/* grubość obramowania */
	border-style: solid;	/* styl obramowania: solid, dashed, dotted, double, groove, ridge, inset, outset */
	border-color: gray; /* kolor obramowania */
	font-weight: bold;
}
.news dt, .news dt a:link, .news dt a:visited {
	background: silver;	/* tło tytułu */
	color: #505050;	/* kolor tytułu */
	text-decoration: none;
}

/* Treść */
.news dd {
	background: white;	/* tło */
	color: black;	/* kolor tekstu */
	font-size: 12px;	/* rozmiar czcionki */
	border-width: 1px;	/* grubość obramowania */
	border-style: solid;	/* styl obramowania: solid, dashed, dotted, double, groove, ridge, inset, outset */
	border-color: gray; /* kolor obramowania */
	border-top-width: 0;
	margin: 0;
	margin-bottom: 20px;
}
.news_content {
	padding: 5px;	/* margines wewnatrz */
	text-align: justify;	/* wyrównanie tekstu: left, right, center, justify */
}

/* Data */
.news_date {
	font-size: 11px;	/* rozmiar czcionki */
	text-align: left;	/* wyrównanie tekstu: left, right, center, justify */
	padding: 5px;
	padding-bottom: 0;
}
.news_date span {
	font-weight: bold;
}

/* Obrazek: */
.news_img {
	float: left;	/* ustawienie: left, right */
	margin-right: 10px;
	margin-bottom: 5px;
	border: 0;
}

/* Więcej... */
.news_more {
	font-size: 11px;
	text-align: right;
	margin-bottom: 5px;
	margin-right: 15px;
}

/* Autor */
.news_author {
	font-size: 11px;	/* rozmiar czcionki */
	text-align: left;	/* wyrównanie tekstu: left, right, center, justify */
	border-top-width: 1px;	/* grubość obramowania */
	border-top-style: dashed;	/* styl obramowania: solid, dashed, dotted, double, groove, ridge, inset, outset */
	border-top-color: gray; /* kolor obramowania */
	padding: 5px;	/* margines wewnatrz */
	clear: both;
}
.news_author span {
	font-weight: bold;
}

Wszystkie ważniejsze linijki zostały opisane. Oczywiście powyższe deklaracje można dołączyć do istniejącego arkusza stylów strony.

Dalej wykonujemy analogiczną czynność z kodem przedstawionym poniżej, jednak tym razem zapisujemy go w pliku z rozszerzeniem *.js - np. news.js:

📋 Zaznacz kod

/**
 * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl}
 * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!)
 */

function News(days)
{
	this.config = {

//////////
// Konfiguracja:
'days': 0,	// ilość dni wyświetlania newsów (0 = zawsze)
// Ustawienia domyślne:
'author': '',	// autor
'email': '',	// e-mail	
'img': '',	// obrazek
'width': '',	// szerokość obrazka
'height': '',	// wysokość obrazka
'target': ''	// ramka (target="...")
//////////

	};
	
	this.il_dni = typeof days != 'undefined' ? days : this.config['days'];
	var now = new Date();
	var content = '';
	
	this.dodaj = function(dzien,miesiac,rok, tytul,tresc, adres,ramka, dodal,email, obraz,width,height)
	{
		if (!this.il_dni || (now - new Date(rok, miesiac-1, dzien))/(24*60*60*1000) < this.il_dni)
		{
			if (dzien < 10) dzien = '0' + dzien;
			if (miesiac < 10) miesiac = '0' + miesiac;
			if (typeof dodal == 'undefined') dodal = this.config['author'];
			if (typeof email == 'undefined') email = this.config['email'];
			if (typeof obraz == 'undefined') obraz = this.config['img'];
			if (typeof obraz == 'undefined') width = this.config['width'];
			if (typeof obraz == 'undefined') height = this.config['height'];
			if (typeof ramka == 'undefined') ramka = this.config['target'];
			var link = adres ? new Array('<a ' + (ramka ? ' target="' + ramka + '"' : '') + 'href="' + adres + '">', '</a>') : new Array('', '');
			
			content +=
				'<dt>' + link[0] + tytul + link[1] + '</dt>' +
				'<dd>' +
					'<div class="news_date"><span>Dodano:</span> ' + dzien + '.' + miesiac + '.' + rok + '</div>' +
					'<div class="news_content">' +
						(obraz != '' ? link[0] + '<img src="' + obraz + '" alt="" class="news_img"' + (width ? ' width="' + width + '"' : '') + (height ? ' height="' + height + '"' : '') + '>' + link[1] : '') +
						tresc +
					'</div>' +
					(adres ? '<div class="news_more">' + link[0] + 'Więcej...' + link[1] + '</div>' : '') +
					(dodal != '' ? '<div class="news_author"><span>' + (email == '' || email.indexOf('@') > 0 ? 'Dodane przez' : 'Źródło')  + ':</span> ' + (email.replace(/(^ +| +$)/g, '') ? '<a href="' + (email.indexOf('@') > 0 ? 'mailto:' : '') + email + '">' + dodal + '</a>' : dodal) + '</div>' : '') +
				'</dd>';
		}
	}
	
	this.wyswietl = function()
	{
		if (content) document.write('<dl class="news">' + content + '</dl>');
	}
}

Na początku można ustawić zmienne konfiguracyjne. Np. aby w naszym serwisie nie "straszyły" kilkumiesięczne "nowości", można ustawić przez ile dni od ich wprowadzenia mają się wyświetlać na liście. Potem co jakiś czas można czyścić kod z przestarzałych nowości, które już się nie wyświetlają. Jeżeli wszystkie lub większość newsów będzie dodawała ta sama osoba, można podać domyślnego autora i ewentualnie e-mail. Dzięki temu nie trzeba będzie już tego robić podczas dodawania pojedynczych nowości do listy. Oczywiście jeżeli wybrane newsy będą dodane np. przez innego autora, wprowadzenie konfiguracji domyślnej w tym nie przeszkadza. Dla takich specjalnych pozycji będzie wystarczyło po prostu podać różniące się dane wprost przy dodawaniu newsów - domyślne ustawienia konfiguracji zostaną dla tych różniących się elementów nadpisane.

Następnie w nagłówku dokumentu (wewnątrz <head>...</head>) wklejamy:

📋 Zaznacz kod ▶ Edytuj na żywo

<link rel="stylesheet" href="news.css">
<script src="news.js"></script>

Na koniec pozostało już tylko wstawić w wybranym miejscu strony treści newsów (nowości):

📋 Zaznacz kod

<script>
var news = new News();

/////
// Dodawanie newsów w postaci:
// news.dodaj(dzień,miesiąc,rok,
//   'Tytuł','Treść newsa...',
//   'adres','ramka',
//   'autor','e-mail',
//   'obrazek',szerokość,wysokość);
/////

//////////
// Dodawanie newsów:
news.dodaj(dzień,miesiąc,rok, 'Tytuł', 'Treść newsa...');
news.dodaj(dzień,miesiąc,rok, 'Tytuł', 'Treść newsa...');
news.dodaj(dzień,miesiąc,rok, 'Tytuł', 'Treść newsa...');
//////////

news.wyswietl();
</script>

Kolejne newsy na liście dobrze jest układać w kolejności odwrotnej, tzn. najnowsze na początku. Dzięki temu ostatnie wiadomości będą widoczne już na pierwszy rzut oka.

UWAGA!
Treść newsów musi się znajdować w jednej linijce, tzn. absolutnie niedozwolone jest przełamywanie wiersza klawiszem Enter. Ponadto treść, tytuł ani inne elementy normalnie nie mogą zawierać znaków: "'" (apostrof), "\" (odwrócony ukośnik). Jeżeli musimy ich użyć, należy poprzedzić je dodatkowym znakiem "\" - np. "\'", "\\". Poza tym tytuły newsów nie mogą zawierać znaczników HTML. Można je natomiast wpisywać bez przeszkód w treści newsów, np. w celu pogrubienia tekstu albo wstawienia dodatkowego odnośnika czy obrazka.

Dodatkowo pamiętaj, że dni i miesiące w datach, których numer porządkowy jest mniejszy od 10, nie należy poprzedzać zerem na początku, natomiast rok musi być liczbą czterocyfrową. Poprawnie: 1,2,2003, niepoprawnie: 01,02,03.

Można przenosić do nowej linii poszczególne parametry newsa, które są rozdzielone przecinkami:

📋 Zaznacz kod

news(dzień,miesiąc,rok,
	'Tytuł', 'Treść newsa...',
	'adres', 'ramka',
	'autor', 'e-mail',
	'obrazek', 50,50);

Istnieje wiele sposobów dodawania kolejnych newsów (można łączyć kilka w tym samym skrypcie):

• Data, tytuł, treść:

  📋 Zaznacz kod

  news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...');

• Data, tytuł, treść, adres "Więcej..." (lokalizacja podstrony albo adres internetowy):

  📋 Zaznacz kod

  news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres');

• Data, tytuł, treść, adres "Więcej...", nazwa ramki (lub '_blank' jeśli chcemy wczytać stronę w nowym oknie):

  📋 Zaznacz kod

  news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres','ramka');

• Data, tytuł, treść, adres "Więcej...", nazwa ramki, autor:

  📋 Zaznacz kod

  news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres','ramka', 'autor');

• Data, tytuł, treść, adres "Więcej...", nazwa ramki, autor, e-mail autora:

  📋 Zaznacz kod

  news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres','ramka', 'autor','e-mail');

• Data, tytuł, treść, adres "Więcej...", nazwa ramki, źródło:

  📋 Zaznacz kod

  news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres','ramka', 'źródło',' ');

• Data, tytuł, treść, adres "Więcej...", nazwa ramki, źródło, link do źródła:

  📋 Zaznacz kod

  news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres','ramka', 'źródło','link');

• Data, tytuł, treść, adres "Więcej...", nazwa ramki, autor/źródło, e-mail/link, lokalizacja obrazka newsa (jeśli chcemy podać inny niż domyślny - w początkowej konfiguracji):

  📋 Zaznacz kod

  news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres','ramka', 'autor/źródło','e-mail/link', 'obrazek',50,50);

Aby pominąć jakieś parametry - ponieważ mają się one nie wyświetlać albo odpowiadają nam wartości domyśle wpisane wcześniej w konfiguracji skryptu - należy wpisać zamiast nich liczbę zero (0), a jeśli parametr taki jest objęty w apostrofy, trzeba usunąć jego zawartość pozostawiając tylko dwa apostrofy (''). Jedynie w przypadku podawania źródła zamiast autora, w miejscu e-maila/linka trzeba wpisać spację (' '), jeżeli chcemy pominąć link do źródła. Dzięki temu możemy podać późniejsze parametry, jednocześnie bez określania wcześniejszych, np.:

📋 Zaznacz kod

news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres','', '','', 'obrazek',50,50);

Przykład

Data, tytuł, treść

Dodano: 10.08.2006

news.dodaj(10,8,2006, 'Tytuł', 'Treść newsa...');

Data, tytuł, treść, adres "Więcej..."

Dodano: 09.08.2006

news.dodaj(9,8,2006, 'Tytuł', 'Treść newsa...', '#system_newsow');

Więcej...

Data, tytuł, treść, adres "Więcej...", nazwa ramki, autor

Dodano: 08.08.2006

news.dodaj(8,8,2006, 'Tytuł', 'Treść newsa...', '#system_newsow','', 'Autor');

Więcej...

Dodane przez: Autor

Data, tytuł, treść, adres "Więcej...", nazwa ramki, autor, e-mail autora

Dodano: 07.08.2006

news.dodaj(7,8,2006, 'Tytuł', 'Treść newsa...', '#system_newsow','', 'Autor','jan_kowalski@example.com');

Więcej...

Dodane przez: Autor

Data, tytuł, treść, adres "Więcej...", nazwa ramki, źródło

Dodano: 06.08.2006

news.dodaj(6,8,2006, 'Tytuł', 'Treść newsa...', '#system_newsow','', 'Źródlo',' ');

Więcej...

Źródło: Źródlo

Data, tytuł, treść, adres "Więcej...", nazwa ramki, źródło, link do źródła

Dodano: 05.08.2006

news.dodaj(5,8,2006, 'Tytuł', 'Treść newsa...', '#system_newsow','', 'Źródlo','#system_newsow');

Więcej...

Źródło: Źródlo

Data, tytuł, treść, adres "Więcej...", nazwa ramki, autor/źródło, e-mail/link, lokalizacja obrazka newsa

Dodano: 04.08.2006

news.dodaj(4,8,2006, 'Tytuł', 'Treść newsa...', '#system_newsow','', 'Autor','jan_kowalski@example.com', '../pliki/news.gif');

Więcej...

Dodane przez: Autor