nostra - to, czym żyje web

piątek, 30 maj 2008

Jak dowiedzieć się wszystkiego o stronie?

Ciekawość to pierwszy stopień do piekła? Nie w tym przypadku! Oto ciekawe narzędzie do analizowania i prześwietlania stron internetowych:

Just Ping - chcesz sprawdzić jak Twoja strona otwiera się w różnych miejscach świata? Sprawdz to używając 26 miejsc oferowanych przez Just Ping. Jest nawet punkt w Shanghaju - sprawdź czy wielkie Chiny Cie nie blokują ;)

Who Is The Owner - ktoś ukradł Ci content? Chcesz dowiedzieć się więcej o właścicielu domeny, którą chcesz kupić? Who Is The Owner skanuje rejestry wielu rejestratorów domen i daje Ci dane kontaktowe na tacy.

You Get Signal - masz dedykowany serwer? Na pewno? Sprawdź ile domen jest zarejestrowanych na serwerze Twojej strony. You Get Signal zrobi to za Ciebie za pomocą revere dns.

Social Meter - sprawdz popularność Twojej strony na serwisach typu Digg, del.icio.us, Google Bookmarks.

Built With - Digg używa Apacha czy Windowsa? Jakich statystyk? Na to i wiele innych pytań odpowie Ci strona Built With.

Web Archive - zobacz jak dana strona wyglądała w przeszłości. Cała historia internetu na Web Archive!

sobota, 8 grudzień 2007

Pierwsze spojrzenie na HTML5

Sieć rozwija się w każdej chwili. Co dziennie przybywa dziesiątki nowych stron. Większość z nich jest raczej przeciętnych, jednak zdarzają się te naprawdę innowacyjne i godne uwagi. Pojawia się pytanie jak długo jeszcze będą musiały być robione z użyciem starych technologii takich jaką z pewnością jest już HTML4. Standard posiadający już prawie dekadę na karku powoli przestaje wystarczać.

Wychodząc na przeciw oczekiwaniom, standard HTML5 dodaje masę nowości takich jak lepsza obsługa formularzy, kontrolery audio/video aż po zmiany stryktury i semantyki.

Aktualnie standard HTML5 jest w fazie projektowania i dyskusji, więc wszystko co poniżej opisane może się zmienić.

Struktura

HTML5 wprowadza wiele nowości jeżeli chodzi o nowe znaczniki i samo porządkowanie dokumentu. Dotychczasowy układ strony kodowanej w HTML4 wyglądaj mniej więcej tak jak poniżej.

<body> <div id="header"></div> <div id="nav"></div> <div id="article"> <div id="section"></div> </div> <div id="sidebar"></div> <div id="footer"></div>
</body>

Co po nadaniu elementom article i sidebar atrybutu float: left; da standardowy układ dwóch kolumn. Nagminne używanie elementów div spowodowane jest brakiem dokładnego opisu tych elementów przez język. W przypadku HTML5 sytuacja zmienia się diametralnie, wszystkie te elementy otrzymały własne znaczniki, dzięki czemu powyższy kod wyglądałby mniej więcej tak:

<body>
<header></header>
<nav></nav>
<article>
<section></section>
</article>
<aside></aside>
<footer></footer>
</body>

Dzięki takiemu podejściu, nowe znaczniki w połączeniu ze starymi znacznikami h1-h6 pozwalają na stworzenie logicznej struktury wykraczającej poza dostępne do tej pory 6 poziomów. Oczywiście z punktu widzenia samego i czystego "skodowania" strony nie ma to większego znaczenia, jednak znacznie zwiększa problem dostępności, który w świecie iPhone'ów, Opery Mobile i innych mediów dostępu do sieci staje się niezwykle istotne.

Przykładowe zagnieżdżenie sekcji i nadanie im elementów nagłówkowych mogło by wyglądać następująco.

<section>
<h1>Nagłówek 1</h1>
<section>
<h1>Nagłówek sekcji zagnieżdżonej</h1>
</section> </section

Jest to czytelne odzwierciedlenie wagi nagłówków dla poszczególnych sekcji. W nowym standardzie można powiedzieć ze h1 jest obowiązujące w obrębie lokalnym zawierającego go elementu. Jednakże dla wstecznej kompatybilności z przeglądarkami możliwe jest stosowanie elementów h1-h6 w poszczególnych zagłębieniach.

Taka specyfikacja pozwala czytnikom, przeglądarkom i różnej maści urządzeniom na dostęp bezpośrednio do elementu, który je interesuje. Przykładowo przeglądarka w komórce może ominąć sekcję header w której zwyczajowo umieszczane są loga itp. a odnieść się bezpośrednio do treści w sekcji article czy section.

Element header zawiera więcej niż tylko nagłówek sekcji. Jest to miejsce gdzie z powodzeniem można umieścić slogan, numer wersji czy też autora.

<header>
<h1>Przykładowy temat</h1>
<h2>Slogan strony</h2>
</header>

Element footer jest typową stopką zawierającą informacje o autorze, dacie publikacji czy prawach autorskich odnosnie danej sekcji.

<footer>© 2007 nostrzak.blogspot.com</footer>

Element nav jest miejscem na menu nawigacyjne.

<nav>
<ul>
<li><a href="">Strona główna</a></li>
<li><a href="#arch">Archiwum</a></li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>
</nav>

Element aside jest miejscem na podręczne menu dla wyświetlanej treści, przykładowo linki pomocnicze do artykułu.

<aside>
<h1>Archiwum</h1>
<ul>
<li><a href="/2007/09/">Styczeń 2007</a></li>
</ul>
</aside>

Element section to miejsce na główną treść strony taką jak rozdział czy właściwą treść strony.

<section> <h1>Temat artykułu</h1> <p>Lorem ipsum ...</p> </section>

Ostatni z nowych elementów article, jest miejscem przeznaczonym na niezależne treści na stronie, przykładowym zastosowaniem może być umieszczenie w nim newsów lub komentarzy do artykułu.

<article> <header>
<h1>Komentarz opublikowany przez: nostrzak</h1>
<p>Dnia 01-01-2007</p>
</header>
<p>Treść komentarza</p>
</article>

Audio i Video

Popularność serwisów typu YouTube spowodowała bardzo mocne zainteresowanie problemem umieszczania plików audio oraz video na stronach internetowych. Do tej pory najpopularniejszym sposobem opublikowania filmu na stronie jest umieszczenie go w odtwarzaczu flash'owym. W specyfikacji HTML5 trwają prace nad dodaniem obsługi multimediów już na poziomie przeglądarki. Dzieki nowym takom audio i video staje się to niezwykle proste, a sterowanie tymi elementami odbywa się na poziomie DOM'a. Opera już wypuściła testowe wersje przeglądarek obsługujące ten standard.

Aby zamontować standardowy odtwarzacz na swojej stronie wystarczy następujący kod.

<video src="video.ogv" controls poster="poster.jpg"
width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>

Atrybut controls odpowiada za umieszczenie standardowych kontrolek takich jak start/stop czyli w skrócie całego UI. W atrybucie poster określamy obrazek jaki ma się wyświetlić zanim film zostanie odtworzony. Pliki audio umieszcza się w bardzo podobny sposób, jednak z wiadomych powodów nie ma atrybutów width, height i poster.

<audio src="music.oga" controls>
<a href="music.oga">Download song</a>
</audio>

Standard HTML5 wprowadza dodatkowo możliwość podawania alternatywnych źródeł dźwięku/video w zależności od dostępnych kodeków etc.

<video poster="poster.jpg">
<source src="video.3gp" type="video/3gpp" media="handheld">
<source src="video.ogv" type="video/ogg" codecs="theora, vorbis">
<source src="video.mp4" type="video/mp4">
</video>

Dla ludzi chcących większej kontroli nad odtwarzanym obrazem, wprowadzono dla elementu video/audio w modelu dom metody play(), stop() czy wartość currentTime.

Reprezentacja dokumentu

W przeciwieństwie do poprzednich wersji HTML'a czy XHTML'a najnowsza specyfikacja stworzona jest nie na podstawie luźnego spisu jak do tej pory ale oparta została na Document Object Model (DOM) - odwzorowaniu struktury dokumentu w postaci drzewa. Dzięki temu dokument nie jest budowany w oparciu o sztywne ramy składniowe a pozwala na dowolne budowanie struktur drzewiastych.

Dostępne są dwa sposoby interpretacji dokumentów: serializacja HTML (znane jako HTML5) oraz XML (znane jako XHTML5).

HTML5 bazowany jest na poprzednich wersjach języka jednak wprowadza parę elementów, które odzwierciedlają to jak przeglądarki czytają html'a w praktyce.
XHTML5 to czytanie dokumentu jako XML, łącznie z przestrzeniami nazw.

Przeglądarka używa typu MIME do wyboru sposobu interpretowania. Typ 'text/html' wymusza stosowanie HTML5, natomiast typ 'application/xhtml+xml' wymusza XHTML5.

Zalety używania HTML

kompatybilność wsteczna z istniejącymi przeglądarkami
autorzy już są zaznajomieni ze składnią
drobne błędy składniowe nie powodują "wysypania się" strony
liberalna i skrócona składnia pozwala na omijanie części tagów i atrybutów

Zalety używania XHTML

Wymogi XML'a powodują pisanie dobrze sformatowanego i często łatwiejszego w zarządzaniu kodu
Łatwa integracja z innymi słownikami XML
Pozwala na przetwarzanie i parsowanie XML, które może być używane jako dodatkowe przetwarzanie

Oryginalna wiadomość w języku angielskim:
http://www.alistapart.com/articles/previewofhtml5

czwartek, 6 grudzień 2007

Internet Explorer - po pierwsze ... innowacyjny.

Po wielu miesiącach pracy grupy od marketingu stojącej za IE, powstała w końcu nazwa najnowszego produktu (która wstrzymywała projekt *sic*). Oto nad czym pracowano:

IE 7+1
IE VIII
IE 1000 (ukłon w strone liczb binarnych)
IE Eight!
iIE
IE for Web 2.0 (Service Pack 2)
IE Desktop Online Web Browser Live Professional Ultimate Edition for the Internet (troche przegieli z tą nazwą ;)
Ie2.079

a ostatecznie wybrano nazwę .... IE8. Możemy być spokojni ... brak odzewu nie oznacza bezproduktywności ;)

Oczywiście ludzie przywiązują wagę do innych aspektów IE8 poza nazwą. Kiedy przeprowadzałem różne osoby przez plan realizacji otrzymałem pytania: "Czy ma opcje X?" "Kiedy będzie beta?" "Kiedy wyjdzie?" oraz co istotniejsze "Co zamierzacie osiągnąc w tej wersji?".
Usłyszycie od nas więcej już niedługo na tym blogu i w innych miejscach. W międzyczasie nie mylcie ciszy z brakiem pracy.
Dean Hachamovitch
General Manager

środa, 5 grudzień 2007

Dwa rodzaje programistów

Wbrew powszechnej opinii o istnieniu 14 rodzajów programistów, jestem raczej zdania, iż jest ich tylko dwa. Cytując Ben'a Collins-Sussman'a

Są tylko dwie "klasy" programistów w świecie oprogramowania: Będę nazywał je 20% oraz 80%.

Goście 20% mogliby być nazwani programistami "alpha" - liderzy, pionierzy, twórcy trendów, typ ludzi o których obsesyjnie zabiegają firmy takie jak Google czy Fog Creek. To oni instalowali Linux'a w domu we wczesnych latach 90tych; ludzie którzy pisali kompilatory lisp'a i uczyli się Haskella w weekendy tylko dla zabawy; aktywnie uczestniczą w projektach open source; są zawsze na bieżąco ze wszelkimi nowosciami, trendami i najnowszymi narzędziami programistycznymi.

Faceci 80% to główny trzon przemysłu informatycznego. Nie są głupi; to po prostu rzemieślnicy. Chodzili do szkół, nauczyli się Javy/C#/C++, potem dostali pracę przy projekcie dla banku, rząd, firm transportowych czy innych. Zazwyczaj świat nie ma pojęcia o istnieniu ich software'u. Używają czegokolwiek dostarczy im Microsoft - zazwyczaj VS.NET jeśli używają C++ lub środowisk GUI jak Eclipse w przypadku Javy. Nigdy nie używali Linuxa i specjalnie ich to nie obchodzi. Wiedzą dokładnie tyle by dobrze wykonywać swoją robotę i przez weekend zapomnieć.

Podział bardzo trafnie definiuje to co dzieje się na developerskim rynku (nie mylić z budownictwem). Pod tym podziałem znajduje się list otwarty do 20% o próbę dotarcia do 80%. Pytam: po co? Czy nie zawsze mała grupa ciągnęła ten cały leniwy świat do przodu? Galopujący pociąg do nowości jest potrzebny, tak samo jak umiarkowany konserwatyzm w prawdziwych, działających projektach, nie tylko open sourcowych wizjach.

wtorek, 30 październik 2007

Gmail sie zbroi ... by żyło się lepiej?

Miesiąc atrakcji w wykonaniu ekipy Gmaila. Po udostępnieniu IMAP'a (niestety na moim koncie jeszcze niedostępny) teraz szykuje się wielka zmiana technologiczna. Jaka? ... no właśnie :) ...

Na blogu gmaila pojawił się szumny wpis o technologicznej rewolucji przeglądarkowego klienta poczty sygnowanego przez Google. Jako użytkownicy, do dyspozycji dostaniemy kilka nowych skrótów klawiszowych i ... generalnie póki co wszystko.

Głównym założeniem nowego update'u jest zwiększenie wydajności oraz wprowadzenie komponentów do serca systemu. Daje to najdzieję na łatwiejsze, a co za tym idzie, szybsze aktualizacje Gmaila oraz otwiera parę furtek na przyszłość ... może doczekamy się czegoś na kształt aplikacji w Facebook'u? Póki co, tendencja i szybkość rozwoju Gmail'a jest bardzo zadowalająca.

Źródło

piątek, 27 lipiec 2007

Google Analytics po naszemu

No i kolejna usługa Googla po naszemu. Google Analytics doczekało się języka polskiego, wystarczy wybrać go w opcjach. Screeny i helpik u Tomasza Topy.

czwartek, 26 lipiec 2007

Google Gears - brakujący pierwiastek

Interfejs www jest jednym z najwygodniejszych jeżeli chodzi o szybkość projektowania i jego przenośność. Strona stworzona na środowisku konfigurowanym przez samego programistę (lub nie, w każdym razie jednoznacznie sprecyzowanym), wydajność serwerowa ... marzenie. Brakuje jednego małego elementu ... wersji offline. Co teraz? Nasz gigant znowu na miejscu ... oto Google Gears!

O co chodzi?
Co znowu wymyślili chłopaki z Googla? Niby nic rewolucyjnego, wystarczyło wzbogacić przeglądarki o 3 elementy.

Serwer Lokalny: służy on do składowania obrazków, css'ów i wszystkiego czego tylko chcesz podczas przebywania w trybie offline.
Baza danych: prosta baza SQLite, wysyłania do której można wykonywać prosto z JavaScriptu na stronie.
WorkerPool: dodatkowe rozszerzenie JavaScriptu umożliwiające tworzenie wątków dla długo trwających zapytań. Po co? Żeby przeglądarka nie "zamarzła".

Dlaczego to może wypalić? Z powodu prostej instalacji pod Firefoxem i Internet Explorerem. Brak zbędnych zagmatwanych instalatorów na pewno pomoże.

Bezpiecznie panowie (i panie)
Bezpieczeństwo przede wszystkim. Taka przyświeca nam wszystkim zasada. I słusznie! Tutaj też to działa. A przynajmniej w obrębie jednego programisty. Konkrety? Służę, baza stworzona z jednej domeny (przykładowo domena1.pl) może być obsługiwana tylko przez tą jedną domenę. Czyli zła konkurencja z domeny domena2.pl nic nam nie namiesza.

Troszkę kodu
Weźmy na warsztat prościutki system dodawania artykułów. Chcemy tylko mieć dostęp do dodanych artykułów zarówno w wersji online jak i offline. Po stronie serwera jedna baza artykułów, prosty formularz dodawania i strona podziękowania za wpis. Nie będę tego pisał, każdy robił to już tysiące razy. Nie? Szukać w necie ;)

Co jeszcze po stronie serwera? Potrzebujemy plik articles.php generujący nam prostego xml'a. Przykładowy output mógłby wyglądać tak:

<articles>
<article  id="1" title="Hate test strings">Test article here bla bla</article>
 <article  id="2" title="Lorem ipsum forever">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</article>
</articles>

Teraz plik z dodawaniem artykułów do Google Gears... Dla uproszczenia użyję zapytań Ajaxa używając Prototype. Plik gears_init.js natomiast jest dodawany do zestawu developerskiego Google. Oba zaincludowane w headzie.

 <html>
 <head>
 <script  type="text/javascript"  src="gears_init.js"></script>
 <script  type="text/javascript" src="prototype.js"></script>
 </head>
 <body  onload="initializedb()">

<table  width="100%">
 <tr><td  width="20%" valign="top">
 <table  width="100%" id="elArticles">
 </table>
 </td><td  width="80%" valign="top">
 <div  id="elContent"></div>
 </td></tr></table>

<a href="javascript:void  sync();">Synchronizuj</a>

<script>
   var db;

function sync()
   {
   new Ajax.Request( 'articles.php', { method:  'get',
     onSuccess: function( transport ) {
     var articleTags =  transport.responseXML.getElementsByTagName( 'article' );

  for( var a = 0; a < articleTags.length;  a++ ) {
         addArticle( parseInt(  articleTags[a].getAttribute('id') ),
             articleTags[a].getAttribute('title'),
            articleTags[a].firstChild.nodeValue  );
       }
     showArticles();
   } } );
   }

function initializedb()  {
   if (!window.google || !google.gears)
     return;

try {
     db =  google.gears.factory.create('beta.database', '1.0');
   } catch (ex) {
     alert('Could not create database: ' +  ex.message);
   }

if (db) {
     db.open('gearsintro');
     db.execute('create table if not exists  articles' +
        ' ( article_id int, title varchar(255),  content text )');
   }
   showArticles();
   }

function showArticle( id  )
   {
   var rs = db.execute( 'select content from  articles where article_id = ?', [ id ] );
   var found = 0;
   while (rs.isValidRow()) {  $('elContent').innerHTML = rs.field(0); rs.next(); }
   rs.close();
   }

function showArticles()
   {
   while( $('elArticles').rows.length > 0 )
    $('elArticles').deleteRow( -1 );

var rs = db.execute( 'select * from articles'  );
   while (rs.isValidRow())
   {
     var elTR =  $('elArticles').insertRow( -1 );
     var elTD = elTR.insertCell( -1 );
     elTD.onmouseover = function() {  this.style.background = '#eee'; };
     elTD.onmouseout = function() {  this.style.background = 'none'; };

 elTD.id = rs.field( 0 );
     elTD.onmouseup = function() { showArticle(  this.id ); };

 elTD.appendChild( document.createTextNode(  rs.field(1) ) );
     rs.next();
   }
   rs.close();
   }

function addArticle( id,  title, content )
   {
   var rs = db.execute( 'select * from articles  where article_id = ?', [ id ] );
   var found = 0;
   while (rs.isValidRow()) { found++; rs.next();  }
   rs.close();
   if ( found == 0 )
     db.execute('insert into articles values (?,  ?, ?)', [id, title, content]);
   }
</script>
</body>
</html>

Google Gears uruchamiamy z użyciem funkcji initializedb, co otwiera połączenie z bazą i tworzy tablicę artykułów. Ostatnią rzeczą w initialize db jest metoda showArticles, która szuka artykułów w bazie Gears i wyświetla je w tablicy.

Funkcja sync, którą uruchamia się po kliknięciu linka synchronizuj pobiera Ajaxem plik articles.php z xml'em i wywołuje metodę addArticle dla każdego artykułu. Ta z kolei dodaje artykuł do bazy o ile artykuł z takim ID nie istnieje w bazie. Potem po raz kolejny wywoływana jest metoda showArticles.

Tradycyjne podsumowanie

Warto? Hah! Odwieczne pytanie. Oczywiście zależy od aplikacji. Warunkowe użycie (świat to nie Firefox + IE), dodatkowe pisanie, stany offline i online ... to problemy, które dochodzą i tak już zapracowanemu programiście. W każdym razie po raz kolejny Google dało nam znakomite narzędzie, jak je użyjemy ...