Kategoria: Programowanie

Wstęp do HTML5

W styczniu 2008 roku organizacja W3C opublikowała pierwsze zarysy kolejnej wersji popularnego języka HTML, będącego podstawą do tworzenia stron i aplikacji internetowych. Mam koniec roku 2010, a język ten jest ciągle w fazie tworzenia. Istotne jest jednak to, że praktycznie wszystkie liczące się firmy tworzące silniki przeglądarek internetowych, poważnie zainteresowały się tym projektem. Obecnie większość nowych przeglądarek posiada wsparcie dla HTML5, oraz co jest rzeczą bez precedensu Microsoft, ze swoim nowym IE w wersji 9, również zamierza dołączyć do czołówki, zarówno pod kątem omawianej w tym artykule technologii, jak i wsparciem dla większości możliwości CSS3. Jeżeli jeszcze nie zapoznałeś się z HTML5, to zachęcam do dalszej lektury tego artykułu.

DOCTYPE

Chyba każda początkująca osoba w języku HTML spotkała się z problemem doboru DOCTYPE. Wszyscy zastanawiali się, który lepszy Strict czy Transitional, którego używają liderzy Front-endu HTML 4.0 czy XHTML 1.0. Na szczęście wraz z HTML5 problem całkowicie znika, a obecnie ogranicza się tylko do prostego:

<!DOCTYPE html>

a więc najprostsza struktura naszego pliku wygląda teraz tak:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta content="Krzysztof Bachula">
<title>Wstęp do HTML5</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!—Tu kod HTML -->
</body>
</html>

Nowe elementy języka HTML5

Wraz z pojawieniem się wersji 5 pojawiło się sporo nowych tagów HTML. Z założenia mają one poprawić semantykę kodu, czy to się udało pozostawiam wam do oceny. Poniżej opisze kilka najważniejszych tagów pojawiającej się od wersji 5:

  • <section> – opisuje część dokumentu lub aplikacji. Taka jest definicja, a gdzie go stosować tego najwyraźniej nie wie nikt. Na początku programiści używali go w zastępstwie div’ów, ale organizacja W3C w dokumentacji wydała oświadczenie, że nie taka była intencja tego tagu. Obecnie trwają zażyłe dyskusje na temat <section>, polecam śledzić temat, a na razie używać go z dużą dozą nieufności. Drobna lektura na powyższy temat:
    - http://www.smashingmagazine.com/2010/11/10/learning-to-love-html5/
    - http://html5doctor.com/the-section-element/
  • <article> - opisuje artykuł lub część treści np: wpis na blogu, komentarz itp.
  • <nav> - część dokumentu odpowiedzialna za nawigacje po stronie.
  • <header> - opisuje nagłówki, nie tylko całej strony, ale także na przykład wstęp do artykułu
  • <footer> - opisuje stopkę dokumentu i podobnie jak w przypadku header nie odnosi się wyłącznie do całej strony, ale także do poszczególnych jej część. Tym sposobem możemy oznaczyć stopkę artykułu z informacjami o autorze itp.
  • <aside> - opisuje treść poboczną, czyli zawartość kolumny bocznej, np. podobne posty, reklamę itp.
  • <video> i <audio> - tagi pozwalające na łatwiejsze dodawanie mediów do swojej strony.

Pełna lista nowych elementów jest dostępna na stronie W3C, polecam przynajmniej pobieżnie przeglądnąć jej zawartość.

Czytaj dalej...

NetBeans z wsparciem dla Zen Coding

W trakcie przeglądania ostatnich nowości ze świata WebDesign moją uwagę przykuła informacja, na temat nowej wtyczki do NetBeans, wspierająca Zen Coding. Już wcześniej zainteresowałem się tą techniką, jednak do nie dawna wsparcie dla NetBeans było nizwykle ubogie i praktycznie nic nie dające pod wsględem wydajności i szybkości pracy. Tym razem jednak jest zupełnie inaczej.

Instalacja Zen Coding w NetBeans

Proces instalacji jest prosty, a wymagany do niej jest NetBeans w wersji nie mniejszej niż 6.9.1:

  • ściągnij plugin ze strony głównej lub bezpośrednio z tego linku.
  • w NetBeans przejdź do Tools -> Plugins i tam w zakładce Download użyj przycisku Add plugin i wskaż na ściągnięty wcześniej plik
  • Uruchom ponownie NetBeans

Od tej pory używając kombinacji klawiszy Ctrl+Alt+n uruchamiamy działanie Zen Coding.

Czytaj dalej...

Formularz z wykorzystaniem Lightbox, PHP i Ajax. Część 2 – back-end

W pierwszej części tego artykułu pokazałem jak stworzyć prosty formularz w HTML i wyświetlić go w lightbox. W drugiej części zajmiemy się walidacją i zapisywaniem danych pochodzących z formularza. Naszym podstawowym celem jest stworzenie bazy danych, w której będziemy przechowywać dodane wartości, zabezpieczyć się przed niechcianymi wartościami w polach formularza oraz bezpieczny zapis danych w PHP. Oto charakterystyczne cechy, jakie chcemy uzyskać od naszego formularza:

  • proste działanie
  • użyteczna walidacja danych
  • bezpieczeństwo pod kątem SQL Injection i XSS
  • maksymalne wykorzystanie możliwości, jakie daje nam jQuery i AJAX

Zobacz demo.

Baza danych

Tworzymy bardzo prostą bazę danych zawierającą identyczne pola jak nasz formularz, plus dodatkowa kolumna id z kluczem głównym. Tabele taką, możemy stworzyć ręcznie w dostarczanych przy bazie narzędziach np. phpMyAdmin, lub po prostu wykonać w php podane niżej zapytanie.

CREATE TABLE `links` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`title` VARCHAR( 255 ) NOT NULL ,
`url` VARCHAR( 255 ) NOT NULL ,
`desc` TEXT NOT NULL
) ENGINE = MYISAM CHARACTER SET utf8 COLLATE utf8_general_ci;

Kod JavaScript

Potrzebna nam jest funkcja, która po naciśnięciu przycisku „Dodaj”, wyśle zapytanie do serwera, w którym nasze dane zostaną sprawdzone i jeżeli wszystko będzie w porządku, dodane do bazy danych. W przeciwnym wypadku wyświetlimy błędy, które należy poprawić przed ponownym zatwierdzeniem formularza. Realizacje tych zadań rozpoczniemy od prostej obsługi kliknięć w nasz przycisk na końcu formularza:

$("button#save").click(function(){
return false;
});

Zwrócenie wartości false, powoduje zatrzymania domyślnego wykonania działania przycisku. W naszym przypadku zatrzymuje automatyczne wysłanie zapytania metodą POST, przez przeglądarkę. Opcja ta nie jest przez nas pożądana, ponieważ chcemy sami wykonać żądanie za pomocą metody $.ajax dostępnej w jQuery. W tym momencie można się zastanawiać, dlaczego nie zrezygnować z type=”submit”? Chodzi o to, iż planując tego typu formularze, dobrym zwyczajem jest pomyśleć o osobach, które nie mają włączonej obsługi JavaScript w swojej przeglądarce, dla nich cały nasz poniższy kod JavaScript zostanie zignorowany. Dlatego powinniśmy, przynajmniej w podstawowy sposób, umożliwić skorzystanie z formularza. Jak łatwo się domyślić w naszym przypadku brak JS nie wpłynie w żaden sposób na działanie formularza, ponieważ zwyczajnie go nie zobaczymy w związku z wykorzystaniem Colorbox. Pomimo to, w artykule częściowo uwzględniona zostanie opcja wyłączonej obsługi JavaScript.

Czytaj dalej...

Formularz z wykorzystaniem Lightbox, PHP i Ajax. Część 1 – front-end

Jednym z najprostszych przykładów wykorzystywania PHP w standardowych stronach internetowych, są różnego rodzaju formularze. Od prostego newslettera, poprzez systemy komentarzy, aż po formularz kontaktowy. W tym artykule postaram się przedstawić bardzo prosty przykład formularza, za pomocą którego, będziemy mogli dodawać informacje do bazy danych z wykorzystaniem jQuery i PHP. Dla lepszego zrozumienia zagadnienia podzieliłem artykuł na dwie części. W pierwszej zajmiemy się oprogramowaniem wyglądu serwisu w HTML i CSS. A w drugim programowaniem działania naszego formularza, czyli wykorzystanie PHP i MySQL do składowania informacji.

Zobacz demo

Przygotowujemy biblioteki

W celu zwiększenia użyteczności naszego formularza wykorzystamy popularny obecnie mechanizm lightbox, który pozwoli na otworzenie i wypełnienie naszego formularza bez opuszczania danej podstrony. W tym celu wykorzystamy doskonały skrypt Colorbox wykorzystujący bibliotekę jQuery, charakteryzuje się on przyzwoitą prędkością i rozmiarem, oraz dużą możliwością konfiguracji. Po szczegóły odsyłam do strony głównej projektu, gdzie znajdziemy krótką dokumentacje i przykłady. Przygotowujemy podstawowy kod HTML który umieszczamy pomiędzy tagiem body:

<h1>Przykład - Formularz z wykorzystaniem lightbox i AJAX</h1>
<button id="open-colorbox">Dodaj informacje</button>

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript" src="media/js/jquery.colorbox.js"></script>

<script language="javascript">
$(document).ready(function(){

// tu kod jquery

}); //end ready
</script>

Jak widzimy jest to bardzo prosty kod dodający przycisk, któremu nadajemy id potrzebny przy wywoływaniu późniejszego skryptu. Następnie dodajemy potrzebne skrypty, czyli jQuery, w tym celu skorzystamy z ogólnodostępnego CDN udostępnionego nam przez firmę Google, oraz znajdujący się na naszym serwerze plik jquery.colorbox.js.

Formularz

Następnie przyszedł czas na formularz, którego kod znajduje się poniżej:

<div style='display:none'>
  <div id="form">
    <h2>Dodaj informacje</h2>
    <form action="">
      <label for="title">Tytuł informacji:</label>
      <input type="text" name="title" id="title" />
      <label for="link">Link:</label>
      <input type="text" name="link" id="link" />
      <label for="desc">Opis:</label>
      <textarea cols="" rows="" name="desc" id="desc" ></textarea>
      <button type="submit" class="right" >Dodaj</button>
    </form>
  </div>
</div>
Czytaj dalej...

Narzędzia, które przyspieszą twoją prace z kodem HTML i CSS

Podczas kodowania projektów graficznych często fragmenty zarówno kodu html jak i css się powtarzają. Na przykład podczas tworzenia artykułów, list wyboru lub formularzy kod html jest prawie zawsze taki sam. Aby przyspieszyć naszą pracę możemy skorzystać z wielu generatorów kodów dostępnych online.

HTML-Ipsum

Html Ipsum

Rewelacyjny zbiór najpotrzebniejszych elementów stron. Na stronie do dyspozycji mamy:

  • różnej długości paragrafy
  • listy numerowane i nie
  • formularz
  • tabela
  • standardowa nawigacja w formie listy
  • tzw. Kitchen Sink, czyli przykładowy artykuł z elementami dekoracyjnymi jak pogrubianie, kursywa, kod w treści i jako osobny blok.
Czytaj dalej...

Copyright © 2024 Webnote

Projekt i wykonanie: Tworzenie stron internetowych

Dodaj link