Kategoria: Programowanie

Podstawy CSS3

CSS3 to najnowsza wersja kaskadowych styli stosowanych przy kodowaniu projektów stron internetowych. Upowszechnienia tej wersji oczekiwało wielu webdeveloperów na całym świecie, a jest to związane z bardzo ciekawymi rozwiązaniami, które małym wysiłkiem mogą znacząco wpłynąć na jakość i szybkość kodowania stron internetowych. Zapraszam do zapoznania się z podstawowymi funkcjami jak zaokrąglanie rogów, cienie, gradienty, przezroczystość, a także wielokolumnowe teksty na stronie www.

Informacje wstępne

Przede wszystkim, wykorzystywanie CSS3 nie jest zależne od żadnych specjalnych nagłówków, czy oznaczeń jak to miało miejsce np. w HTML5. Po prostu wystarczy zacząć pisać nowe style w tym samym pliku css, który wykorzystywaliśmy do tej pory.

Zanim przejdziemy do opisywania konkretnych funkcji CSS3, należy wiedzieć, iż na chwilę obecną w większości właściwości wymagane jest używanie prefiksów dla konkretnych silników przeglądarek i tak dostępne mamy:

  • -moz- dla Firefox
  • -webkit- dla Chroma i Safari
  • -o- dla Opery
  • -ms- dla Internet Explorer 9

Z praktycznego punktu widzenia najczęściej w przykładach podaje się prefiksy –moz- oraz –webkit-, dla zachowania przyszłej kompatybilności warto również dodawać właściwości bez prefiksów. Poniżej przykład funkcji CSS3 odpowiedzialnych za zaokrąglenie rogów o promieniu 5px:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Poniżej chciałbym przedstawić moim zdaniem najprostsze, ale również najciekawsze właściwości CSS3, które warto wykorzystywać w swoich projektach. Zapraszam również na stronę z przykładami styli CSS3 omawianymi w tym artykule.

Zaokrąglenie rogów

Chyba najbardziej znaną funkcją CSS3 jest zaokrąglanie rogów. W erze web 2.0 na równi z cieniami i gradientami najczęściej wykorzystywany sposób zwiększania jakości projektów graficznych. Do tej pory było to jednak okupione dosyć wysoką ceną kodowania zaokrąglonych elementów. Technik było mnóstwo, ale wszystkie sprawiały pewne mniejsze lub większe problemy. Dzięki CSS3 możemy zaokrąglić rogi naszych elementów przy pomocy prostej definicji:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

Możemy dla każdej strony ustalić osobne style poprzez np. kolejne komendy: border-top-right-radius, border-top-left-radius itp.

Dla ułatwienia polecam jednak korzystać ze skróconego zapisu, jest prostszy i przysparza mniej problemów:

-moz-border-radius: 30px 30px 10px 10px;
-webkit-border-radius: 30px 30px 10px 10px;
border-radius: 30px 30px 10px 10px;

Jak wieść niesie na Tweeterze zarówno silniki Gecko (FireFox4) jak i Webkit (Safari, Chrome) oznaczają funkcje border-radius jako zakończoną i tym samym umożliwiają korzystanie z tych funkcji bez prefiksów -moz- oraz -webkit-.

Czytaj dalej...

Ajax w jQuery 1.5

Do przedstawienia nowej wersji jQuery minęło już kilka dni, więc myślę że czas napisać parę słów o zmianach jakie nastąpiły w tej bibliotece. Oczywiście standardowo poprawiono wydajność i usunięto wiele błędów z poprzednich wersji. Poza tym dodano funkcjonalność nazwaną Deferred Objects, o której szczegółowo napiszę w osobnym artykule, gdyż zdecydowanie ten obiekt wart jest dokładnego omówienia. W tym wpisie zajmiemy się inną istotną zmianą, czyli metodą ajax.

Należy zacząć od tego, iż moduł ajax został całkowicie przepisany od nowa. W związku z tym postanowiono lepiej przemyśleć i unowocześnić ten moduł. Myślę, że najważniejszą informacją jest to, iż obecna implementacja jest kompatybilna wstecz i w większości przypadków nie wymaga przepisywania wcześniej wykorzystanego kodu. Oczywiście nie można tego samego powiedzieć o pluginach, które w wielu przypadkach trzeba pobrać jeszcze raz, jeżeli autorzy zaktualizowali swój kod.

Pierwszą zmianą jest zawracanie przez metodę $.ajax() obiektu o nazwie jQuery XMLHttpRequest (jqXHR), który ma stanowić spójny interfejs do komunikacji z serwerem i dobierać optymalny sposób transportu danych. Przykładowe wywołanie funkcji $.ajax() wygląda teraz tak:

var jqxhr = $.ajax({ url: "showtable.php" });

Jak widać samo wywołanie wygląda identycznie, ale teraz posiadamy już obiekt jqxhr na którym możemy pracować i korzystać z niego nawet po wywołaniu kilku innych operacji.

Czytaj dalej...

W3C prezentuje logo HTML5

HTML5 to już nie tylko technologia,ale pełnoprawny produkt konsorcjum W3C, który doczekał się swojego logo. W tej chwili nie jest ono nieoficjalne, końcowe ogłoszenie ma nastąpić w pierwszej połowie 2011 roku. Wielu może spytać czy otwarta technologia potrzebuje w ogóle logo? Moim zdaniem tak i jest to bardzo dobry ruch ze strony W3C w celu promocji i popularyzacji HTML5. Pytanie tylko czy nie za wcześnie? HTML5 jest dopiero we wczesnej fazie projektowej autorzy sami ciągle powtarzają, że możliwa jest nawet całkowita zmiana pewnych rozwiązań bez zachowanie kompatybilności wsteczniej. W3C zdecydowało się opublikować logo, więc warto o nim napisać kilka zdań.

Logo HTML5 zostało stworzone przez studio Ocupop i w zamyśle ma reprezentować całą grupę technologii powiązanych z HTML5: CSS, SVG, WOFF. Na stronie firmy znajduje się ciekawe Case Study na temat tego projektu. W moim odczuciu logo jest bardzo dobre, proste i nowoczesne. Zostało zaprojektowane z myślą o niewielkich emblematach oznaczających i promujących strony stworzone w HTML5.

Czytaj dalej...

10 bibliotek i klas PHP które warto znać

PHP jest jednym z najpopularniejszych obecnie języków programowania i jak na razie liderem w swojej klasie. Wynikiem jego popularności są szeroko dostępne biblioteki i klasy pozwalające na szybsze i wydajniejsze programowanie. Oczywiście zdaje sobie sprawę, że nie każdy lubi używać nie swoich rozwiązań, sam kiedyś miałem takie przekonania, ale z czasem człowiek uświadamia sobie, że nie ma czasu na pisanie solidnych, przetestowanych klas. Dlatego przygotowałem, krótką listę bibliotek, które moim zdaniem mogą się przydać w codziennej pracy.

PHPMailer

Bardzo popularna biblioteka wspomagająca wysyłanie maili. Umożliwia wysyłanie poczty poprzez SMTP, wysyłanie załączników, maili zwykłym tekstem i HTML. Co prawda ostatnia aktualizacja klasy była dość dawno, ale ciągle jest to rewelacyjne narzędzie do wysyłania maili.

SwiftMailer

Konkurencja powyższej biblioteki, posiada praktycznie identyczne możliwości. Dużym plusem tej biblioteki jest dosyć dobra dokumentacja.

Doctrine

Doctrine to potężne narzędzie do zarządzania danymi z baz danych, właściwie złożone z dwóch projektów: Object Relational Mapper (ORM) oraz Database Abstraction Layer. Dzięki, niemu projektowanie modeli w systemach może być zdecydowanie bardziej zautomatyzowane.

Propel

Podobnie jak w przypadku klas do obsługi poczty, tak dla klas zarządzania bazą danych należy wspomnieć o konkurencji Doctrine, czyli Propelu. Zarówno jeden jak i drugi mają ogromne możliwości, wielokrotnie prześwietlone na forach i blogach.

HTML Purifier

Doskonała klasa PHP, uznawana za jeden z najlepszych sposobów na walkę z XSS. Dba również o poprawność obrabianego w PHP kodu HTML. Według mnie niezbędne narzędzie w codziennej pracy.

Czytaj dalej...

Informacje o kolumnach tabeli w PDO i MySQL

Tym razem szybka porada na temat pozyskiwania informacji o kolumnach tabeli przy pomocy PDO. Informacje takie przydają się przede wszystkim przy tworzeniu różnego rodzaju generatorów formularzy w PHP. Standardowo w MySQL skorzystalibyśmy z przygotowanej do tego celu funkcji mysql_fetch_field, która zwraca nam obiekt z informacjami na temat kolejnych kolumn. PDO samo w sobie posiada ograniczony zakres tego typu funkcji, jest to powiązane z tym, iż nie jest on typowym interfejsem bazy danych, ale bardziej warstwą abstrakcji pozwalająca na zarządzanie danymi z wielu różnych systemów. Informacje o kolumnach możemy pobrać na dwa sposoby.

Używając getColumnMeta

Jedną z możliwości jest skorzystanie z natywnej metody PDO – getColumnMeta. Jak nie trudno zauważyć w manualu metoda ta jest eksperymentalna i jej prawidłowe działanie nie jest gwarantowane. Jej przykładowe zastosowanie może wyglądać tak:

<?php
$res = $this->query('SELECT * FROM table_name LIMIT 1');

$columnCount = $res->columnCount();
for($i=0 ; $i < $columnCount ; $i++){
  $meta[$i]=$res->getColumnMeta($i);
}

print_r($meta);
?>

Zestaw wyników jaki otrzymujemy, jest tablica:

Array
(
  [0] => Array
    (
      [native_type] => LONG
      [flags] => Array
      (
         [0] => not_null
         [1] => primary_key
       )

       [table] => table_name
       [name] => id
       [len] => 8
       [precision] => 0
       [pdo_type] => 2
    )

  [1] => Array
    (
      [native_type] => VAR_STRING
      [flags] => Array
      (
         [0] => not_null
      )

      [table] => table_name
      [name] => url
      [len] => 384
      [precision] => 0
      [pdo_type] => 2
    )
)

Jak widać do dyspozycji mamy kilka informacji. Najczęściej potrzebne będą nazwa pola i jego typ.

Czytaj dalej...

Copyright © 2024 Webnote

Projekt i wykonanie: Tworzenie stron internetowych

Dodaj link