TechLife devBlog

# Techblog

Bootstrap - HTML-owe klocki Lego

Kodowanie, Techblog 16 kwietnia 2012 22:18

W lipcu narzekałem, że webdeveloperom brakuje klocków/struktur z których mogliby łatwo budować aplikacje, podobnie jak buduje się desktopowe interfejsy graficzne korzystając z różnych bibliotek zawierających zdefiniowane elementy i kontrolki. Dzisiaj spokojnie mogę powiedzieć, że HTML również doczekał tych wspaniałych czasów.

Bootstrap - przykład

Od kilku miesięcy obserwowałem rozwój projektu Bootstrap (od Twittera). Bootstrap to ogromny zbiór najczęściej stosowanych HTML-owych struktur, które zostały w bardzo estetyczny sposób ostylowane oraz dodano JavaScript do sterowania interaktywnymi elementami tj. okna modalne, taby, rozwijane menu, dymki z podpowiedziami, komunikaty i wiele innych.

Początkowo dostarczanych elementów było względnie mało. Do tego zastosowanie Bootstrapa było bardzo inwazyjne, ponieważ automatycznie stylował nam różne elementy, które niekoniecznie chcieliśmy mieć ostylowane w ten sposób. Jednak przez te kilka miesięcy odwalono kawał dobrej roboty. Liczba elementów urosła już do takiej ilości, że pozwala spokojnie budować bardzo zaawansowane aplikacje bez konieczności tworzenia własnych struktur. Zmieniła się również polityka stylowania i teraz większości elementów trzeba nadać klasę (np. tabeli należy nadać klasę table) aby skorzystać ze styli Bootstrapa.

Komponenty

Jak przystało na porządne pudełko z narzędziami, w Boostrapie znajdziemy też 12 kolumnowy CSS grid (stały lub płynny), oraz zestaw styli CSS3 służący do ładnego wyświetlania całości na różnej wielkości ekranach (Responsive design).

Grid

Korzystałem już z Bootstrapa w kilku aplikacjach i okazał się bardzo wygodny w użyciu. Bez problemu mogłem się skupić na mechanizmach zamiast na warstwie prezentacyjnej a mimo to wynikowa aplikacja była bardzo estetyczna i odznaczała się wysokim współczynnikiem eye candy. Do tego wszystkiego można dodać, że Bootstrap umożliwia wygenerowanie sobie spersonalizowanej paczki, zawierającej tylko potrzebne nam elementy a nawet przebudowany na nasze potrzeby CSS, ponieważ Boostrap generuje go korzystając z dobrodziejstw LESS.

Generator

Używa się tego tak dobrze, że całkiem prawdopodobne jest, że niedługo internet zostanie zalany podobnie wyglądającymi stronami i aplikacjami. Prosty przykład:

Przykładowa strona

Na stronie builtwithbootstrap.com można zobaczyć już całą gamę stron zbudowanych z pomocą Bootstrapa. Jest jednak światełko w tunelu. Powstała strona bootswatch.com oferująca różnorodne skórki dla elementów Bootstrapa.

Przykład skórki
Przykład skórki

Oczywiście Bootstrap to nie jedyny projekt tego typu. Warto przyjrzeć się również HTML KickStart.

Kick Start

Czasy gdy programiści tworzyli sraczkowate interfejsy oparte na tabelkach rodem z lat '90 oficjalnie uważam za zamknięte. Miłego kodowania!

Django i shortcodes

Kodowanie, Django, Techblog 5 lutego 2012 23:21

Kilka miesięcy temu pytałem #django-wców na blipie o możliwość wstawiania do treści słów kluczowych, które później byłyby zamieniane na różne dziwne rzeczy. Nikt mi wtedy nie odpowiedział, więc pewnie sprawa nie jest jeszcze zbyt popularna. Ostatnio jednak znalazłem rozwiązanie mojego problemu. Słowo klucz - shortcodes.

Shortcodes to znane przede wszystkim z WordPress-a pseudo tagi, za pomocą których możemy wstawiać w dowolne miejsca w tekście różnego rodzaju obiekty. Np. wykorzystując taki kod:

[gallery id="123" size="medium"]

możemy osadzić galerię pomiędzy dwoma paragrafami tekstu. Odpowiednia aplikacja istnieje też dla Django - django-shortcodes. Instalacja jest bardzo prosta i sprowadza się do kilku kroków:


  1. do katalogu z naszym projektem kopiujemy folder shortcodes

  2. w settings.py dodajemy shortcodes do INSTALLED_APPS

  3. w szablonie, w którym chcemy użyć filtra dodajemy {% load shortcodes_filters %}

  4. do zmiennej, która zawiera nasze słowa kluczowe dodajemy filtr shortcodes np. {{ news.tresc|shortcodes|safe }}

Zmienna zawierająca słowa kluczowe nie musi być wyłącznie tekstem. Może być to HTML wyprodukowany przez jakiś edytor np. TinyMCE. Trzeba tylko pamiętać, żeby najpierw dokonać podmiany słów kluczowych a dopiero później wypluć HTML (kolejność filtrów).

Najważniejszą częścią aplikacji django-shortcodes są parsery znajdujące się w katalogu parsers (domyślnie tylko youtube)

parsers

To one zawierają definicje słów kluczowych, oraz ich parametry. Nazwa pliku parsera definiuje też nazwę słowa kluczowego.

Ok, czas na przykłady, np. YouTube (trochę zmodyfikowany):

YouTube - TinyMCE

Rezultat:

YouTube - podgląd

Napisałem też prosty parser do wstawiania mp3 z pomocą Googlowego odtwarzacza:

[mp3 adres=http://www.luzuj.com/pb/mp3/piwo.mp3]

Odtwarzacz mp3

czy parser osadzający galerię zdjęć:

[galeria numer=1]

Galeria zdjęć

Oczywiście łatwo można też modyfikować wstawiane treści za pomocą różnych parametrów np.

[youtube adres=http://youtu.be/d9NF2edxy-M szerokosc=600 wysokosc=400]

lub

[galeria numer=1 tytul=brak]

Naturalnie to tylko banalne przykłady. Jednak najważniejsze jest to, że każdy może je łatwo dostosować do swoich wymagań i wykorzystać do wstawiania ankiet, wykresów, plików, prezentacji, statystyk czy różnych innych treści, które w normalnych przypadkach wymagałyby użycia skomplikowanego (często generowanego) HTML-a, który byłby kłopotliwy dla różnych edytorów typu TinyMCE.

Generator filmowych miniaturek

Kodowanie, Linux, Software, Techblog 11 stycznia 2012 21:59

Często zamieszczając na stronie streszczenie jakiegoś filmu brakowało mi narzędzia, które było by w stanie zamiast zrzutu pojedynczej klatki wygenerować mi miniaturkę składającą się przynajmniej z 4 zrzutów pochodzących z różnych części filmu. W repozytorium znalazłem tylko mplayer-snapshot, ale nijak nie działało. Ponieważ potrzebowałem tylko 4 zrzuty szybko skleiłem prosty skrypt Basha wykorzystujący FFMpegThumbnailer (powinien być w każdym repo) do robienia zrzutów i montage (pakiet imagemagick) do ich klejenia.

#!/bin/sh

usage()
{
cat << EOF
usage: $0 [options] -i MOVIE-FILE

OPTIONS:
   -h       show this message
   -i       input movie file
   -o       output JPG file name
   -a       percentage or absolute time hh:mm:ss, default 20
   -b       percentage or absolute time hh:mm:ss, default 40
   -c       percentage or absolute time hh:mm:ss, default 60
   -d       percentage or absolute time hh:mm:ss, default 80
   -n       number of columns
EOF
}

FILE=
OUT=
COLUMNS=2
T1=20
T2=40
T3=60
T4=80

while getopts "hi:o:a:b:c:d:n:" OPTION
do
     case $OPTION in
         h)
             usage
             exit 1
             ;;
         i)
             FILE=$OPTARG
             OUT=${OPTARG}.jpg
             ;;
         o)
             OUT=$OPTARG
             ;;
         a)
             T1=$OPTARG
             ;;
         b)
             T2=$OPTARG
             ;;
         c)
             T3=$OPTARG
             ;;
         d)
             T4=$OPTARG
             ;;
         n)
             COLUMNS=$OPTARG
             ;;
         ?)
             usage
             exit
             ;;
     esac
done

if [[ -z $FILE ]]
then
    usage
    exit 1
else
    ffmpegthumbnailer -t $T1 -s 400 -o /tmp/thumb-1.jpg -i $FILE
    ffmpegthumbnailer -t $T2 -s 400 -o /tmp/thumb-2.jpg -i $FILE
    ffmpegthumbnailer -t $T3 -s 400 -o /tmp/thumb-3.jpg -i $FILE
    ffmpegthumbnailer -t $T4 -s 400 -o /tmp/thumb-4.jpg -i $FILE

    montage -mode concatenate -tile ${COLUMNS}x -adjoin /tmp/thumb*.jpg $OUT
    rm /tmp/thumb*.jpg
fi

Dla przykładu weźmy trailer Hobbita. Po pobraniu go na dysk i zapisaniu jako hobbit.flv wystarczy odpalić skrypt i wskazać plik:

movie-thumbnails.sh -i hobbit.flv

Skrypt powinien wypluć plik o nazwie hobbit.flv.jpg:

Jak to jednak przy generowaniu miniaturek bywa czasami zdarza się złapać jakaś niepożądana klatkę. Aby ją wymienić należy wskazać którą z czterech klatek wymieniamy (a,b,c czy d) oraz podać procentowo lub dokładnie (np. 00:03:28) czas filmu, z którego ma zostać pobrana.

Domyślnie:

a - 20%
b - 40%
c - 60%
d - 80%

Czyli jeżeli chcemy wymienić np. miniaturkę 2 na coś jaśniejszego wystarczy zrobić:

movie-thumbnails.sh -i hobbit.flv -b 27

wynik:

Używając parametru -n możemy sterować też ilością kolumn:

movie-thumbnails.sh -i hobbit.flv -n 1

movie-thumbnails.sh -i hobbit.flv -n 4

Na koniec parametrem -o sterujemy nazwą pliku wyjściowego

movie-thumbnails.sh -i hobbit.flv -o hobbit.jpg

Linki

[CSS] Pionowo czy poziomo?

Internet, Kodowanie, Techblog 25 listopada 2011 23:51

Nie będzie to flame, chciałem przedstawić Wam tylko mój punk widzenia. Do chwili zatrudnienia się w Firmie byłem święcie przekonany, że jedynym słusznym formatowaniem jest formatowanie pionowe, gdzie elegancko mamy podane jak na tacy wszystkie atrybuty.

poziomo

W Firmie przyszedł czas bardzo intensywnego kodowania. Często pracowałem z dużymi arkuszami stylów, których ciągłe przewijanie stawało się bardzo niewygodne. Nierzadko trzeba było też wrócić do poprzednich projektów i szybko poprawić jakieś drobne niedociągnięcia. Dopiero wtedy uświadomiłem sobie, że w CSS-ie jest coś ważniejszego niż atrybuty i ich wartości. Najważniejszą rzeczą są selektory! Dopiero zrozumienie tej kwestii pozwoliło mi inaczej spojrzeć na elegancję poziomego formatowania.

poziomo

Rzeczą oczywistą jest to, że najpierw wyszukujemy obiekt, który chcemy zmodyfikować a następnie dodajemy mu kolor tła czy zmieniamy margines. Priorytetem jest więc szybkie odnajdywanie selektorów a później dopisanie czy odnalezienie potrzebnego atrybutu jest już dość proste, mimo że wszystkie atrybuty są w jednej linii. IMHO o wiele więcej czasu zajmuje znalezienie odpowiedniego selektora w rozciągniętym pliku niż odpowiedniego atrybutu w liniowym zapisie.

Aby jeszcze bardziej ułatwić sobie sprawę należy trzymać się prostej zasady: najpierw definiujemy box model: display, width, height, float, margin, padding (najlepiej zachować taką kolejność) a później całą resztę (position, background, color, font-size itp). Trzymając się tej zasady od razu wiemy czy szukamy atrybutu z końca czy początku linii.

Jeszcze raz poglądowo. Formatowanie pionowe - mało widać, dużo szukania

pionowo

Formatowanie poziome - szybkie odnajdywanie selektorów i (trzymając się zasady) w miarę szybkie odnajdywanie atrybutów.

poziomo

Łączenie przez SSH na dynamiczne IP

Linux, Techblog 4 listopada 2011 22:25

Kiedyś korzystałem z różnych serwisów z cyklu NO-IP. Z czasem jednak niektóre się pozamykały a inne stały się płatne. Nie miałem też ochoty rejestrować się i testować nowych rozwiązań, po których do końca nie było wiadomo czy na pewno są darmowe czy może płatne. Wymyśliłem więc prosty trick.

The story

W biurze mam stale działający komp, który służy do robienia backupów z naszych serwerów. Czasem z domu chcę coś na nim pogrzebać ale problem polega na tym, że nasz Netiowy ADSL co jakiś czas zmienia IP. Żeby więc móc za każdy razem połączyć się przez SSH muszę śledzić zmiany IP.

The trick

Metoda jest bardzo prosta. Wystarczy posiadać internetowy serwer (nazwijmy go serwerem zdalnym), który spełni rolę pseudo DNS-a, czyli zapytany o namiary na biurowy serwer (nazwijmy do serwerem lokalnym) zdradzi nam jego IP.

W tym celu na serwerze zdalnym piszemy prosty skrypt, który serwer lokalny będzie odpalał co godzinę.

nazwijmy go zapisz-ip.sh

#/bin/sh
echo $SSH_CLIENT | cut -f1 -d' ' > /tmp/ip

Tak przygotowany plik zapisujemy np. w katalogu bin w katalogu domowym użytkownika (czyli /home/tomek/bin/zapisz-ip.sh) i oczywiście dajemy mu prawa do wykonywania (chmod +x bin/zapisz-ip.sh). Jak widać skrypt ze zmiennej $SSH_CLIENT wyciąga adres IP i zapisuje go do pliku /tmp/ip.

Teraz na serwerze lokalnym (tym w biurze) ustawiamy w cronie zadanie wywoływania tego skryptu co godzinę. Czyli stukamy crontab -e i piszemy:

11 * * * *      tomek@ADRES-SERWERA-ZDALNEGO.pl ~tomek/bin/zapisz-ip.sh

Tutaj należy wspomnieć, że połączenie pomiędzy serwerem lokalnym a zdalnym powinno odbywać się poprzez autoryzację kluczem SSH. W przeciwnym wypadku skrypt zatrzyma się na etapie podawania hasła.

Mamy więc na serwerze zdalnym stale uaktualniany plik /tmp/ip zawierający bieżące IP serwera lokalnego. Żeby teraz połączyć się z serwerem lokalnym z dowolnego innego miejsca wystarczy przy łączeniu przez SSH adres IP odczytać z serwera zdalnego. Wygląda to tak:

ssh tomek@`ssh tomek@ADRES-SERWERA-ZDALNEGO.pl cat /tmp/ip`

Najlepiej oczywiście wsadzić to w jakiś skrypt i wywoływać jednym poleceniem. Taki sam efekt można uzyskać wykorzystując serwer www z obsługą np. PHP + prosty skrypt zapisujący do pliku adres IP a następnie serwujący go pod jakimś URL-em.

PS. Jeżeli trick wydaje Wam się zbyt banalny to polecam niezłą listę 100 darmowych gier na Linuksa ;-).

Strona 1 z 9 | Starsze »