Prezentacja dotycząca prostej bazy danych, HTML i CSS
Wprowadzenie
Oto prezentacja multimedialna dotycząca podstaw administrowania, czy też zarządzania własną, aczkolwiek prostą bazą danych. Wydaje się, że określenie "prosta baza danych" uświadamia laikowi, że mamy do czynienia z czymś mało skomplikowanym od strony informatycznej. Faktycznie, niektórzy informatycy twierdzą, że nazwa "baza danych" sugeruje coś bardziej złożonego, patrząc z perspektywy możliwości programowych współczesnej informatyki. Zdaję sobie z tego sprawę, ale wybrałem właśnie tę nazwę, gdyż wydawała mi się, mimo wątpliwości specjalistów, "fajna".
Baza może zawierać różnorodny materiał w zależności od tego, jakim celom powinna służyć. Twórca w tym przypadku decyduje o tym, jaką bazę chce stworzyć.Jednym z kluczowych aspektów jej tworzenia jest projektowanie wyglądu stron (witryn) internetowych WWW. W zasadzie możliwe jest stworzenie prostej bazy danych, stosując do tego celu jedynie język HTML (nawet w najstarszej jego wersji). Witryny internetowe zaprojektowane tylko w HTML1 będą ubogie i proste pod względem graficznym. Będą pozbawione licznych właściwości oraz wartości pozwalających na wszechstronną edycję formatu tekstu i grafiki, jakie zapewnia CSS takich jak : padding (dopełnienie), line-height (wysokość wiersza), letter-spacing (odstęp między literami), text-transform [zapis wszystkich liter wyrazu wielkimi (uppercase) lub małymi literami (lowercase)], text-decoration: none (łącze, link pozbawiony podkreślenia), obramowanie dla wybranych elementów, obiektów w wybranych miejscach strony (border) w postaci linii ciągłej (solid) lub kropkowanej (dotted), grubość linii ciągłej wyrażona w pikselach (np. solid 3px), grubość linii kropkowanej wyrażona w pikselach (np. dotted 5px), grubość ramki otaczającej obrazek na stronie, dokładne określenie położenia elementu na stronie za pomocą marginesów (margin) lub pozycjonowania (position), stworzenie dowolnego koloru tła (background) lub koloru innych elementów z wykorzystaniem nie jednej a kilku opcji.
Linki a prosta baza danych
Strona WWW nie byłaby bez łączy, linków, odniesień tym czym jest, tj. multimedialną platformą, panelem, bazą danych. Łącza zwiększają nie tylko atrakcyjność strony, ale i pozwalają tworzyć logiczną strukturę, powiązanych ze sobą elementów, tj. stron WWW zawierających różną treść : od bardzo prostej (tekst) do coraz bardziej złożonej (zdjęcia, animacje, skrypty, wyszukiwarki, listy dystrybucyjne, forum, czaty, klikometry, sondy internetowe, filmy itp.). Logiczny układ wzajemnie powiązanych linków prowadzących do stron tekstowych, uporządkowanych tematycznie zgodnie z przyjętymi przez twórcę kryteriami jest prostą bazą danych.
HTML a CSS
Język wymyślony przez Erica Meyera określany w skrócie CSS znacznie wzbogacił możliwości prostego języka HTML. W starym HTML (zwłaszcza w wersji 1) nie można było uzyskać żadnych dodatkowych efektów graficznych podczas wskazywania łączy, klikania na nie. Możliwe było jedynie uzyskanie niezmiennie podkreślonego łącza lub też linku takiego samego koloru. Stosując do tego celu CSS, uzyskujemy różnorodne efekty w zależności od tego, co chcemy osiągnąć. Można np. sprawić by klikając na wybierane łącze pojawiało się albo znikało podkreślenie tekstu (tak jak na zaprezentowanych przykładach). Można doprowadzić do tego, by na klikanym tekście łącza pojawiła się np. jakaś grafika; można zmieniać kolorowe tła podczas wybierania linku itp.
Współcześnie standardami przyszłości nazywa się HTML5 i CSS3. Oba te języki programowania mają stać się podstawą nowej generacji aplikacji internetowych. Technologie HTML5 i CSS3 wychodzą również naprzeciw inicjatywie zwiększania dostępności witryn WWW (w skrócie WAI). Jednym z celów, jakim ma ona służyć, jest przeciwdziałanie wykluczeniu cyfrowemu (ang. digital exclusion) oraz nierównemu dostępowi do internetu i technologii cyfrowej (ang. digital divide).
Przykładowe linki
Edukacja specjalna - BAZA DANYCH
Strona osobista
Strona prawdziwego rocka
Edukacja specjalna (Pedagogika specjalna)
LAIBACH
Muzyka czadowa
Efekty koloru tła i innych elementów w CSS
CSS daje możliwość zdefiniowania dowolnego koloru tła oraz innych elementów graficznych i tekstowych zamieszczonych na stronie WWW. Stosując opcję/wartość rgb (skrót rgb pochodzi od pierwszych liter angielskich nazw 3 kolorów podstawowych: red - czerwony, green - zielony, blue - niebieski) można wyrazić wykreowaną barwę stanowiącą właściwość kolor (ang. color) na kilka sposobów, co nie było możliwe w zwykłym języku HTML. Przykłady : rgb (#FFC), rgb (#098) - konfiguracje samych liter lub samych cyfr; rgb (10%,10%,10%) - nasycenie barw wyrażone w udziałach procentowych; rgb (120,110,111) - nasycenie barw wyrażone w liczbach całkowitych. Wykorzystując zaprezentowane sposoby można także definiować kolor tekstu głównego komponentu strony (maintext), linków, odniesień zamieszczonych na stronie (links), nagłówków (headings), ramki, obramowania obrazka (image border). Wywodzące się z HTML elementy, atrybuty, właściwości, znajdujące zastosowanie w CSS to m.in. : img src (umieszczenie obrazka na stronie WWW), h1 (nagłówek 1), color (kolor danego obiektu), text-align (położenie tekstu), div (wyodrębnienie jakiegoś pola, obszaru na stronie), p (element pozwalający na zapis jednego zdania lub tekstu o większej objętości na stronie WWW od tzw. nowego wiersza, tj. w odrębnym paragrafie), br (od ang. break, wymuszony koniec wiersza w dowolnym miejscu, tzw. złamanie linii), a (pojedynczy wiersz na stronie WWW) itp.
CSS i HTML a niewidomi i niedowidzący użytkownicy internetu
To dzięki CSS łącza stały się także bardziej przystępne dla ludzi z wadami wzroku. Można np. tworzyć takie kombinacje linków odwiedzanych (visited) i nieodwiedzanych (link), aby
były one lepiej widziane, co ma szczególne znaczenie dla ludzi niedowidzących. W przypadku niewidomych nowe możliwości w zakresie wskazywania pozwalają np. na dodanie efektów dźwiękowych i innych. Wymagane jest jednak do tego dodatkowe oprogramowanie dające możliwość współpracy z CSS, czyli z kaskadowymi arkuszami stylów.
Duże znaczenie dla niewidomych i słabowidzących użytkowników internetu może mieć w szczególności atrybut alt zawierający tekst opisujący zamieszczony na stronie WWW obraz, który będzie odczytany, gdy będzie on niewidoczny. Tekst zawarty w atrybucie alt nosi nazwę tekstu alternatywnego. Powinien on przedstawiać szczegółowy opis zawartości obrazu, aby mógł on być prawidłowo zinterpretowany przez czytniki ekranowe i wyszukiwarki.
Natomiast HTML5 oferuje dużo większe możliwości niewidomym niż wcześniejsze wersje. Dzięki HTML5 osoby z wadami wzroku, które używają programów pełniących rolę aplikacji odczytujących zawartość ekranu i zamieniających elementy graficzne obecne na stronie WWW w tekst, który jest potem odczytywany przez lektora, będą mogły jeszcze pełniej je wykorzystywać. Wszystko zależy w tym wypadku od projektantów stron, którzy poprzez zastosowanie nowych rozwiązań, mogą przyczynić się do zwiększenia stopnia dostępności stron WWW dla ludzi z niepełnosprawnością wzroku.
O tzw. efekcie przeglądarki
Mając na myśli określenie "efekt przeglądarki" chciałbym zwrócić uwagę na jeszcze jedną kwestię. Otóż projektując strony WWW za pomocą różnych języków programowania nie możemy być pewni, że strona zbudowana przez nas będzie wyglądała tak samo w każdej przeglądarce. Niestety wcześniejsze wersje powszechnie stosowanej na świecie przeglądarki EXPLORER (w szczególności chodzi o wersję 6 i niższe) nie rozpoznają w sposób właściwy wszystkich zdefiniowanych za pomocą CSS atrybutów, właściwości i wartości wyświetlania tekstu i grafiki. Przeglądarka MOZILLA FIREFOX raczej nie deformuje wyglądu strony wyrażonego w języku CSS, choć zależy to w pewnym stopniu od jej wersji.
Inne powody zniekształcenia wyglądu stron w CSS
Czasami strona WWW zaprojektowana w CSS nie jest prawidłowo wyświetlana na ekranie z innych powodów niż te, które dotychczas zaprezentowano. Wygląd stron stworzonych w CSS mogą determinować też: rozmiary monitora (długość przekątnej ekranu), zdefiniowana rozdzielczość w pikselach, opcje karty graficznej, obecność reklam na stronie. Czasami, np. właściwość width: 80% (szerokość jakiegoś elementu na stronie określona procentowo) wyrażona w CSS jest różnie interpretowana przez system w zależności od wymienionych wcześniej przyczyn, co może prowadzić do subtelnego zniekształcenia wyglądu strony. Podobnie jest z właściwościami padding (dopełnienie); wartościami fixed (osadzenie elementu graficznego w określonym miejscu) lub no-repeat (brak powtórzenia obiektu graficznego stosowanego jako tło na stronie); czy z właściwością i wartościami position: absolute; top: 2em (umieszczenie elementu w "bezwzględnej" pozycji lub też jego pozycjonowanie bezwzględne, tzn. przesunięcie go w górę wobec jeszcze innego obiektu, wyrażone, w jednostkach miary em). Omówione fakty nie powinny jednak zniechęcać początkujących projektantów witryn, którzy zdecydowali się na wybór CSS.
Dwie drogi
Wydaje się więc, że projektant stron WWW ma do wyboru dwie opcje :
- Dostosowywać wygląd stron do najpowszechniej używanych przeglądarek np. MICROSOFT EDGE.
- Iść inną drogą, czyli projektować strony WWW w CSS, niezależnie od tego , że efekty wizualne mogą różnić się od siebie, mając na względzie to, w jakiej przeglądarce użytkownik internetu ogląda stronę (MOZILLA FIREFOX, NETSCAPE, OPERA, INTERNET EXPLORER, GOOGLE CHROME, SAFARI). Ważna jest także wersja samej przeglądarki, np. najpopularniejsza przeglądarka INTERNET EXPLORER doszła co najmniej do wersji nr 11. Obecnie jest już stosowana jeszcze nowsza przeglądarka MICROSOFT EDGE, zwłaszcza przez użytkowników Windows 10.
Ja poszedłem tą drugą drogą, ale kwestia ta wymaga szerszej debaty publicznej. Niestety porzucenie dawniejszych rozwiązań, może w niektórych okolicznościach oznaczać niedostępność stron WWW. Taka sytuacja może dotyczyć zwłaszcza użytkowników starszych komputerów, którzy posługują się jeszcze systemami operacyjnymi Windows XP, Windows 7 czy 8. Można wtedy nawet mówić o tzw. wykluczeniu cyfrowym, czyli o ograniczonym lub niepełnym uczestnictwie w społeczeństwie informacyjnym.
Przydatne pozycje bibliograficzne
Na rynku wydawców istnieje wiele książek dotyczących różnorodnych aspektów szybko rozwijającej się dziedziny wiedzy jaką jest informatyka. Według mnie godne polecenia są te, których treść odnosi się do skryptów CSS1, 2 i 3 oraz nowego standardu HTML5. Poniżej zamieszczam wybrane pozycje na ten temat.