Uwagi po I projekcie

Ogólne

1. Głowny plik witryny powinien nazywać się index.htlm, index.htm, index.php
2. Poprawna struktura katalogów i plików:
   1. [css] : w tym katalogu umieszczamy arkusze styli
   2. [img] : tu umieszczamy nasze obrazki
   3. [js] : tu umieszczemy skrypty
   4. index.html
   5. ...
3. Unikaj konstrukcji <tag style = "...."> w pliku HTML.
4. Poprawny sposób robienia nagłowka strony

   <header id="main-header">
     <h1>Jan Kowalski</h1>
     <p>Przygody z edukacją</p>
   </header>
   

   #main-header h1 {font-size: 2em;}
   #main-header p  {font-size: 1.2em;}
   

5. Nagłowki h1, ...., h6

   The six heading elements, H1 through H6, denote section headings. Although the order and occurrence of headings is not constrained by the HTML DTD, documents should not skip levels (for example, from H1 to H3), as converting such documents to other representations is often problematic. W3C

   There are six levels of headings in HTML with H1 as the most important and H6 as the least. W3C

   We do use H tags to understand the structure of the text on a page better, John Mueller, Google

   To jest więc całkowicie złe rozwiązanie:

   <header id="main-header">
     <h1>Jan Kowalski</h1>
     <h3>Przygody z edukacją</h3>
   </header>
   

6. Minimalizacja css (329/176)

   h1 {color: #003462; font-size: 3.00em;}
   h2 {color: #003462; font-size: 2.50em;}
   h3 {color: #003462; font-size: 2.00em;}
   h4 {color: #003462; font-size: 1.75em;}
   h5 {color: #003462; font-size: 1.50em;}
   h6 {color: #003462; font-size: 1.25em;}
   

   h1, h2, h3, h4, h5, h6 {color: #003462;}
   h1 {font-size: 3em;}
   h2 {font-size: 2.5em;}
   h3 {font-size: 2em;}
   h4 {font-size: 1.75em;}
   h5 {font-size: 1.5em;}
   h6 {font-size: 1.25em;}
   

7. Minimalizacja css - II

   .info{padding: 0.5em 1em 0.5em 1em;}
   .warning {padding: 0.5em 0.5em 0.5em 0.5em;}
   p {padding: 0.5em 0.75em 1.5em 0.25em;}
   .alfa{margin: 0em 0.5em;}
   

   .info{padding: .5em 1em;}
   .warning {padding: .5em;}
   p {padding: .5em .75em 1.5em .25em;}
   .alfa{margin: 0 .5em;}
   

   Okazuje się, że może zmniejszyć plik css o kilkanaście procent.

8. Poprawne stosowanie znaczników semantycznych

   <header>
       <h1>Najważniejszy nagłówek strony</h1>
       <p>z dodatkową informacją</p>
       <nav> ... </nav>
   </header>
   
   <article>
       <header>
         <h2>Tytuł artukułu</h2>
         <p>Jak Kowalski</p>
       </header>
       <p>...Lorem Ipsum dolor set amet...</p>
   </article>
   
   <article>
       <h2>Tytuł artukułu</h2>
       <p>...Lorem Ipsum dolor set amet...</p>
   </article>
   
   <article>
       <h2>Tytuł artukułu</h2>
       <p>...Lorem Ipsum dolor set amet...</p>
       <section>
         Lorem Ipsum dolor set amet
       </section>
       <section>
         Lorem Ipsum dolor set amet
       </section>
   </article>
   

   Rule of thumb: Jeśli fragment nie wymaga headera, to stosuj section.

9. Rozmiary plików graficznych
   Typowe rozdzielczości dla niektórych popularnych rozmiarów ekranu:
   • Ekran 19-calowy (standardowy): 1280 x 1024 piksele
   • Ekran 20-calowy (standardowy): 1600 x 1200 pikseli
   • Ekran 22-calowy (panoramiczny): 1680 x 1050 pikseli
   • Ekran 24-calowy (panoramiczny): 1900 x 1200 pikseli

   Załóżmy, że masz plik rozmiaru 6000 x 2500 pikseli; jest on rozmiaru 2MB !!!; jeśli zastosujemy kompresję do rozmiaru 2000 x 833; to rozmiar pliku będzie 3² = 9 razy mniejszy, więc będzie miał około 220 kB !!!.
   W większości przypadków można manipulując jakością kompresji (np. przy plikach typu .jpg) jeszcze bardziej zmniejszyć rozmiar.

10. Typowy błąd w konstrukcji menu
    1. Umieszczenie linku
       <li><a href="index.html">Strona główna<a></li>
       na stronie index.html jest błędem
    2. Można tak <li class="non-active">Strona główna</li>
    3. Można też tak (HTML 5.1) <li><a>Strona główna<a></li> - ale nie jest dla mnie pewne czy W3C nie zabroni stosowania tego rozwiązania w przyszłości
    4. albo tak
       <li><a href="javascript:void(0);">Strona główna<a></li>
       to jest często stosowane, ale sprzeczne z zaleceniami W3C
    5. UWAGA: rozwiązanie style = "pointer-events: none;" nie jest poprawne.
    6. UWAGA: rozwiązanie <li><a href="#">Strona główna<a></li> również nie jest poprawne
    Rozwiązanie z linijki (2) jest najlepsze !!!!

Don't Repeat Yourself

<style>
html {
 box-sizing: border-box; 
 overflow-y: scroll;
 font-size: 100%;
 font-weight: normal;
 vertical-align: baseline;
 background: transparent;
}
*, *:before, *:after {
box-sizing: inherit;
}
...
</style>

<style>
html {
 box-sizing: border-box; 
 overflow-y: scroll;
 font-size: 100%;
 font-weight: normal;
 vertical-align: baseline;
 background: transparent;
}
*, *:before, *:after {
box-sizing: inherit;
}
...
</style>

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>UWAGI</title>
  <link href='css/mojStyl.css' 
    rel='stylesheet'>
  ...
</head>  

Keep It Simple, Stupid

<div class="col-4-12">
  <section>
    ....
  </section>
</div>

<section class="col-4-12">
  ....
</section>

<div class="row">
  <nav class = "col-6-6">
    <ul>
      <li><a href="index.html" >Główna </a></li>
      <li><a href="studia.html">Studia </a></li>
      <li><a href="hobby.html" >Hobby  </a></li>
    </ul>
  </nav>
</div>

<nav class="row">
  <ul>
    <li><a href="index.html">Główna</a></li>
    <li><a href="studia.html">Studia</a></li>
    <li><a href="hobby.html">Hobby</a></li>
  </ul>
</nav>

Dont Make Me Think

Autor: Steve Krug - !!! przeczytaj tę książkę !!!

Przycisk powrotu na główną stronę

Użytkownik powinien zawsze dobrze wiedzieć gdzie się znajduje (np. ten sam główny nagłowek stron + podtytuł wyjaśniający na której podstronie aktualnie się znajduje) oraz jak może wrócić na główną stronę.

Nie należy polegać na przycisku "BACK" przeglądarki !!! Wielu ludzi nie wie o jego istnieniu.

Można też tak

Ważne są delikatne odstępy.

Wariant "light navigation"

Można też tak

Ważne są duże odstępy

Metoda "Breadcrumb Navigation"

• Strona główna
• Fotografie
• Lato 2017
• Grecja

Stosować ją warto przy stronach o dużej głębokości

Make it obvious what’s clickable

Listy przycisków

Jeśli robisz listę linków z <ul> lub <ol> to postaraj się aby to nie była "wyliczanka" - użytkownik od razu ma się domyśleć, że jest to lista linków.

Wzróć uwagę na zmianę kursora: .button{...; cursor: pointer;}

ZASADA: Ludzie nie czytają stron

Ludzie nie czytają stron. Ludzie strony skanują

ZALECENIA: Usuń zbędne słowa

Można tak

Misją Wydziału Podstawowych Problemów Techniki jest zapewnienie wysokiego poziomu kształcenia i prowadzenie badań naukowych w zakresie nauk ścisłych: fizyki, matematyki i informatyki, a także nauk technicznych związanych z inżynierią biomedyczną. Wiedza i kultura techniczna zdobywane podczas studiów oraz udział w badaniach naukowych przygotowują przyszłych absolwentów WPPT do aktywnego uczestnictwa w rozwoju technicznym i ekonomicznym kraju. Wiedza i umiejętności zdobywane i rozwijane na Wydziale przy współpracy z zewnętrznymi ośrodkami naukowymi i dydaktycznymi, pozwalają przyszłym absolwentom rozumieć, śledzić i współtworzyć szybko rozwijające się dziedziny naukowe, nowe technologie i zaawansowane technicznie urządzenia, metody pomiarowe i diagnostyczne, algorytmy i zaawansowane oprogramowanie.

Jak rozumiemy powyższy tekst ?

Kilka innych zasad

Break up pages into clearly defined areas

Keep the noise down to a dull roar