Marek Wywiał

python software developer

Tworzenie strony internetowej.

by Marek Wywiał
    More posts about:  
  • www

Po co tworzymy stronę ? By pisać blog. Umieszczać informacje o sobie, o naszych zainteresowaniach, itp. Co by to nie było, strona nasza będzie zawierać treść i z jej uwzględnieniem powinna zostać ona zbudowana.

Ukierunkowanie na treść oznacza prawidłowe stosowanie znaczników <h1>, <h2> dla odpowiednich nagłówków, <ul>, <ol> dla list w tym także menu, <p> dla naszej treści oraz <div> dla podziału logicznego strony (np. budowy layout).

Oczywiście znaczniki te nie wyczerpują listy możliwych i potrzebnych do zastosowania w naszym przypadku.

Na stronie http://www.latenightrabbit.com/ znajduje się proste i skuteczne wprowadzenie do prawidłowej budowy strony internetowej przy pomocy oczywiście HTML oraz CSS i PHP

Polecam tą lekturę każdemu. Materiał jest napisany w języku angielskim ale najważniejszy i tak jest kod. Więc jeśli widziałeś kiedyś HTML, CSS lub przypadkiem PHP to powinno wystarczyć.

Własna strona startowa

by Marek Wywiał

Popularne (choć chyba powoli) stają się serwisy oferujące osobiste strony startowe. Strona taka zawiera często newsy z interesujących nas serwisów, okienko logowanie się do naszego serwisu pocztowego, pogodę, kursy walut, notatki i wiele innych.

Z polskich serwisów kojarzę jedynie startowy.com. Ostatnio dużo słychać także o witrynie Microsoftu live.com. Wczoraj natomiast wpadł mi do Firefox'a taki adres jak www.netvibes.com/.

Cechą wspólną tych serwisów jest wygodna edycja swojej strony oraz wygodnie przemieszczanie jej elementów. Aby korzystać z startowy.com należy się zarejestrować. Otrzymujemy wtedy swój osobisty adres np. mojastrona.startowy.com, który możemy propagować wśród naszych znajomych (dokładając np. do niej własny blog). Serwis ten odbiega więc od funkcji tylko naszej osobistej strony startowej.

live.com oraz www.netvibes.com natomiast nie dają możliwości stworzenia własnego zewnętrznego adresu. Zapamiętują Twoje ustawienia za pomocą ciasteczek (cookies) lub po zarejestrowaniu swojego adresu email i ustawieniu hasła, możemy uzyskać dostęp do swojej strony z dowolnego komputera i przeglądarki.

Pod względem różnorodności box'ów (funkcji) www.netvibes.com pozostaje na topie, natomiast live.com umożliwia nam dodatkowo sterowanie layoutem (ilość kolumn, język strony).

Oczywiście live.com (domyślnie) oraz www.netvibes.com są serwisami anglojęzycznymi.

słownik wyrazów obcych

by Marek Wywiał

Do strony z wyszukiwarkami dla Firefox'a dodałem wyszukiwarkę do Słownika Wyrazów Obcych Kopalińskiego

Wystarczy kliknąć na dodaj obok opisu w tabelce, przełączyć w prawym górnym rogu Firefox'a wyszukiwarkę z Google na Kopaliński i szukać :D

skracanie formularzy + java script

by Marek Wywiał

Długie formularze, podzielone na kilka sekcji ciągnące się w dół strony, nie są zbyt czytelne. Formularz taki można zmodyfikować dzieląć go na klikalne etapy lub wizualne zakładki. Ale jeżeli mamy wiele takich formularzy napisanych na dodatek w samym HTML'u ?

widok normalny

Możemy to sobie uprościć za pomocą JavaScript. Odpowiednia funkcja wywołana po załadowaniu się strony [body onLoad="funkcja();"] może wyszukać sekcje naszego formularza i zwinąć je do ciekawszych wizualnie zakładek.

widok z zakładkami

Żeby funkcja wiedziała co jest sekcją, należy je odpowiednio oznaczyć np. poprzez odpowiednią klasę CSS 'subpanel'

Druga ważna rzecz, skrypt musi wiedzieć jak nazwać zakładki. Do tego wykorzystałem atrybut title. Nasz kod wygląda teraz tak:

[code]

sekcja 1

sekcja 2

[/code]

Teraz za pomocą JavaScript możemy odnaleźć wszystkie znaczniki DIV.

[code lang="javascript"]

if (!document.getElementsByTagName || !document.createElement || !document.appendChild) return;

/ pobieramy wszystkie div'y /

var divs = document.getElementsByTagName("div");

[/code]

Następnie przygotowywujemy dodatkowy element DIV, w którym umieścimy stworzone zakładki.

[code lang="javascript"]

/ nr. pierwszego div'a z klasą subpanel /

var firstDiv = -1;

/ tworzymy div na nasze menu /

var menu = document.createElement("div");

menu.className = "panels_menu";

menu.setAttribute("id","panels_menu");

[/code]

Pozostaje nam przejść się pętlą po wszystkich znalezionych DIV'ach i wybrać te, które posiadają klasę 'subpanel'. Z każdego z nich pobieramy wartość atrybutu title i naszym 'menu' tworzymy odpowiedni odnośnik:

[code lang="javascript"]

var source = divs[i].getAttribute("title");

if (!source) continue;

var link = document.createElement("a");

link.setAttribute("href","#"+source);

link.setAttribute("onclick","activMenu(this); ");

link.onclick = new Function('activMenu(this);'); // dla IE

link.setAttribute("id","menu_"+divs[i].id); // dla wywołań zewnętrznych

link.appendChild(document.createTextNode(source));

[/code]

Aktywujemy pierwszą naszą zakładkę i dodajemy je do naszego nowego menu:

[code lang="javascript"]

if(firstDiv == -1) firstDiv = i;

if(i == firstDiv) { divs[i].style.display='block'; link.setAttribute('class','active'); }

/ dodajemy odnośnik do menu /

menu.appendChild(link);

link.className = "active"; // dla IE

[/code]

A po zakończeniu całej pętli wklejamy nasze zakładki przed pierwszego DIV'a z klasą 'subpanel':

[code lang="javascript"]

/ wklejamy stworzone menu nad pierwszym div'em /

divs[firstDiv].parentNode.insertBefore(menu,divs[firstDiv]);

[/code]

Tyle w temacie stworzenia zakładek. Pozostaje nam stworzyć funkcję activeMenu(this), którą wywołujemy po kliknięciu w odpowiednią zakładkę.

[code lang="javascript"]

function activMenu(menu) { menubox = document.getElementById('panels_menu'); links = menubox.childNodes;

/ ustalamy clasę 'active' dla naszego odnośnika, a reszcie null / for(x=0;xCSS:

[code lang="css"] .panels_menu a { color: #eee; text-decoration: none; background: #666; padding: 0px 5px; margin: 0px 2px; border: solid 1px #333; } .panels_menu a:hover { background: #ccc; color: #f33; border-bottom: solid 1px #ccc; } .panels_menu a.active { background: #eee; color: #333; border-bottom: solid 1px #eee; } .subpanel { border: solid 1px #333; padding: 10px; margin: 0 0 10px; } [/code]

Wystarczy teraz do <body> dodać onLoad="preparePanels()" i to już wszystko.

Poniżej jest pełen kod funkcji preparePanels():

[code lang="javascript"]

function preparePanels() { if (!document.getElementsByTagName || !document.createElement || !document.appendChild) return; / pobieramy wszystkie div'y / var divs = document.getElementsByTagName("div");

/ nr. pierwsze div'a z klasą subpanel / var firstDiv = -1;

/ tworzymy div na nasze menu / var menu = document.createElement("div"); menu.className = "panels_menu"; menu.setAttribute("id","panels_menu");

for (var i=0; itutaj. Odnośniki w lewym górnym rogu strony uruchamiają wersję kolejno z i bez preparePanels().

Jeżeli komuś się ta wiedza przyda, to miło mi będzie :)

Ciekawe gadżety

by Marek Wywiał
    More posts about:  
  • onjin

Skarbnicą dziwnych i ciekawych gadżetów jak dla mnie jest ThinkGeek. Serwis działa już parę ładnych lat i jak na razie nie znalazłem jego polskiego odpowiednika (choć specjalnie go też nie szukałem).

Niedawno w Firefox'a wpadł mi link do Gadzet.net - katalog rzeczy fajnych. Jak piszą sami autorzy serwisu, jest on "[...] magazynem/blogiem/(zwij jak chcesz) wypatrującym wszelkiej maści nowinek gadżetowych, ale także tych starych, mało znanych.[...]" i jest polskim projektem.

Mi spodobał się latający budzik ;)

Proces tworzenia strony internetowej

by Marek Wywiał
    More posts about:  
  • www

Tworzenie strony internetowej jest procesem wymagającym odpowiedniego projektu oraz zarządzania.

Zanim napiszemy setki linii wspaniałego kodu HTML, CSS czy PHP należy się upewnić:

  • czego naprawdę chce klient
  • czy możemy sprostać jego oczekiwaniom terminu wykonania, kosztu oraz działania ostatecznego produktu
  • czy stać nas na wykonanie projektu na zadanych warunkach
  • czy klienta stać na postawione przez nas warunki (np. cenowe)

Klienci często nie do końca wiedzą czego potrzebują i dlaczego. Możemy otrzymać zlecenie na 'zwykłą statyczną stronę', materiały podeślą nam później, jak przygotujemy szablony, itp. Potem otrzymujemy materiały w formie listy 200 produktów, które powinny być na stronie podzielone na grupy towarowe, edytowalne z panelu administratora, z możliwością ich zamawiania przez różne grupy klientów (detalista, partner, dystrybutor), przydała by się możliwość importu oraz exportu danych z XLS (CSV) i oczywiście system newsów także byłby wskazany.
Jeżeli w tym momencie jesteśmy na etapie gotowych szablonów (X)HTML/CSS oraz zaplanowaliśmy 5 dni roboczych na złożenie za ich pomocą dostarczonych treści ... to może być źle. Nie mówiąc już na ile wyceniliśmy nasze statyczne strony.

Krótka historia obrazująca prosty, modelowy przebieg procesu tworzenie strony, przedstawiona jest na stronie PingMan'a.

Jest krótka, wyrazista i ... często jedynie modelowa :D

Trochę śmiechu na weekend

by Marek Wywiał
    More posts about:  
  • onjin

Dziś dostałem linka do historii o Chuck'u Norris'ie. Po przeczytaniu odpowiedniej ilości ubaw zapewniony :D.

Podpowiedź: w Firefox'ie w menu widok->kodowanie znaków pomaga ustawienie na WINDOWS-CP-1250.

I jeszcze kilka w tym temacie:

Miłego weekendu.

Google Talk

by Marek Wywiał
    More posts about:  
  • onjin

17 stycznia Google otworzyło połączenia między serwerowe pomiędzy swoim serwisem Google Talk, a resztą świata XMPP. Tak więc każdy kto posiada konto pocztowe w domenie @gmail.com, może teraz komunikować się używając identycznego JID.

Do pełni szczęścia mogłoby brakować jedynie komunikatora Google Talk dostępnego na inne platformy niż Windows. Ale udostępnienie przez Google libjingle oraz ich współpraca z twórcami komunikatora Psi wróży na dobre.

aktualizacja

by Marek Wywiał
    More posts about:  
  • onjin

Niedawno pojawił się Wordpress 2.0. Jest znacznie szybszy od poprzednich wersji (wysyłanie, edytowanie, oglądanie), wykorzystuje technologię AJAX i ma nowy panel admina.

I z racji tych i innych onjin.net też posiada już wersję 2.0. Witamy, witamy ;)

Psi-0.10

by Marek Wywiał
    More posts about:  
  • jabber

Jak możemy przeczytać na blogu Kevina, pojawiła się wersja Psi sygnowana numerem 0.10.

Zmiany nastąpiły głównie w interfejscie komunikatora. Pojawiły się m.in. rozmowy w zakładkach, automatycznie zmieniający się rozmiar listy kontaktów, ustawienia przeźroczystości dla okien programu, itp.

-----BEGIN GEEK CODE BLOCK-----
Version: 3.1
GCS/IT dx s: a C+++$ U>$ P+ L++$ !E-(+) W++$ N+ !o K--? !w !O !M !V PS PE !Y PGP !t !5 X++ R tv+ b+++ DI D G e+++(++++) h--- r y+++
------END GEEK CODE BLOCK------