• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Antologia Webdevelopera (9.12.2006)
 

Antologia Webdevelopera (9.12.2006)

on

  • 929 views

Prezentacja na Wydziale Fizyki Politechniki Warszawskiej

Prezentacja na Wydziale Fizyki Politechniki Warszawskiej
9.12.2006 r.

Statistics

Views

Total Views
929
Views on SlideShare
896
Embed Views
33

Actions

Likes
1
Downloads
7
Comments
0

3 Embeds 33

http://lanyrd.com 27
http://www.slideshare.net 3
http://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Antologia Webdevelopera (9.12.2006) Antologia Webdevelopera (9.12.2006) Presentation Transcript

    • Antologia Webdevelopera Wojciech Zając www.xhtmlized.com
    • Webdeveloper kim jest?
    • Krótkie wprowadzenie n/t WWW i przeglądarek
    • Przygotowania do pracy
    • Narzędzia ● Edycja kodu
    • Narzędzia ● Walidowanie, debugowanie na bieżąco
    • Narzędzia ● Przydatne wsparcie online
    • Najpopularniejsze przeglądarki i ich silniki ● Trident ● Gecko ● Presto ● WebCore (KHTML)
    • Narzędzia ● Testowanie... – www.browsercam.com – www.browsershots.org
    • Tworzymy poprawny dokument Struktura Prezentacja Zachowanie
    • Struktura ● HTML ● XHTML ● XML
    • Prezentacja ● CSS
    • Zachowanie ● ECMAScipt ● DOM
    • Struktura
    • S Na dobry początek: deklaracja ● HTML czy XHTML? Strict czy transitional
    • S Na dobry początek: deklaracja ● HTML czy XHTML? Strict czy transitional ● Tryby przeglądarek Quirks i pochodne
    • S Na dobry początek: deklaracja ● HTML czy XHTML? Strict czy transitional ● Tryby przeglądarek Quirks i pochodne ● Konsekwencje Nagłówki, kodowanie, encje
    • S Kolejność w kodzie ● Jak być powinno: – Tytuł strony – Skrót tego, co jest na stronie (op.) – Podstawowa treść – Drugorzędna treść – Nawigacja i inne
    • S Kolejność w kodzie ● Jak jest najczęściej: – Nawigacja (linki, linki, linki....) – Tytuł strony – Drugorzędna treść w miejscu na treść główną – Treść główna – Drugorzędna treść w postaci paska bocznego – Pozostałe informacje niezwiązane ze stroną
    • S Kolejność w kodzie ● Po co?
    • S Kolejność w kodzie ● Po co? ● Jak?
    • S Semantyki ciąg dalszy ● Tagitis ● Divitis ● Classitis
    • S Tagitis ● Przerost formy nad treścią
    • S Divitis ● Bed and Breakfast code ● Brak znajomosci znaczników
    • S Divitis cd. ● <div class='posttitle'>News</div> <div class='posttext'> Tutaj dalsza czesc wpisu. </div> ● <h2>News</h2> <p>Tutaj dalsza czesc wpisu</p>
    • S Classitis ● Nazwy semantyczne zamiast prezentacyjnych ● Myślnik zamiast camelCase
    • S Zapomniane znaczniki ● Dane kontaktowe <address>
    • S Zapomniane znaczniki ● Dane kontaktowe <address> ● Cytaty <q> <cite> <blockquote>
    • S Zapomniane znaczniki ● <abbr> vs <acronym>
    • S Zapomniane znaczniki ● <abbr> vs <acronym> ● <dfn>, <var>, <samp>, <kbd>
    • S Formularze ● Formatowanie
    • S Formularze ● Formatowanie ● Alt, title i value dla input type=image
    • S Formularze ● Formatowanie ● Alt, title i value dla input type=image ● Zaprzeczenie WYSWIG – <label>, <fieldset>
    • S Tabele ● Tabele NIE SĄ złe ● Jedynie ich użycie może być nieprawidłowe
    • Prezentacja
    • P Pixel-precision ● .psd i co dalej...
    • P Pixel-precision ● .psd i co dalej... ● Zależności pomiędzy grafiką i kodem
    • P Tekst ● Definiowanie rozmiarów
    • P Tekst ● Definiowanie rozmiarów ● Definiowanie krojów tekstu
    • P Tekst ● Definiowanie rozmiarów ● Definiowanie krojów tekstu ● Kontrast i zapewnienie czytelności
    • P Grafika ● Nie każdy obrazek nadaje się jako bg
    • P Grafika ● Nie każdy obrazek nadaje się jako bg ● Zdefiniuj wymiary obrazka
    • P Grafika ● Nie każdy obrazek nadaje się jako bg ● Zdefiniuj wymiary obrazka ● Nie lekceważ alt= i title=
    • P Grafika ● Nie każdy obrazek nadaje się jako bg ● Zdefiniuj wymiary obrazka ● Nie lekceważ alt= i title= ● Prawidłowe rollovery
    • P Grafika cd. ● Unikaj punktorów jako list-style-image
    • P Grafika cd. ● Unikaj punktorów jako list-style-image ● Dostosowanie do klientów pocztowych
    • P Grafika cd. ● Unikaj punktorów jako list-style-image ● Dostosowanie do klientów pocztowych ● Zapisywanie do weba, formaty
    • P Grafika cd. ● Unikaj punktorów jako list-style-image ● Dostosowanie do klientów pocztowych ● Zapisywanie do weba, formaty ● Jeden obrazek 3kb lepszy od 3x 1kb
    • P Skalowalność ● Jednostki względne i bezwzględne
    • P Skalowalność ● Jednostki względne i bezwzględne ● Definiowanie wysokosci kontenerów do tekstu jest złe
    • P Skalowalność ● Jednostki względne i bezwzględne ● Definiowanie wysokosci kontenerów do tekstu jest złe ● Wielkość fizyczna okna a zachowanie układu
    • P Image-replacement 1. <h3><span>tekst</span></h3>
    • P Image-replacement 1. <h3><span>tekst</span></h3> 2. <h3>tekst</h3>
    • P Image-replacement 1. <h3><span>tekst</span></h3> 2. <h3>tekst</h3> 3. <h3><span></span>tekst</h3>
    • P Praktyczne porady ● Resetowanie preferencji przeglądarek * {margin: 0; padding: 0;}
    • P Praktyczne porady ● Resetowanie preferencji przeglądarek * {margin: 0; padding: 0;} ● Czytelność kodu
    • P Praktyczne porady ● Resetowanie preferencji przeglądarek * {margin: 0; padding: 0;} ● Czytelność kodu ● Hacki i komentarze warunkowe <!--[if IE]> <link rel="stylesheet" href="ie.css" /> <![endif]-->
    • P Praktyczne porady cd. ● Problemy z floatami – Klasyczny sposób: <div class=”clear”></div>, <br clear=”all” /> .clear {clear: both;} – Clear fix – Nadanie float dla rodzica
    • P Praktyczne porady cd. ● Problemy z floatami – Klasyczny sposób: <div class=”clear”></div>, <br clear=”all” /> .clear {clear: both;} – Clear fix – Nadanie float dla rodzica ● Optymalizacja – Dziedziczenie – Łączenie selektorów i atrybutów
    • P Układ strony ● Fixed czy fluid?
    • P Układ strony ● Fixed czy fluid? ● Prognozy n/t rozdzielczości – 1024x768: 60% – 800x600: 17%
    • Zachowanie
    • Z Nieinwazyjny kod Bardzo źle: <a href="javascript:funkcja()">link</a> <a href="javascript:void(0)" onclick="funkcja()">link</a>
    • Z Nieinwazyjny kod Źle: <a href="#" onclick="javascript:funkcja()">link</a>
    • Z Nieinwazyjny kod Nadal kiepsko: <a href="strona.html" onclick="funkcja(); return false">link</a>
    • Z Nieinwazyjny kod Sposób dobry: <a href="strona.html" class="klasa">cool!</a> js: var linki = document.getElementsByTagName('a'); for(i=0; i < linki.length; i++) { if (linki[i].className=='klasa') linki[i].onlick = klasa; }
    • Z Ingerencja CSS <> JS ● Popularne rozwiązania ● Rekomendowany sposób polepszenia jakości kodu
    • Jak unikać nadmiarowego kodu? <div id=”friendlist”> <a href=”#” class=”menuitem” onclick=” javascript:popUp(jacek.jpg); return false”>Jacek</a> <a href=”#” class=”menuitem” onclick=” javascript:popUp(kasia.jpg); return false”>Kasia</a> </div>
    • Jak unikać nadmiarowego kodu? <div id=”friendlist”> <a href=”jacek.jpg”>Jacek</a> <a href=”kasia.jpg”>Kasia</a> </div>
    • Jak unikać nadmiarowego kodu? CSS: #friendlist a {font-size: 90%;} JS: var links = document.getElementById('friendlist').getElemen tsByTagName('a'); for (var=0; i < links.lenght; i++) links[i].onclick = function() { popUp(this) }
    • SEO, SEM
    • Użyteczność, funkcjonalność
    • Projektowanie zgodne z usability ● Struktura serwisu ● Sortowanie kart ● Persony ● Projektowanie makiet
    • Najważniejsze pojęcia ● Nazewnictwo ● Konwencje – Logo linkiem w lewym górnym rogu – Linki – niebieski kolor, podkreślone – Pojęcie koszyka w handlu internetowym ● Odpowiednie komunikaty ● Efektywne linki
    • Najważniejsze pojęcia cd. ● Struktura serwisu ● Architektura informacji ● Punkty startowe ● Ścieżka okruszków, czyli “jesteś tutaj”
    • Testy użyteczności ● Optymalny zasięg ● Użytkownik nigdy się nie myli ● Ocena heurystyczna ● Każdy test przynosi korzyści ● Harmonogram testów i przekazywanie wniosków
    • Pytania?
    • Dziękuję za uwagę.