RaVns Blog | Webmastering, xHTML, CSS, PHP, MySQL, SEO/SEM, Windows i inne

Archiwum dla miesiąca: Kwiecień 2013

Skrypt informujący o wykorzystywaniu cookies na stronie zawiera możliwość zamieszczenia go na dole lub górze strony…. cdn.

$(document).ready( function() {

/****
// Skrypt: Okienko informujące o wykorzystywaniu na stronie plików Cookie.
// Copyright Autor: Rafał Olszyński - RaVns
// Wersja: 1.0 - 04.2013 r.
// http://Blog.RaVns.net
//
// Wymagania: posiadanie jQuery Cookie Plugin
// Proszę nie usuwać komentarzy w kodzie, stanowi to warunek legalnego wykorzystania
// Zabroniona sprzedaż kodu.
****/


/* Ustawienia ***/
    var cookie_waznosc = 365; // czas wyswietlania: 0 - pokazuj zawsze | 1...n - dzien/dni... -> domysl:0 | rada: czasem nalezy wyczyscic cache aby zmienic dni
    var cookie_zamknij = 'fadeOut'; // efekt ukrycia: slideUp | fadeOut | fadeToggle | toggle | hide ... -> domysl:fadeOut
    var cookie_pozycja = 'prepend'; // polozenie na stronie: append | prepend - dol -> domysl:prepend
    var cookie_szerokosc = '1000px' // szerokosc obszaru tekstu: w px -> domysl:1000px

    // tresc o cookies
    var cookie_info = 'Szanowni Państwo, w celu świadczenia usług na najwyższym poziomie, w ramach naszego serwisu wykorzystujemy pliki cookies (tzw. ciasteczka). Korzystając z naszej strony bez zmiany ustawień przeglądarki będą one zapisane w pamięci urządzenia. Jeśli nie wyrażają Państwo zgody, uprzejmie prosimy o dokonanie stosownych zmian w ustawieniach przeglądarki internetowej.';
    // komunikat akceptacji
    var cookie_info_ok = 'Rozumiem. Nie pokazuj więcej tego komunikatu';
    // link np. z polityka prywatnosci lub puste: ''
    var cookie_info_pp = ''; // Kliknij, aby przeczytać <a href="#">politykę prywatności</a>.
/* koniec Ustawienia ***/

if(cookie_waznosc==0) { $.removeCookie('okno_cookie', { path: '/' }); }

if ($.cookie("okno_cookie") != 'pokazuj' ) { // tworz cookie
   
    if(!cookie_waznosc||0===cookie_waznosc.length) var cookie_waznosc='0'; if(!cookie_zamknij||0===cookie_zamknij.length) var cookie_zamknij='fadeOut'; if(!cookie_pozycja||0===cookie_pozycja.length) var cookie_pozycja='prepend'; if(!cookie_szerokosc||0===cookie_szerokosc.length) var cookie_szerokosc='1000px'; if(!cookie_info||0===cookie_info.length) var cookie_info='Wpisz treść o cookie. Pozdrawiam RaVns :) '; if(!cookie_info_ok||0===cookie_info_ok.length) var cookie_info_ok='Podaj tekst akceptacji'; if(!cookie_info_pp||0===cookie_info_pp.length) var cookie_info_pp=''; // domys.
    if(cookie_pozycja=='append') cookie_pozycja_css = 'top:0px'; else cookie_pozycja_css = 'bottom:0px'; if(cookie_pozycja==null) cookie_pozycja_css = '1000px';
    var okno_cookie_box = '<div id="okno_cookie" style="position:fixed;left:0;'+cookie_pozycja_css+';width:100%;min-height:50px;text-align:center;color:#434343;font:normal 11px/1.5 tahoma,sans-serif !important;background-color:#dbdbdb;opacity:0.95;filter:alpha(opacity=95);padding:10px 0;margin:0;z-index:99999;-webkit-box-shadow:1px 1px 20px 1px rgba(100, 100, 100, 0.8);box-shadow:1px 1px 20px 1px rgba(100, 100, 100, 0.8);"><div style="width:'+cookie_szerokosc+';margin:0 auto;text-align:left;padding:0;">' +cookie_info+''+cookie_info_pp+ '<div id="okno_cookie_i" style="color:#780606;cursor:pointer;text-align:center">' +cookie_info_ok+ '</div></div><div id="okno_cookie_x" style="position:absolute;top:15px;right:10px;padding:1px 4px;cursor:pointer;background:#b9b9b9;border:1px solid #858585;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:1px 1px 3px 1px rgba(200, 200, 200, 0.8);box-shadow:1px 1px 3px 1px rgba(200, 200, 200, 0.8);">&#215;</div></div>';
    $('body')[cookie_pozycja](okno_cookie_box);
}

$("#okno_cookie_i,#okno_cookie_x").hover(function() { $(this).css('opacity', '0.7') }, function() { $(this).css('opacity', '1') } );
$('#okno_cookie_i').click(function() { $("#okno_cookie")[cookie_zamknij]('slow'); $.cookie("okno_cookie", "pokazuj", { expires: cookie_waznosc, path: '/' }); /* tworz cookie*/ });
$('#okno_cookie_x').click(function() {  $("#okno_cookie")[cookie_zamknij]('slow'); });

});
VN:F [1.9.22_1171]
Rating: 4.3/6 (3 votes cast)
VN:F [1.9.22_1171]
Rating: -1 (from 1 vote)

Tagi: · · · · · · · · · · ·

Poniższa porada ma raczej charakter ciekawostkowy. A pytanie brzmi: jaką znasz najprostszą poprawną strukturę dokumentu HTML5?

Przechodząc do sedna najprostsza postać HTML5 może wyglądać tak:

<!DOCTYPE html>
<title>Prosty dokument</title>

Zobacz przykład: Prosty dokument HTML5

Patrząc na ten kod zapewne myślisz sobie, że to brednie lub że jest to bezużyteczne. Tak, więc kod jest jak najbardziej poprawnie walidowany przez walidator W3C.

Prosty dokument HTML5

Prosty dokument HTML5 wymaga podania tylko:

  • deklaracji typu dokumentu <DOCTYPE>
  • oraz znacznika tytułowego <title>

Wszelkie inne znaczniki są opcjonalne, a zarazem konieczne do tworzenia rozbudowanych stron.
Dlaczego w walidatorze pojawiły się ostrzeżenia (warnings)? przeczytaj …. (przyszła porada).

Tymczasem, klikając prawym przyciskiem w puste miejsce na tej prostej stronie i wybierając „Zbadaj element” (Google Chrome) w głównym oknie można zauważyć strukturę dokumentu. Jak widać, przeglądarki automatycznie dodają brakujące znaczniki. Zaglądając w źródło strony zobaczymy tylko ten sam kod co napisaliśmy.

Natomiast dokument XHTML, czy HTML 4 musiałby zawierać strukturę typu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Prosty dokument XHTML</title>
</head>
<body>

<p>Przykładowy akapit dokumentu XHTML</p>

</body>
</html>

Prosty dokument XHTML – tu na przykładzie XHTML, który jest także używany.

Ciekawostki:

  • Przykładowo Standard HTML5 wcale nie wymaga stosowania zamykającego znacznika </p>, gdyż przeglądarki automatycznie domykają niezamknięte znaczniki (w HTML5 jest to oficjalny mechanizm).

    Jak można się domyślić takie działanie nie jest zalecane, ponieważ wprowadza pewnien chaos na stronie i może przyczyniać się do pojawiania się błędów. Postawienie np. znacznika div po niezamknięty p wywoła błąd podczas walidacji;
  • HTML5 pozwala też na brak użycia znacznika <title>, pod warunkiem, że zawarte w nim informacje dostarczone są w inny sposób.

    Np. Wysyłanie dokumentu HTML w wiadomości e-mail, gdzie tytuł można zawrzeć w polu do tego przenaczonym, a w zawartości dokumentu resztę znaczników w tym doctype i treść.

Zobacz przykład: Prosty dokument HTML5 ze znacznikiem akapitu

Jak można zauważyć wszelkie inne znaczniki są nieobowiązkowe. Jednak dla usystematyzowania szkieletu dokumentu HTML5 stosuje się tradycyjne komponenty:
(zbiornik dla całego dokumentu HTML)
(zawiera zbiory informacji: , style CSS, skrypty itp.)
(zawiera treść strony: tekst, obrazki wraz ze wszystkimi innnymi znacznikami i różne dołączane elementy webowe)

  • <html> (zbiornik dla całego dokumentu HTML)
  • <head> (zawiera zbiory informacji: , style CSS, skrypty itp.)
  • <body> (zawiera treść strony: tekst, obrazki wraz ze wszystkimi innnymi znacznikami i różne dołączane elementy webowe)
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Podstawowa struktura strony</title>
</head>
<body>

<p>Przykładowy akapit</p>

</body>
</html>

Zobacz przykład: Prosty dokument HTML5 – tradycyjna struktura

W taki oto sposób przeanalizowaliśmy podstawową strukturę dokumentu HTML5.

VN:F [1.9.22_1171]
Rating: 3.5/6 (2 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 2 votes)

Tagi: · · ·

Powered by RaVns


Unikalnych: odwiedzających!
Dziękuję za zainteresowanie :)