Ostatnio przede mną perspektywa zmiany "na lepsze". Nowo powstająca firma dotąd zajmująca się tworzeniem wszelkiego rodzaju logotypów niekoniecznie na rzecz Internetu postanowiła rozszerzyć działalność i jest zainteresowana zatrudnieniem mnie w charakterze kodera. Jak zdąrzyłem się zorientować, będę ostatnim łańcuchem w procesie tworzenia stron WWW. Nie znaczy to, że nie będę mieć wpływu na proces tworzenia, bo już mi wiadomo, że mogę grafika opieprzyć, jeśli coś zrobi do dupy. Tylko powiedzcie mi, co mam powiedzieć komuś, kto tworzył grafikę wektorową i rzeczywiście nie ma pojęcia w czym rzecz? Zresztą, taki grafik ma też swoje plusy, wkońcu jeśli chodzi o samą grafikę, to posiada duże umiejętności i w dobrych rękach (moich) mógłby się stać zabójczym narzędziem do tworzenia grafiki. Ale ten wpis miał być o czymś innym.
Zadajcie sobie pytanie, kto tworzy sieć. Odpowiedź jest prosta. Programista, prawda? Tymczasem jak jest w rzeczywistości i jak to widzę dość często, programista bywa bardzo często postawiony właśnie jako ostatni w przebiegu pracy. Dlaczego tak jest? To pominę, bo nie mam zamiaru tutaj tworzyć wywodów na temat piękna, sztuki oraz odpowiadać na banalne pytania, że piękno jest lepsze niż jego brak. Miałem za to zamiar napisać na temat swojej frustracji z tym związanej. Czy to jest w porządku? W końcu sieć bez grafików mogłaby istnieć, ale bez programistów (lub koderów) już nie. Ale powód mojej frustracji jest inny. Będę dostawać prace od grafika, który pojęcia nie ma o SEO, usability i kodowaniu/programowaniu. Szlag mnie trafia jeszcze z jednego, cholernego powodu. Dlaczego od kodera wymaga się obsługi programów graficznych, a od grafika nie wymaga się obsługi edytora tekstu? Koder nie powinien nawet dotykać Photoshopa albo GIMP-a. Tymczasem w Polsce rzeczywistość jest inna. Mam nadzieję, że ten post będzie dla niektórych powodem do przemyślenia przebiegu pracy.
Powodem wpisu jest moja frustracja w związku z degradacją, jaką mogę doświadczyć. Tworzyłem strony WWW od podstaw i to było dobre. Dobra strona z kilkoma podstronami powstawała u mnie 3-4 godziny. Tymczasem przekodowanie "prostego" szablonu dostarczonego przez początkującego grafika zajęło mi również cztery godziny. Czas ten sam, a różnicę w efekcie widać. Na dodatek mam pewność, że moja strona wyświetli się we wszystkich przeglądarkach poprawnie, bo nie użyłem na niej żadnego hacku. Druga strona tymczasem ma sporo dość różnie obsługiwanych przez przeglądarki rozwiązań i pomimo sprawdzenie jej w wielu przeglądarkach nadal nie mam pewności, czy wszystko będzie działać prawidłowo.
Jak jest według Was? Koder powinien dostawać szablon do zakodowania, czy grafik powinien otrzymywać instrukcje co do potrzebncyh elementów?
Najnowszy Nightly build Safari, którym obecnie jest wersja z 7 stycznia 2009 ma wsparcie prostych animacji. Są one w 100% oparte na przekształceniach i całkowicie kodowalne za pomocą czystego CSS.
Dzięki prostym deklaracjom możemy zaprojektować np. odbijającą się piłeczkę ping-pongową, odbijający się od lewej do prawej krawędzi okna przeglądarki baner, pulsującą animację, a nawet spadające liście! (Wszystkie te rzeczy są widoczne tylko w Nightly buildzie.
Ja postaram się zaprojektować odbijającą się piłeczkę do ping-ponga. W sumie skorzystam z samouczka CSS animation.
Znalazłem jeszcze jeden ukryty kurs animacji zanikania pojemnika w CSS na blogu WebKita.
Czcionka Coca-Coli to chyba najczęściej poszukiwana czcionka świata. Pamiętam, że jeszcze jako nastolatek sam szukałem (bezskutecznie) tej czcionki do Worda. Dziś, dzięki standaryzacji fontów można tę czcionkę zainstalować pod dowolnym systemem i wykorzystywać np. w programach Word (WordPad, OpenOffice Word Proccesor a także Microsoft Word). Na tym nie koniec, bowiem z powodzeniem czcionki tej można użyć w programach graficznych a także zamieścić na stronach WWW.
Instalacja.
Windows.
Czcionka Coca Cola II jest dostępna w formacie TrueType. Oznacza to, że z powodzeniem można ją zainstalować pod systemem Windows i wykorzystywać w jego podstawowych (WordPad, Paint) i zaawansowanych programach (Microsoft Office Word, AAdobe Photoshop). Jak zainstalować czcionkę pod Windows: http://support.microsoft.com/kb/314960/pl.
Mac.
Z Mac-iem mogą być problemy, bowiem .ttf nie jest typowym plikiem czcionki w tym systemie.
WWW.
Najciekawszą możliwością dla czytelników tego bloga będzie z pewnością instalacja na stronie WWW. Istnieją dwie znane mi metody pozwalające na to:
- @font-face - metoda CSS 3.0; wciąż niewspierana przez wszystkie przeglądarki, zwłaszcza przez Internet Explorer (co prawda IE wspiera @font-face, ale w innym niż .ttf formacie); najprostsza w zastosowaniu
- cufón - metoda javascript; brak możliwości zaznaczania tekstu, ale Google indeksuje bez problemu
- sIFR - metoda javascript, najtruniejsza w zastosowaniu; pozwala na zaznaczanie tekstu
Pod koniec 1996 roku wydano pierwszą oficjalną dokumentację CSS, "Kaskadowe arkusze stylów, poziom 1". Poziom drugi pojawił się zaledwie 2 lata później, dokładnie 12 maja 1998r. Obecnie standardem jest CSS 2.1, która była przez te lata głównie pozbawiana błędów. Obecnie trwają prace nad kolejną wersją, tj. 3.0. Nie jest znana planowana data jej ogłoszenia. Poczyniono jednakże już pewne założenia. Najciekawsze funkcje zaprezentował dziś Smashing Magazine. Ponadto obecną Roadmapę znajdziecie państwo na stronie W3C. Wśród nowych funkcji dostępne są m.in. zaokrąglenia narożników, ramki obrazków, cienie pudełek i tekstu oraz łatwiejsza w zastosowaniu przeźroczystość RGB. Mnie się jednak najbardziej podoba ściąganie własnych czcionek za pomocą prostego kodu, np.
@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}
Przeglądarka sama zatroszczy się o ściągnięcie odpowiedniej czcionki bez jakiejkolwiek ingerencji użytkownika. Niestety znając życie, IE nie obsłuży 80% funkcji, a więc nie pozostaje mi nic innego jak wesprzeć (ku uciesze pana G.) kampanię:
src="http://link.do.skryptu.js" >
Jak zrobić głosowanie za pomocą gwaizdek w HTML/CSS
Jak zrobić gosowanie za pomocą gwiazdek w PHP
Jak zrobić gosowanie za pomocą gwiazdek w PHP wersja 2 poprawiona.
Powyższe przykłady nie są łatwe do zrobienia, wymagają wiedzy i cierpliwości. Jeśli ktoś potrzebuje projekt na wczoraj to może skorzystać z FiveStar. Jest to moduł oryginalnie zaprojektowany przez Lullabot i wspierany przez Acquia. Moduł gwiazdek na Blogger jest dostępny w wersji testowej, ale ja jestem z niego niesamowicie zadowolony. Na dole widać ramkę z proponowanym przez ten moduł wpisem wartym przeczytania.
Wspomnę, że jeszcze, że FiveStar został oryginalnie napisany dla Drupal, a za wspierającą go Acquią stoi sam Buyaert.
Zanim poznałem FiveStar korzystałem z gwiazdek Blogfroga, ale obecnie już z nich rezygnuję, bowiem znam lepsze, a dwa różne systemy głosowania wyglądają głupio.
Niestety nie jestem w stanie przenieść większości menusów na bloga, ponieważ są one mocno zakodowane w html/css. Z pewnością zajęłoby mi to więcej niż dzień.
1. Podświetlane menu
http://www.cssplay.co.uk/menus/visitedmenu.html
2. Wyskakujący opis
http://www.cssplay.co.uk/menus/menuseven.html
3. Pochyłe buttony
http://www.cssplay.co.uk/menus/menutwelve.html
4. Ostatnio popoularne - dodatkowa strzałka po najechaniu kursorem + podświetlenie
http://www.cssplay.co.uk/menus/top_pointer.html
5. Nowoczesne menu 3d
http://www.cssplay.co.uk/menus/pro_horizontal#nogo
6. Schowane menu podwójne
http://www.cssplay.co.uk/menus/tabs_two.html
7. Menu poziome butony 3d
http://www.cssplay.co.uk/menus/centered_sliding_doors.html
8. Nadpisujące się zakładki
http://www.cssplay.co.uk/menus/overlap.html
9. Wysuwane w prawo, przeźroczyste menu
http://www.cssplay.co.uk/menus/side_tabs.html
10. Menu w kształcie wysuwanego języka
http://www.cssplay.co.uk/menus/pull_tabs.html
11. Neonowe menu
http://www.cssplay.co.uk/menus/neon_menu.html
12. Wysuwane w dół menu z przeźroczystością
http://www.cssplay.co.uk/menus/opaque_dl.html
13. Czarno białe obrazki po najechaniu myszą zmieniają się w kolorowe!
http://www.cssplay.co.uk/menus/flickerfree_mk3.html
14. Menu z wyskakującymi obrazkami
http://www.cssplay.co.uk/menus/enlarge.html
15. Wielopoziomowe menu
http://www.cssplay.co.uk/menus/dd_valid.html
16. Dodatkowe menu rozwijane pod hover
http://www.cssplay.co.uk/menus/dd_valid_2.html
17. Eleganckie menu kaskadowe (podobne do poprzedniego)
http://www.cssplay.co.uk/menus/drop_line.html
18. J/w
http://www.cssplay.co.uk/menus/pro_dropline.html
19. j/w, ale z przeźroczystością
http://www.cssplay.co.uk/menus/pro_dropline7.html
20. Kaskadowe z kolorowymi obrazkami na hover
http://www.cssplay.co.uk/menus/pro_dropline8.html
21. Styl Apple
http://www.cssplay.co.uk/menus/pro_line_down_fly.html
22. Kolejne profesjonalne i całkiem ładne menu kaskadowe z dropline
http://www.cssplay.co.uk/menus/pro_left_right_line.html
23. Bardzo ładnie wyglądające profesjonalne menu, przeźroczystość i flyout
http://www.cssplay.co.uk/menus/flyout_horizontal.html
24. Komercyjny dropdown z przeźroczystością
http://www.cssplay.co.uk/menus/drop_variation.html
25. Profesjonalny dropdown podwójny
http://www.cssplay.co.uk/menus/pro_drop7
26. Wariacja na temat dropdown
http://www.cssplay.co.uk/menus/skeleton2.html
27. Regał w bibliotece
Trik ten działa tylko w przeglądarkach Safari i FireFox (co do Chrome to nie wiem, trzeba sprawdzić).
div {
background: #eee;
border: 1px solid #bbb;
padding: 15px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
Voila! Teraz użytkownicy Chrome, Safari i FireFoxa mają zaokrąglone narożniki.
Post oryginalny: http://stylizedweb.com/2008/08/19/css3-rounded-corners/
Na stronie http://html-color-codes.com/ można odnaleźć kody kolorów na stronę www zapisane w języku html. Dodatkowo na w/w stronie mamy do zakupienia plakaty z symbolami kolorów i ich kodem.
