„Jak pokroić nieboszczyka – czyli cięcie i kodowanie layoutu” – część 1

I. Prolog

Niniejszym wpisem rozpoczynamy serię dotyczącą cięcia i kodowania layoutu. Przekażę wam większość rzeczy których się nauczyłem, za pomocą prostego języka popartego ilustracjami. Z góry zaznaczam że niektóre metody tutaj zaprezentowane są wykorzystywane właściwie tylko przeze mnie – nie znajdziecie kursów dotyczących owych metod poza tą stroną. Pod koniec kursu będziecie potrafili w miarę płynnie (o ile będziecie ćwiczyli w praktyce, bo jak wiadomo – ona jest najważniejsza) posługiwać się: xHTML1.0 strict (właściwie to wszystkimi HTML’ami < 5, 5 będzie na końcu jako deser), CSS, czystym Javascriptem. Dodatkami będą jQuery i PHP – ten ostatni przynajmniej w minimalnym stopniu trzeba rozumieć do podpinania. Koniec liczby mnogiej, teraz zwracam się do Ciebie, czytelniku.

II. Czego potrzebujesz

  1. Adobe Photoshop CSX – bez tego nic nie zdziałasz. Mogą Ci mówić że jest Gimp i  inne darmowe odpowiedniki. No są, i co z tego? W świecie powszechnej komerchy layout niewykonany w Photoshopie nie jest prawdziwym layoutem. Otwórz pierwszy z brzegu plik PSD z designem w Gimpie – jakieś szarości, niepoucinane warstwy…
    Masz 3 legalne wyjścia (obecnie najnowszy jest CS5):

    • Kupić normalną wersję – koszt ~2.700zł
    • Kupić wersję dla uczniów i studentów (od CS5 można wykorzystywać do celów komercyjnych) – koszt ~1.000zł
    • Trial, reinstall, trial, reinstall, trial…
  2. Edytor do kodu - teoretycznie wystarczy systemowy notatnik, o ile lubisz szukać 4 godziny jednego brakującego znaku. Trochę lepszy jest Notepad++. Optymalny dla Ciebie będzie PSPad. Osobiście polecam program Aptana Studio 3 – potężny kombajn (no, ale używam go do zabawy z Ruby i innymi bajerami, Tobie całkowicie niepotrzebnymi na tym etapie).
  3. Klient FTP – o ile Twój edytor ma zdolność do wrzucania plików na serwer, do przerzucania serwisów/obrazków warto być zaopatrzonym w program typu FileZilla, albo plugin do Firefoxa FireFTP.
  4. Zestaw przeglądarek - Opera, Chrome, IE8, FF3.6 + browsershots.org Mnie taki zestaw wystarcza. Żeby nie było że nie mówiłem: IE6 mamy gdzieś. Chyba że klient wyraźnie wspomni o zgodności z owym. IE8 ma tryb zgodności, który daje tyle co widok IE7.
  5. Firebug - możliwy do „zainstalowania” w każdej przeglądarce, w FF i Chrome jako plugin, w innych jako kod JS odpalany z zakładki.
  6. ColorPicker lub inne tego typu badziewie
  7. Google docs, Microsoft Office, OpenOffice – wybór Twój. Ważne żeby któreś było. Pomaga w organizacji czasu.
  8. Coś z pokroju mindmeister.com – dobre narzędzie do rozplanowywania
  9. Żeń-szeń, witaminy, dużo kawy/zielonej herbaty i cierpliwość

Taka wyprawka wystarczy na ekstremalne warunki poznawania wiedzy.

III. Ciekawe linki

To taka moja mała prewencja – moje GG nie jest centrum pomocy. Jestem zawalony robotą i to i tak cud że znajduję czas by tu coś naskrobać

Masz problem? No to będzie wpi…. Nie no dobra. Napisz w komentarzach, a jak nie to zobacz (a właściwie najpierw przeszukaj podane):

  • google.pl – co tu dużo mówić – tu jest wszystko
  • forum.php.pl – polskie forum pomocy takim ludziom jak Ty
  • stackoverflow.com – angielskojęzyczne, na pomoc zwykle do 10 minut czekasz

Suplementy wiedzy

  • kurshtml.boo.pl – gdyby nie jedna z wcześniejszych wersji tego kursu, nie pisałbym tutaj teraz, tylko grałbym w Assasin’s Creeda czy inne cuś.
  • ferrante.pl – kurs JS na tej stronie jest genialny i prosty. Będę się powoływał na niego później.

Tak więc tym możemy budować jakieś podstawy. Teoretycznie. A właściwie to nawet nie – to coś jak linie pomocnicze w Photoshopie – same nic nie zrobią, ale przyspieszą i poprawią jakość twojej pracy. Już zacząłem mazać layout który będziemy ciachać i wdrażać, paradoksalnie jeśli wyjdzie dobry – będzie na misiur.com.

Przez prawie 2 dni byłem wyłączony z życia, nic nie zrobiłem, jedynie się zwijałem z bólu łba, tak więc przepraszam wszystkich.

Jakby to ktoś rzekł: Stay tuned!

This entry was posted on piątek, Grudzień 10th, 2010 at 01:12and is filed under CSS, HTML, Jak pokroić nieboszczyka, czyli cięcie i kodowanie layoutu, Kursy, Photoshop, Po stronie klienta. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

18 Responses to “„Jak pokroić nieboszczyka – czyli cięcie i kodowanie layoutu” – część 1”

Leave a Reply