Info o ciastkach

Eeee...
Żeby strona działała fajnie to trzeba zaakceptować obsługę pewnych plików. Jeśli jesteś nienormalny, nosisz czapkę z amelinium i siedzisz w schronie zbudowanym z poduszek to możesz je sobie wyłączyć. Autor strony nie czerpie żadnych korzyści z cookies (twierdzi nawet, że ten komunikat jest głupi), ale, cóż - Unia wymaga. Korzystając z witryny zgadzasz się z polityką cookies.

Wszystko w budowie...

HTML i CSS - podstawowe błędy - raczej unikać

logo html

Tym razem skomentuję pewien kod strony bo z ciekawości zacząłem drążyć. I gdyby to była strona jakiegoś amatora szlifującego swoje webmasterskie zdolności to OK - sprawy by nie było. Tym razem jest to strona placówki która projektowania stron uczy.

Zaczniemy od stylów



background-color:#000;
font-family:Times New Roman;
font-size:20px;
color:#fff;

I co tutaj autorowi przyświecało? Po pierwsze jeśli wartość zawiera spacje to zamyka się tą wartośc w cudzysłów. Tan kod jest błędny i nie zostanie wykoany. Po drugie czcionka "Times New Roman" obecna jest tylko na sprzęcie z Windowsem. Linux, OSX, Android itp odpadają - w dobie smartfonow i tabletów. Rozmiar czcionki jako wartość bezwględna również tak sobie. Ogólnie dla czcionek mamy z góry określone wielkości względne od xx-small po xx-large (chyba webkit obsługuje również xxx-large). Naliczyłem kilka niepotrzebnie użytych wielkości (13px, 15px, 16px, 20px, 25px). Kolor niby ok ale dla wartości skrajnych jak czerń czy biel dobrze jest użyć "black" czy "white", jest to jakoś bardziej czytelne i lepiej rzuca się w oczy.



font-family:"arial black";

A tej czcionki to nie znam. A nawet jakby to zapisać prawidłowo to zgadnijcie jaka druga użyta tu czcionka znajduje się tylko na Windowsie? Może Google Fonts?



.omini:hover {
  color:#000;
  background-color:#fff;
  background-image:none;
}

Ale klasa omini nie posiada tła.



a:link
{
font-size: 20px;
color:#dd7020;
text-decoration: none;
}

Niby wszystko poprawnie ale kto używa pseudoklasy :link? Jeśli napiszemy samo a to i tak tyczy się to wszystkich znaczników w tej pseudoklasie. Mało tego pomijając :link mamy mniejsze możliwości pomyłki. Kolejność dla a to :link,:visited,:hover i :active. Jeśli pomylimy się z kolejnością to przynajmniej a:link powinniśmy kojarzyć bo możemy napisać tylko jako a zapominając o :link.

A teraz html. A tu



<body bgcolor="#000">

Brak doctypu, brak tytułu, brak deklaracji języka strony.



<h>Dane teleadresowe</h>

Takie deklaracje chyba sptykało się w chyba XHTML 4.02 - języku który miał na podstawie stopnia zagnieżdżenia znaczników określać ich wagę. Język się nie przyjął i sam się zastanawiam czy to celowe czy ktoś zapomniał dopisać tutaj cyfry. Deklaracji użytej wersji html nie ma == brak doctype.



<n>TEKST</n>

Nawet nie wiem co to jest. Wiem, że Arthur C. Clarke miał slowotwórcze zdolności ale widzę są naśladowcy.



<tr>
<td width="53" valign="top"><ol start="1" type="1">
<li>&nbsp;</li>
</ol></td>
<td width="252" valign="top"><p>Imię                 nazwisko</p></td>
<td width="360" valign="top"><p align="center">funkcja</p></td>
</tr>

Moje ulubione. I po co ta lista uporządkowana skoro nikt z niej nie korzysta. Poza tym po co lista w tabeli. Czy nie prościej by było tak



class Osoba {
  private $nazwa, $funkcja;
  //w konstruktorze oczywiście metoda odczytywania danych z bazy, ale powiedzmy tutaj zrobimy to z palca

  public function __construct($nazwa,$funkcja){
    $this->nazwa=$nazwa;
    $this->funkcja=$funkcja;
  }

  public function pokazNazwe(){
    return $this->nazwa;
  }

  public function pokazFunkcje(){
    return $this->funkcja;
  }
}

$osoby=[];
$osoby.push(new Osoba("Jurek Morderca","opiekun dzieci rudych"));
$osoby.push(new Osoba("Zenek Nieświeży","maluje akty borsukom"));

echo "<table>";
$i=1;
foreach($osoby as $v){
  echo "<tr>";
    echo "<td>".$i++."</td><td>".$v->pokazNazwe()."</td><td>".$v->pokazFunkcje()."</td>";
  echo "</tr>";
}
echo "</table>";


OK, wygląda na więcej kodu ala faktycznie tak nie jest. Bo gdy chcemy zmienić wygląd tabeli to edytujemy jedynie to co jest w pętli foreach. A gdy chcemy dodać kolejne osoby to dodajemy do tablicy $osoby nową osobę. Można również do klasy Osoby dopisać metody zwracające dane w określony sposob np jako wiersz tabeli czy element listy itp. Zmiana wyglądu całości jest realizowana zmianą jednej linijki.
Druga rzecz do jakiej się tu przyczepię to liczne spacje by imiona i nazwiska wyglądały w miarę równo. Nie tędy droga - to wygląda równo tylko na komputerze na ktorym jest to tworzone - na reszcie - bryndza. No i stylowanie w html. A po co jest niełamiąca spacja jako element listy to chyba nie wie nikt.

A na koniec najfajniejsze - można przeglądać zawartość katalogów. Całość nie jest zabezpieczona. Wpiszecie "strona/grafika" i macie folder bez błędu 403. No i tyle. Autorzy nie rozwinęli skrzydeł na tej stronie więc i komentować za bardzo nie ma już czego. Z wypiekami czekam na aktualizację witryny.

Komentarze (0)

Nikt jeszcze nie dodał komentarza. Możesz być pierwszy.

Napisz komentarz lub zgłoś błąd

Dodane w dniu 23 marca 2017 przez Michał Misztal
Kopiowanie powyższych wypocin dozwolone pod warunkiem podania źródła, znaczy tandemu autor + link do strony