Jak przygotować układ strony zgodny z „responsive design”?

Mamy eksplozję smarfonów i tabletów. Jak nigdy przedtem hasło publikuj raz oglądaj wszędzie stało się aktualne. Każda strona może zostać odwiedzona przez użytkownika, który ma mniejszy ekran niż monitor komputera. Nie będę się tutaj zajmował technikami różnicowania układu strony w zależności od rozdzielczości ekranu takimi jak „media queuries”. Chcę przedstawić najważniejsze według mnie reguły, którymi należy kierować się przy budowie układu żeby osiągnąć elastyczność dostosowania do wyświetlania w zależności od rodzaju urządzania.

Najważniejsze zasady:

• Układ strony należy budować semantycznie:
  • Użyć tagów html5 - nav, article, aside, section i div dla elementów układu.
  • Niezależnie od ilości kolumn przy dużej rozdzielczości należy ułożyć kolejność wyświetlania się zawartości zgodnie z kolejnością jej prezentacji na najmniejszym docelowym ekranie np. 200px szerokości.
  • Nie używać tabel do budowy układu
• Projektowanie układu z założenia elastycznego. Zamiast definiowania stałej szerokości użycie reguły CSS min-width i max-width dla kontenera utrzymującego cały układ. Jeżeli jesteśmy w stanie zbudować stronę, która wyświetla się prawidłowo np. pomiędzy 960px szerokości a 800px to mamy już osiągnięte „responsive design” dla starszych monitorów i mniejszych tabletów bez potrzeby dodatkowych reguł CSS.
• Przejście z pikseli na relatywne jednostki % i em. Jeżeli uda się nam określić szerokości wewnętrznych elementów szkieletu strony w procentach to mamy znacznie mniej pracy z dostosowaniem do urządzeń o niestandardowych rozdzielczościach. Czcionki definiujmy wyłącznie za pomocą jednostek em.
• Zerowanie CSS według naszych potrzeb. Dobry punktem startowym jest Eric Mayer reset CSS
• Do rozwiązania problemów z wysokością elementów zawierających znaczniki z regułą float użycie bardzo skutecznej metody clearfix hack
• Podczas budowania układu jak najwięcej reguł CSS pisać niezależnie od rozdzielczości. Jeżeli reguła działa prawidłowo tylko przy dużej rozdzielczości należy próbować ją zmienić na uniwersalną wyświetlającą prawidłowo formatowanie na każdym ekranie. Gdy się nie da, zaznaczyć komentarzem do zmiany przy pisaniu „media queries”.
• Reguły CSS pisać zgodnie z kolejnością znaczników html w budowanej stronie. Kolejność:
  • Zerowanie CSS
  • Reguły globalne np. wielkość czcionki elementów h1, h2 itp
  • Bloki kodu CSS zgodnie z przepływem html. Kolejność bloków zgodna z kolejnością znaczników otwierających.
• Jeżeli musimy użyć tabel do ułożenia treści, tabela powinna się czytelnie skalować do najmniejszej dedykowanej rozdzielczości np. 200px. albo użyć innych technik np. list.
• Nie nadużywać pozycjonowania elementów na rzecz naturalnego przepływu zgodnego z kolejnością znaczników html.
• Oznaczać komentarzem reguły CSS, które będą wymagały zmiany w „media queries” dla osiągnięcia czytelnego układu na mniejszych urządzeniach.
• Do obrazów (tag img) należy dodać reguły CSS: (max-width: 100%; height: auto;), dzieki czemu będą się one skalowały do wielkości elementu nadrzędnego. Innym sposobem jest zastąpienie znacznika img obrazami tła (background-image), które dają większe możliwości kontroli arkuszami CSS.

W tak konstruowanym układzie napisanie „media queries” dla wszystkich docelowych ekranów będzie już tylko formalnością.

Kopiowanie szablonu Joomla! 2.5

Często zdarza się potrzeba skopiowania szablonu żeby wykonać testy bez ryzyka zmiany oryginalnego kodu. Jest to zadanie dość proste tylko należy wykonać kilka czynności wg. następującej kolejności:

• Skopiuj całą zawartość szablonu do nowego folderu w katalogu /templates.
• Otwórz plik templateDetails.xml w edytorze i za pomocą funkcji znajdź/zamień zmień wszystkie wpisy z nazwą oryginalnego folderu na nazwę nowego folderu. Np. beez_20 na beez_20_kopia
• Zmień nazwy plików językowych zgodnie ze zmianami wykonanymi w poprzednim punkcie. Np. en-GB.tpl_beez_20.ini to en- GB.tpl_beez_20_kopia.ini i en-GB.tpl_beez_20.sys.ini to en- GB.tpl_beez_20_kopia.sys.ini
• Skopiuj pliki językowe z katalogu w szablonie do katalogu /language w głównym folderze Joomla!
• W panelu administracyjnym wykryj i zainstaluj. Roszerzenia>Wykrywanie, następnie przycisk Wykryj. Po poprawnym wykryciu szablonu zaznacz go i zainstaluj. Ta operacja spowoduje właściwą aktualizację bazy danych.

Mapa google z wieloma punktami (markerami)

W Internecie jest dużo opisów umieszczania mapy google na własnej stronie. Na ogół są to jednak rozbudowane poradniki przez które trzeba przebrnąć żeby stworzyć własną mapę. Tutaj jest przepis w pigułce. Na jego podstawie możesz umieścić na stronie mapę z dowolną ilością punktów informacyjnych np. oddziały przedsiębiorstwa, punkty odbioru przesyłek, listę ciekawych zabytków na danym terenie, itp. Mapa prezentuje standardowe ikony i okienka informacyjne. Po bardziej wyrafinowane metody sięgnij na inne strony, tu jest prosty, działający od ręki wzorzec.

Żeby mapa działała należy dodać do strony 3 elementy:

• Odwołanie do Google API w sekcji head dokumentu
• Tag div służący jako kontener na mapę
• Skrypt umieszczony przed zamykającym znacznikiem body

Kod z komentarzami do skopiowania na dowolną stronę.

<!DOCTYPE HTML>
<html lang="pl-PL">
<head>
	<meta charset="UTF-8">
	<title>Mapa</title>
	<!-- Załadowanie api ze strony google -->
	<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
</head>
<body>
<!-- Kontener na mapę. Należy mu zdefiniować styl, przede wszystkim wysokość -->
<div id="map_canvas" style="width:100%;height:400px;">Lokalizacja Łazienek Królewskich i Parku Saskiego</div>
<script>
	/*Umieszczamy skrypt przed zamykającym znacznikiem body, mamy pewność, że div z kontenerem na mapę jest załadowany*/
	function map_initialize() {
	var map_options = {
		center: new google.maps.LatLng(52.229482,21.012039),/*Definicja punktu centralnego mapy*/
		zoom: 13, /*Przybliżenie startowe*/
		mapTypeId: google.maps.MapTypeId.ROADMAP/*Rodzaj mapy - ROADMAP, SATELLITE, HYBRID, TERRAIN*/
	};
	/*Inicjalizacja obiektu mapy, jako parametry należy przekazać id div-a i zmienną z opcjami mapy*/
	var google_map = new google.maps.Map(document.getElementById("map_canvas"), map_options);
	/*Obiekt reprezentujący dymek informacyjny, przy starcie mapy niewidoczny*/
	var info_window = new google.maps.InfoWindow({
	content: 'loading'
	});
	/*Deklarujemy tablice do przechowywania parametrów znaczników na mapie*/
	var x = [];//Szerokość geograficzna, wartości dodatnie półkula północna, ujemne południowa
	var y = [];//Długość geograficzna, wartości dodatnie półkula wschodnia, ujemne zachodnia
	var t = [];//Podpowiedź po najechaniu na punkt
	var h = [];//Treść w dymku pojawiającym się po kliknięciu w znacznik
	/*Znaczniki na mapie dodajemy metodą push do tablic x,y,t,h. Można zdefiniować dowolną ilość.*/
	t.push('Łazienki Królewskie');
	x.push(52.215969);
	y.push(21.033103);
	h.push('<p><strong>Łazienki Królewskie</strong><br/>Agrykola w łazienkach królewskich<br/>tel. 22 555 555</p>');
	t.push('Ogród Saski');
	x.push(52.240468);
	y.push(21.007769);
	h.push('<p><strong>Ogród Saski</strong><br/>Centrum ogrodu saskiego<br/>tel. 22 555 555</p>');
	/*Koniec sekcji dodawania znaczników*/

	var i = 0;
	/*Pętla przez wszystkie elementy tablicy t*/
	for ( item in t ) {
			var map_marker = new google.maps.Marker({
			map:       google_map,
			animation: google.maps.Animation.DROP,
			title:     t[i],
			position:  new google.maps.LatLng(x[i],y[i]),
			html:      h[i]
		});
		/*Dodajemy obsługę kliknięcia na markerze - ustawienie treści oraz odkrycie okienka informacyjnego*/
		google.maps.event.addListener(map_marker, 'click', function() {
			info_window.setContent(this.html);
			info_window.open(google_map, this);
		});
		i++;
		}
	}
map_initialize();/*Uruchomienie mapy*/
</script> 

</body>
</html>

Mapa oparta na powyższym skrypcie