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> <b> <blockquote> <body> <br> <code> <del> <div> <em> Odnośnik (kotwica) Pogrubienie tekstu Komentarz blokowy Ciało dokumentu HTML Przejście do nowej linii Fragment kodu programu Tekst skasowany Sekcja w dokumencie 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> <hr> <html> <i> <iframe> <img> <li> <meta> Definicja informacji o dokumencie Pozioma linia Definicja dokumentu HTML Tekst pochylony Ramka pływająca (iframe) Obrazek Element listy Informacje meta
<ol> <p> <span> <strong> <style> <table> <tbody> <td> <tfoot> <th> <thead> <title> <tr> <ul> Lista numerowana Paragraf Sekcja w dokumencie Tekst silnie wyróżniony Definicja arkuszy styli CSS Tabela Ciało tabeli Komórka tabeli Stopka tabeli Komórka nagłówka tabeli Nagłówek tabeli Tytuł dokumentu HTML Wiersz tabeli 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/