Netsi.pl

31 marca 2016 przez Comandeer | Opublikowany w Strony WWW

Tagi: ,

0

Kiedyś, dawno, dawno temu, stworzyłem sobie listę stron, które warto by ocenić. Były to prawdziwe perełki, na które nadziewałem się od czasu do czasu. Lista puchła, a jakoś w ogóle nie kwapiłem się, by opisać choćby jedną pozycję z niej… Aż do dzisiaj. Sięgnąłem do moich tajnych notatek i postanowiłem wybrać coś z mojej kolekcji. Wybór padł na Netsi.pl.

  • Strona na pierwszy rzut oka przypomina stare dobre strony z początków tego wieku. Wygląd jest wręcz wzorcowym przykładem tego, jak wyglądały wówczas strony.
  • Żaden element na stronie nie wydaje się interaktywny. Nic się nie zmienia po najechaniu – jedynie zmiana kursora myszki sugeruje, że jakiś element jest klikalny. Niby nie jest to błąd, ale jednak… anachronizm.
  • Na szczęście zachowane jest także domyślne zachowanie Tab-a – duży plus, jeśli chodzi o dostępność.
  • Bardzo ciekawą rzecz można znaleźć w stopce:

    Serwis prawnie chroniony Netsi.pl 2005-2008 ©

    Czyżby martwa strona?

  • Wersja mobilna/responsywna nie istnieje. A szkoda (choć nic dziwnego, sądząc po wyglądzie i informacji w stopce).
  • netsi.pl przekierowuje na www.netsi.pl. Wygląda na poprawnie zrobione przekierowanie.
  • W sumie tylko tyle o wyglądzie. Przejdźmy do kwestii technicznych. Na początku walidacja. Wszystkie błędy są spowodowane… przestarzałym kodem. Co ciekawe, ten sam przestarzały kod radzi sobie całkiem nieźle w teście szybkości PageSpeed Insights od Google.
  • DOCTYPE wskazuje na XHTML 1.0 Transitional, czyli tamtą epokę. Obecnie powinno się stosować wyłącznie DOCTYPE HTML5:

    Is there a use in using HTML4/XHTML doctypes?

    There’s absolutely no reason whatsoever for using an HTML4 doctype. Just put the <!DOCTYPE HTML> doctype on your HTML documents and make sure they’re served as text/html and be done with it. Move on with your life.[…]

    Steve Faulkner, HTML5 – Check it Before you Wreck it with Mike[tm] Smith

  • Brak określenia języka (brak html[lang]).
  • Prastare kodowanie (ISO-8859-2). Obecnie powinno się stosować wyłącznie UTF-8.
  • <meta name="autor" content="Netsi.pl - Karol Reclaf" />

    Patriotyzm się chwali, ale HTML to jednak po angielsku.

  • <meta name="google-site-verification" content="ZRx5QBpkPWEDEr4w4r8J3Hbkr8Bq4h-uMTsSFVAUv0c" />

    Obecnie ten sposób weryfikacji strony nie jest zalecany. Google stosuje lepsze metody, np. weryfikacja przy pomocy kodu Google Analytics czy poprzez dodanie odpowiedniego rekordu DNS.

  • A później… póżniej mamy powrót do przeszłości.
  • Przypatrzmy się raptem kilku smaczkom z tego kodu. Na sam początek – przycisk z górnego menu:

    <td>
    	<a href="galeria_zdjec.html"><img src="images/menu-gorne-26grudnia-200-05.jpg" alt="fotogallery" width="198" height="49" border="0" /></a></td>

    Oczywiście zamiast listy, przestarzała tabelka. Zastanawiać może także angielski [alt] – zwłaszcza, że pozostałe przyciski w menu mają polski! Ciekawa jest także sama nazwa pliku. W jednym z przycisków widać całą datę: 26 grudnia 2007. Ta strona to żywa skamielina! I to zarówno pod względem wyglądu, jak i kodu.

  • <td>
    	<img src="images/spacer.gif" width="64" height="1" alt="" /></td>

    Nieśmiertelne spacery (czyli przezroczyste obrazki rozciągnięte na odpowiednią wielkość i zastępujące marginesy). Dobrze, że przynajmniej te są na tyle dobrze wykonane, że mają pusty [alt].

  • A teraz krótki przykład tego, jak kiedyś imitowano listy dl:

    <tr>
    	<td class="menu-nagl">Projektowanie stron www </td>
    </tr>
    <tr>
    	<td class="tresc"><a href="webdesign_strony_internetowe_projektowanie.html">> jak tworzymy strony www</a> </td>
    </tr>

    Warto też zauważyć, że punktor listy jest imitowany po prostu przez chamsko wstawioną encję. W obecnych czasach tego typu punktor można zrobić albo używając list-style (w przypadku list ol, ul), albo przy pomocy pseudoelementu ::before (w przypadku każdej listy).

    Jakby ten kod wyglądał dzisiaj?

    <dl>
    	<dt>Projektowanie stron www</dt>
    	<dd>
    		<a href="webdesign_strony_internetowe_projektowanie.html">Jak tworzymy strony www</a>
    	</dd>
    </dl>
  • <img src="zdjecia/google analytics.jpg" alt="google analitics" width="192" height="43" longdesc="http://www.google.pl" />

    Pierwszy raz widzę na żywo atrybut [longdesc]. Toż to żywa skamielina! Atrybut ten miał wskazywać na zasób dokładniej opisujący dany obrazek. Obecnie został wyparty przez ARIA i atrybuty [aria-label], [aria-labelledby], [aria-describedby].

    Inna rzecz, że całkowicie nie rozumiem sensu tego obrazka…

  • Nagłówki? Też starą metodą!

    <p class="h1">Tworzymy  dobre strony W W W </p>
  • <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    _uacct = "UA-2449319-1";
    urchinTracker();
    </script>
    

    Kolejne archeologiczne odkrycie. To chyba pierwsza wersja kodu Google Analytics! Dzisiaj wygląda tak:

    <script>
      	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    
      	ga('create', [ciach], 'auto');
      	ga('send', 'pageview');
    	</script>
    
  • I na koniec mały kwiatek z arkusza stylów:

    #start .start-brown .h1 .stopka-brown a

    No ale to były czasy na długo przed erą BEM.

Dzisiaj tak krótko i… sentymentalnie. Ot, mała archeologiczna wycieczka do starych (dobrych?) czasów webdevu. Do czasów, gdy tabelki były do wszystkiego, CSS raczkował, „semantyka” i „dostępność” były dziwnymi słowami, których używali wyłącznie fanatycy (albo prorocy nowych czasów!), a w Sieci królował Internet Explorer 5.5.

Napisz komentarz

Uwaga! Uprasza się komentujących, którzy chcą obrazić autora, aby najpierw dokonali niezbędnego researchu jego osoby. Z góry dziękujemy za poświęcony czas.