Marzec 25, 2010 at 6:27 pm | blog, prywatne | No comment
Nieśmiało wracam do ćwiczeń w illustratorze.. Z optyczną myszką w dłoni w wolnych chwilach z językiem przygryzionym w kąciku ust wykreśliłem takie oto stworzenie:
Proste, szybkie.. ale na początek satysfakcjonujące. Mam nadzieje że już za parę tygodni ta praca będzie mnie lekko zawstydzać i bawić 
Luty 20, 2010 at 8:26 am | blog | No comment
Praca grafika, webdesignera, designera, czy fotografa wiąże się z koniecznością znajomości podstaw kompozycji, ekspozycji oraz pracy z kolorem. Wiele stron może mieć wspaniały kod ale przez złe dobranie kolorów może przeganiać odbiorców zrażonych zbyt mocnymi kontrastami, gryzącymi kolorami, nieadekwatnie dobraną kolorystyką do tematu strony. Powstało i powstaje wiele pozycji książkowych na ten temat ale również w sieci można spróbować wyszukać informacji o standardach w pracy z kolorem. Takim miejscem do szukania inspiracji oraz uczenia się jest z pewnością serwis colourlovers.
Można na nim przeglądać prace tysięcy użytkowników z całego świata w postaci kolorów, palet oraz gotowych wzorów teł (pattern) albo też utworzyć własny profil i samemu spróbować własnych sił w tworzeniu ww. Oczywiście nasze prace również zostaną poddane ocenie innych. Zapraszam do obejrzenia prac w moim profilu.
Przy tworzeniu palet i wzorów pomagają mi liczne narzędzia dostępne za darmo w sieci:
Color Sheme Designer
Color Shemer Gallery
Color Palette Generator
Color Palette Generator (from selected file)
Color Palette Creator
Color Jack
Color Toy 2.0
Pozdrawiam!
Luty 4, 2010 at 4:39 pm | blog | No comment
Horyzontalne menu w CSS to już nie problem. W wyszukiwarce wpisujemy frazę i w wynikach wyskakują nam adresy generatorów tworzących całkiem przyzwoite rozwijane horyzontalne menu w czystym html/css. Ustawiamy je po swojemu, ściągamy plik z kodem i wklejamy go do kodu własnej strony. Proste. Ale jak działa takie menu? To też jest bardzo proste 
Przede wszystkim zacznę od list, ponieważ na nich oparte jest takie menu. Praktycznie każde menu to w rzeczywistości lista osadzona w selektorach
[html]<ul>
<li></li>
<li></li>
…
</ul>[/html]
Tak skonstruowana lista oczywiście wyświetla się w tradycyjny sposób: z góry na dół, z drobnymi oznaczeniami listy. Jak zrobić z niej horyzontalne menu? Należy danym cechom selektorów „ul” i „li” nadać odpowiednie wartości w css. Tak więc żeby lista wyświetlała się w poziomie, selektory <li> muszą opływać się z lewej strony co stanie się gdy nadamy im cechę „float: left” – ustawią się w poziomie. Ale wciąż będą wyświetlać się z jakimiś kropeczkami domyślnie wyświetlanymi dla list w HTML. Aby usunąć te kropeczki należy dla listy <ul></ul> przypisać cechę ”list-style: none” Żeby to wszystko wyglądało lepiej dla <li> nadajemy cechy: wysokość i szerokość za pomocą „width” i „height” oraz „text-align” którym wyrównamy tekst do środka, lewej, prawej czy jak wolimy za pomocą odpowiedniej wartości. Jeśli tekst jest za wysoko albo za nisko równamy go w pionie „padding’iem” Żeby mieć pewność że nasze komórki menu nie będą się rozciągać odkreślamy „display: block;” W ten sposób otrzymaliśmy przyzwoicie wyglądające proste menu.
A teraz rozwijanie… Jak już wcześniej wspomniałem menu to lista. To co zwykle rozwijamy w poziomych menu to też jest lista. Lista w liście.
[html]<ul>
<li>menu główne 1</li>
<ul>
<li>rozwinięcie</li>
<li>rozwinięcie</li>
<li>rozwinięcie</li>
<li>rozwinięcie</li>
</ul>
<li>menu główne 2 komórka</li>
…
</ul>[/html]
Aby edytować w CSS atrybuty takiego selektora-dziecka należy jako cechę podać „li li {}” wtedy wartości przypisane będą do odpowiedniego selektora. Dlaczego nie widać drugiej listy pod-menu kiedy nie najeżdżamy na menu z którego powinna się rozwinąć? Za sprawą cechy: „display: none” której wartość nakazuje nie wyświetlenie się na stronie. Teraz już górki. Żeby lista się wyświetliła gdy nad li znajdzie się kursor dla selektora „li:hover ul” należy nadać cechę „display” o wartości „block” Lista po najechaniu na odpowiedni element menu w którym jest zagnieżdżona wyświetli się. Po zjechaniu kursora zniknie. Kolorystyka tła, typografia, szerokość, wysokość.. to już kwestia potrzeb i gustów..
Życzę powodzenia w samodzielnym tworzeniu rozwijanych poziomych menu dla waszych stron.
Styczeń 29, 2010 at 3:24 pm | blog | 1 comment
Urodzony w Milanie w 1931 roku. Jest znanym na całym świecie, niezwykle wszechstronnym projektantem. Jego życiorys i prace to olbrzymi materiał z którym warto się zapoznać i czerpać inspiracje.. Zapraszam na jego stronę:
Styczeń 26, 2010 at 5:27 pm | blog | 3 comments
Witam serdecznie po dłuższej przerwie. Temat zapewne szeroko opisany w wielu miejscach w sieci… ale dlaczego nie miałbym się podzielić swoją wiedzą po swojemu? Zaokrąglone narożniki obszarów strony to żadna nowość. Wystarczyło ustalić rozmiar danego obszaru i z przygotowanego tła wyciąć programem graficznym narożniki według własnego uznania, następnie przypisać tak przygotowane tło dla danego obszaru który w rzeczywistości był.. kwadratowy.
Obecnie, wraz z rozwojem CSS i HTML nastąpiła w tym temacie poważna zmiana. Najprawdopodobniej większość użytkowników internetu zrezygnowała z cierpień jakie niosło ze sobą przeglądanie zasobów za pomocą przeglądarki Internet Explorer 6 i ma albo najnowszą wersję IE bądź też inną np. Firefox, Opera, Chrome.. czy inne. Praktycznie wszystkie aktualne wersje przeglądarek mają zaimplementowaną obsługę CSS3 czyli wersji CSS która pozwala na zaokrąglone rogi. Działa to lepiej lub gorzej, najważniejsze że już działa.
Przykład:
Jak zamienić taki obrazek:
w to:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in imperdiet risus. Fusce nunc libero, condimentum non ultrices eget, malesuada quis tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut sed neque ligula, ultricies lobortis libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
bez zabawy z programami do graficznej edycji…
Kod html:
Kod css:
#radius_corner {
display:block;
width:600px;
background: url(image.jpg) center;
-moz-border-radius:3em 0 3em 0;
border-radius:3em 0 3em 0;}
p#paragraf {
padding:3em;
text-align:justify;
font-family:verdana sans-serif;
color:white;
gdzie „border-radius” określający zaokrąglenia został użyty podwójnie dla Firefoxa (z przedrostkiem „-moz-” oraz Chrome. Paragraf obrzuciłem spadem „padding” 3em tak żeby nie wyjeżdżał poza obszar narożników.
Przypominam o zasadach wpisywania wartości:
-moz-border-radius-bottomleft ustawia zaokrąglenie dla dolnego lewego rogu.
-moz-border-radius-bottomright ustawia zaokrąglenie dla dolnego prawego rogu.
-moz-border-radius-topleft ustawia zaokrąglenie dla górnego lewego rogu.
-moz-border-radius-topright ustawia zaokrąglenie dla górnego prawego rogu.
Pozdrawiam!
Styczeń 25, 2010 at 10:07 am | blog | No comment
Linux… Nie! Postanowiłem że nie będę się rozpisywał na temat tego czym jest Linux, z czym się go je i dla kogo jest przeznaczony. Zostało już to możliwie obszernie i wyczerpująco opisane na setkach stron i forach internetowych. Obszerne informacje na temat tego systemu można przykładowo znaleźć na: linux.pl, tudzież jakilinux.org oraz wielu, wielu innych. Zakładam więc, że po przyjemnej lekturze kilku z tych stron, pozostanie paru śmiałków chcących zetknąć się z jedną z wielu dystrybucji.. Choćby tylko po to żeby zobaczyć jak to wygląda w praktyce. Ciekawość ludzka rzecz. Rzecz jasna na “spróbowanie” może nam wystarczyć płyta z wersją Live danej dystrybucji… Ale jak dla mnie to troszkę ma zbyt zawężone możliwości. Załóżmy że Linux mi się spodobał i chcę go dłużej testować, pomieszać w nim, a może nawet zepsuć Przydałaby się instalacja systemu na osobnym nośniku z możliwością dokonywania konkretnych zmian.. Instalacja systemu na jakiejś przenośnej pamięci masowej… Serwis pendrivelinux.com został stworzony właśnie pod kątem takich instalacji przeróżnych dystrybucji na pendrive. Można tam znaleźć bardzo dużo tutoriali, instrukcji, poradników dotyczących uruchamiania linux z pamięci USB. W języku angielskim i najczęściej dosyć czasochłonne. Czy nie można prościej? Można! Poświęcę dzisiaj troszkę czasu na przedstawienie wam jak szybko można uruchomić Linux z pamięci masowej, dysku zewnętrznego/wewnętrznego. Wszystko dzięki Tomášowi Matějíčkowi który stworzył w oparciu o jedną z najstarszych dystrybucji Linuksa Slackware – dystrybucję SLAX. To na niej się skoncentrujemy przede wszystkim. A to ze względu na bezproblemowość i szybkość z jaką możemy uzyskać sprawny, bootowalny, dość przyjemny jak na “pierwszy raz” system Linuksowy… nienaruszający zasobów naszego komputera domowego. Do dzieła! Czego potrzebujemy? Przede wszystkim pendrive. Najlepiej 2-4 GB. Sformatowany pod system plików FAT32 najlepiej.. Oraz sam Slax, który możemy pobrać ze strony dystrybucji:
Strona główna www.slax.org
..do wyboru jest pobór obrazu płyty (.iso) który możemy wypalić na czystej płycie CD i korzystać z systemu bootując go z płyty oraz wszystko to samo tylko spakowane do tar’a. Ja polecam ściągnięcie wersji “na USB” w pliku spakowanym .tar który możemy rozpakować różnymi programami, np. 7zip, Total Commander, WinRAR etc.
1. Przygotuj pendrive 256 MB ~ 4 GB, bądź partycję na dysku zewnętrznym, formatując ją do systemu plików FAT32.
2. Ściągnięty plik slax-x.x.x.tar (gdzie x – numer dystrybucji, obecnie jest to slax-6.1.1.tar ) wypakowujemy bezpośrednio na pendrive/partycję.
3. Po rozpakowaniu się do przenośnej pamięci (partycji) pojawią się na niej dwa foldery: “boot” i “slax”. Wchodzimy do folderu “boot” i uruchamiamy plik bootinst.bat Uruchomi się powitalne okno DOS:
Powitalne okno DOS
Zostajemy poinformowani że program który właśnie uruchomiliśmy przygotuje partycję do bootowania systemu SLAX. Pojawia się również ostrzeżenie o tym że jeżeli na tej samej partycji znajduje się Windows bądź inny system operacyjny nie będzie się uruchamiał gdyż nadpisane zostaną sektory dysku (MBR) odpowiedzialne za rozruch systemu. Na końcu poproszeni zostajemy o naciśnięcie jakiegokolwiek klawisza (poza [x]) w celu wykonania dalszych operacji bądź wciśnięcie klawisza [x] w celu anulowania operacji. Upewniamy się że litera dysku jest poprawna i klikamy enter.
W oknie pojawi się napis…
Ustawianie bootowania na pendrive/partycji
…informujący że program właśnie wykonuje swoje zadanie :]
Po chwili w oknie znowu następują zmiany i pojawia się następująca treść:
Informacja o sprawnym zakończeniu wykonywania operacji i prośba o wciśnięcie jakiegoś klawisza w celu zamknięcia programu
…klikamy enter albo spacje albo co popadnie i okno automatycznie się zamknie. Nasz przenośny dysk z systemem SLAX jest gotowy do pierwszego uruchomienia. W tym celu należy ponownie uruchomić komputer i przy jego uruchamianiu wejść w menu bootowania. Najczęściej jest to klawisz F8 albo F12, ale to może być różnie w zależności od producenta płyty głównej i wersji biosu… Wybieramy nasz pendrive… kilkamy enter i nasz SLAX powinien rozpocząć uruchamianie. Po kilkunastu sekundach pojawi się plansza wyboru trybu w którym ma się nasz slax uruchomić:
Powitalne okno wyboru trybu uruchomienia SLAX
Klikamy enter niczego nie zmieniając. Po chwili system jest już w pełni gotowy do pracy! Miłej zabawy!!!
System SLAX zaraz po uruchomieniu
Kilka przykładowych programów
Slax jest darmowym system operacyjnym. Jego surowa wersja waży zaledwie 190 MB, ale na stronie istnieje możliwość rozbudowania systemu przed ściągnięciem (build slax/Zbuduj) ale radziłbym ostrożność w dodawaniu setek programów – nieoczekiwanie nasz SLAX może urosnąć do kilku gigabajtów danych. Jeśli chodzi o taką opcję SLAX jest pionierem. Ostatnio SUSE, wspaniała dystrybucja, rozpoczęła projekt susestudio.com, ale efektów jeszcze nie miałem czasu sprawdzić. Jak tylko to uda mi się zrobić coś skrobnę..
Jeśli po raz pierwszy zainstalowałeś Linux, jeśli Ci się spodobał i chcesz się zagłębić w meandrach pingwinowskich rozwiązań – korzystaj z pomocy forów, google, stron… I nigdy nie daj się wciągać w dyskusję który system rządzi! Bo systemy operacyjne to nie partie polityczne… A takie trollowe dyskusje nigdy do niczego poza pieniactwem nie prowadzą.
© Copyright 2011 Jacek Muda
