Broszura informacyjna do ściągnięcia

System zarządzania treścią (Content Management System, CMS) jest to aplikacja internetowa lub ich
zestaw, pozwalająca na łatwe utworzenie serwisu WWW oraz jego późniejszą aktualizację i
rozbudowę. Prezentacja treści w serwisie internetowym zarządzanym przez CMS odbywa się za
pomocą prostych w obsłudze interfejsów.
Podstawowym zadaniem platform CMS jest oddzielenie treści (zawartości informacyjnej serwisu) od
wyglądu (sposobu jej prezentacji). Po wprowadzeniu nowych informacji przez uprawnionego
redaktora system zapisuje je w bazie danych. Następnie system CMS generuje strony internetowe
na podstawie treści pochodzącej z bazy danych oraz odpowiednich, gotowych szablonów.
Wykorzystanie szablonów stron sprawia, że zmiana koncepcji graficznej całego serwisu sprowadza się
do przygotowania i zamiany szablonu (tzw. skórki/theme’u).
Wolne Oprogramowanie, oprogramowanie open source – termin określający oprogramowanie,
które może być uruchamiane, kopiowane, rozpowszechniane, analizowane oraz zmieniane i
poprawiane przez użytkowników. Oprogramowanie, aby można je było nazwać wolnym, musi
spełniać kilka podstawowych założeń. Przysługujące użytkownikowi wolności to:.
•
wolność uruchamiania programu, w dowolnym celu (wolność 0)
•
wolność analizowania programu oraz dostosowywania go do swoich potrzeb (wolność 1)
•
wolność rozpowszechniania kopii programu (wolność 2)
•
wolność udoskonalania programu i publicznego rozpowszechniania własnych ulepszeń,
dzięki czemu może z nich skorzystać cała społeczność (wolność 3).
Wolności pierwsza i trzecia mogą być spełnione tylko wtedy, gdy dostępny jest kod
źródłowy oprogramowania.
CMSy opensource:
Wordpress:
Joomla!
Drupal
http://wordpress.org
http://www.joomla.org/
http://drupal.org
Pytania, które warto zadać sobie przy projektowaniu strony
1) Kto będzie korzystał ze strony?
2) Jakiego rodzaju treści będą się znajdować na stronie?
3) Jakich narzędzi potrzebuję do moich celów?
4) Jak moi goście będą poruszać się po stronie?
5) Jak będę rozwijać stronę w przyszłości?
Reguły, o których istnieniu warto wiedzieć (ale nie zawsze warto je stosować!)
1. KISS (Keep It Simple, Stupid, czyli nie komplikuj, głupku) - dążenie do utrzymania
eleganckiej i przejrzystej struktury, bez dodawania niepotrzebnych elementów.
2. Worse is better:
•
Nie jest ważne, że korzystanie z systemu będzie trochę trudniejsze, jeśli znacznie uprości
to system. Dzięki temu system powstanie szybciej, będzie zawierał mniej błędów i będzie
łatwiejszy do rozszerzenia w przyszłości.
•
Można poświęcić stuprocentową poprawność na rzecz prostoty. Jeśli coś działa prawie
zawsze, a zawodzi jedynie w przypadkach, które nie są specjalnie ważne, nie warto
komplikować kodu wyjątkami.
•
Kompletność nie jest specjalnie ważna, jeśli miałaby uderzyć w prostotę. System powinien
skupić się na typowych przypadkach.
3. Zasada trzech kliknięć – użytkownik powinien być w stanie dotrzeć do dowolnej
informacji na stronie, wykonując nie więcej niż trzy kliknięcia
Linki:
Sztuka podglądania:
http://www.webdesign.org/showcase/website-showcase/page-1.html
http://www.stylevault.net/
http://www.behance.net/
http://dribbble.com/
http://wordpress.org/showcase/
Kolorystyka:
http://kuler.adobe.com/ - gotowe schematy kolorystyczne
http://colorschemedesigner.com/ - projektowanie schematu kolorów
http://www.colorhunter.com/ - tworzenie palety kolorów na podstawie
dowolnego obrazu
Wybór skórki (theme’u)
•
stały szablon (fixed) – szablon o ustalonej szerokości. Przy zmianie wielkości okna, szerokość
szablonu nie zmienia się.
•
płynny szablon (fluid) – rozmiar elementów zmienia się w zależności od wielkości okna,
jednak układ elementów pozostaje nienaruszony.
•
responsive layout – szablon rozpoznający właściwości urządzenia, na którym jest wyświetlany
i automatycznie dostosowujący wielkość elementów.
Użyteczność (usability) – cechy decydujące o atrakcyjności strony w kontekście jej użytkowania.
Najważniejsze kryteria:
•
nauczalność - jak łatwo jest wykonać proste zadania przy pierwszym kontakcie z produktem
•
efektywność - jak szybko korzystają z produktu użytkownicy, którzy już go znają
•
zapamiętywalność - łatwość przypomnienia sobie korzystania z produktu po dłuższej przerwie
•
błędy - jak często są popełniane i jak łatwo użytkownicy mogą się z nich wydobyć
•
satysfakcja - jak bardzo produkt przyjemny jest w korzystaniu.
Linki:
http://theme.wordpress.com/themes/ - oficjalne, darmowe skórki do wordpressa
http://wpshower.com/ - więcej skórek
http://press75.com/ - przykłady płatnych skórek
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm przykład płynnego layoutu
Baza danych – kolekcja danych zapisanych zgodnie z określonymi regułami. Obejmuje dane cyfrowe
gromadzone zgodnie z zasadami przyjętymi dla danego programu komputerowego.
HTML (HyperText Markup Language) - hipertekstowy język znaczników. HTML pozwala opisać
strukturę informacji zawartych wewnątrz strony internetowej oraz umożliwia określenie wyglądu
dokumentu w przeglądarce internetowej.
HTML nie jest językiem programowania - nie można za jego pomocą wykonywać obliczeń.
Przykładowa strona www w html:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Tytuł mojej strony</title>
</head>
<body>
<h1>Nagłówek mojej pierwszej strony</h1>
<h2>A to nagłówek drugiego stopnia</h2>
<p>
HTML jest łatwy do zrozumienia i <strong>każdy</strong> może się go
nauczyć! <br />
Internet jest doskonałym nauczycielem: <a
href="http://www.wc3schools.com">oto moje ulubione lekcje htmla.</a>.
</p>
</body>
</html>
Powyższa strona w przeglądarce:
Najważniejsze znaczniki (tagi) HTML:
Znacznik
Opis
<!--...-->
Komentarz
<a>
Odnośnik (kotwica)
<b>
Pogrubienie tekstu
<blockquote>
Komentarz blokowy
<body>
Ciało dokumentu HTML
<br>
Przejście do nowej linii
<code>
Fragment kodu programu
<del>
Tekst skasowany
<div>
Sekcja w dokumencie
<em>
Emfaza
<h1>
Nagłówek poziomu 1
<h2>
Nagłówek poziomu 2
<h3>
Nagłówek poziomu 3
<h4>
Nagłówek poziomu 4
<h5>
Nagłówek poziomu 5
<h6>
Nagłówek poziomu 6
<head>
Definicja informacji o dokumencie
<hr>
Pozioma linia
<html>
Definicja dokumentu HTML
<i>
Tekst pochylony
<iframe>
Ramka pływająca (iframe)
<img>
Obrazek
<li>
Element listy
<meta>
Informacje meta
<ol>
Lista numerowana
<p>
Paragraf
<span>
Sekcja w dokumencie
<strong>
Tekst silnie wyróżniony
<style>
Definicja arkuszy styli CSS
<table>
Tabela
<tbody>
Ciało tabeli
<td>
Komórka tabeli
<tfoot>
Stopka tabeli
<th>
Komórka nagłówka tabeli
<thead>
Nagłówek tabeli
<title>
Tytuł dokumentu HTML
<tr>
Wiersz tabeli
<ul>
Lista wypunktowana
Linki:
http://www.w3schools.com/html/default.asp - kurs html z przykładami
http://www.kurshtml.edu.pl/ - kurs html w języku polskim
http://webmaster.helion.pl/index.php/kurs-html - kurs html w języku polskim
http://validator.w3.org/ - narzędzie sprawdzające poprawność kodu
http://www.digitalmediaminute.com/reference/entity/index.php znaki specjalne w
języku html
Kaskadowe arkusze stylów (Cascading Style Sheets; w skrócie CSS) to język służący do opisu
wyglądu stron www.
Arkusz stylów CSS to lista reguł ustalających w jaki sposób ma zostać wyświetlana
przez przeglądarkę internetową zawartość wybranego elementu (lub elementów) HTML.
Można w ten sposób opisać wszystkie właściwości elementów na stronie, takie jak krój czcionki,
kolor tekstu, marginesy, odstęp między wierszami lub nawet pozycja danego elementu względem
innych elementów bądź okna przeglądarki.
CSS został stworzony w celu oddzielenia struktury dokumentu od formy jego prezentacji, dzięki
czemu:
- dokument jest mniej zawiły i można łatwiej wprowadzać w nim zmiany;
- istnieje możliwość określenia, jak dokument powinien wyświetlać się na róznych urządzeniach;
- można zmieniać wygląd wielu stron naraz nie ingerując w ich kod HTML
Składnia CSS:
selektor {
właściwość: wartość;
właściwość: wartość;
właściwość: wartość;
}
p{
color: #000;
margin: 5px;
font-size: 14px;
}
Przykład CSSa zagnieżdżonego w pliku HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Tytuł mojej strony</title>
<style type="text/css">
h1 {
color:red;
margin-bottom: 30px;
}
p{
color:blue;
}
a{
color:red;
font-weight:bold;
}
p.przyklad {
color:#000;
background: #EEE;
}
</style>
</head>
<body>
<h1>Nagłówek mojej pierwszej strony</h1>
<h2>A to nagłówek drugiego stopnia</h2>
<p >
HTML jest łatwy do zrozumienia i <strong>każdy</strong> może się go
nauczyć! <br />
Internet jest doskonałym nauczycielem: <a
href="http://www.wc3schools.com">oto moje ulubione lekcje htmla.</a>.
</p>
<p class="przyklad">
Zmiana wyglądu dokumentu przy pomocy arkusza CSS to czysta przyjemność!
</p>
</body>
</html>
Strona w przeglądarce:
Podpinanie arkusza CSS w zewnętrznym pliku style.css
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Linki:
http://www.w3schools.com/css/ - kurs CSS z przykładami
http://webmaster.helion.pl/index.php/kurs-css - kurs CSS w języku polskim
http://webmaster.helion.pl/index.php/kurs-css/6/151-alfabetyczna-lista-stylow - lista
właściwości i przykłady ich użycia
Pozostałe linki:
Przydatne narzędzia internetowe:
http://www.google.pl/analytics/ - statystyka odwiedzin
https://developers.google.com/speed/pagespeed/ - narzędzie badające prędkość ładowania strony
https://www.google.com/webmasters/ - wsparcie w zarządzaniu witrynami
http://pixlr.com/ - edytor grafiki online
Przydatne programy do ściągnięcia:
http://notepad-plus-plus.org/
http://filezilla-project.org/
Wordpress:
http://codex.wordpress.org/ - pełna dokumentacja wordpressa
http://wordpress.org/extend/plugins/ - oficjalne repozytorium pluginów wordpressa
http://wpninja.pl/ - polski blog dotyczący wordpressa
Inne serwisy, które można wykorzystać przy budowaniu i prowadzeniu strony:
http://www.flickr.com/
http://www.slideshare.net/
http://issuu.com/
https://www.dropbox.com/