html

Tworzenie pierwszego plugina(wtyczki) do WordPressa

W ostatnim czasie potrzebowałem bardzo prostej wtyczki do WordPressa, która będzie dodawała informacje o Cookie na dole strony. Pomimo tego, że nie znam za bardzo kodu WordPressa postanowiłem napisać plugin. Tworzenie pierwszego plugina(wtyczki) do WordPressa rozpocząłem od studiowania dokumentacji.

Założenia są proste:

Użytkownik może zmodyfikować treść informacji o cookies.
Użytkownik może wybrać styl buttona
Skrypt działa na podstawie JQuery
Możliwa edycja parametrów skryptu w panelu administracyjnym

Po poznaniu dokumentacji tworzenia pluginów wordpressa zacząłem działać. […]

Autor |Maj 17th, 2014|PHP, Wordpress|3 komentarze

Responsive web design

Responsive web design to ostatnio bardzo popularne pojęcie. RWD to projektowanie stron tak, by dostosowywały się one do rozdzielczości ekranu, na których są wyświetlane. Celem Responsive Web Design jest zaprojektowanie strony w taki sposób by była ona czytelna, przejrzysta, posiadała prostą nawigację z minimalną ilością suwaków.

W odróżnieniu do zwykłego stylowania w Responsive Web Design […]

Autor |Luty 26th, 2014|Tworzenie stron internetowych|2 komentarze

Jak zacząć tworzenie stron internetowych 2/2

W poprzednim artykule pisałem o tworzeniu stron internetowych od strony frontendu, czyli tego co widzi użytkownik. W tym skupię się na stronie backendowej, czyli na tym co dzieje się po stronie serwera www.
Komunikacja przeglądarka-serwer
Na początku musisz uświadomić sobie jak to się dzieje, że użytkownik po wpisaniu adresu otrzymuję stronę. Wszystko odbywa się za pomocą […]

Autor |Luty 20th, 2014|PHP, Tworzenie stron internetowych|0 komentarzy

Dynamiczne wyszukiwanie danych w tabeli JQuery

Często napotykanym problemem przez programistów jest dynamiczne wyszkukiwanie danych w tabeli. Problem ten można łatwo rozwiązać używając funkcji filter() dostępnej w bilbliotece JQuery.

Funkcja filter() w Jquery ograniczna zbiór dopasowanych lementów do tych które odpowiadają selektorowi lub spełniają test funkcji.
Kolorowanie co drugiego elementu listy
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
Za pomocą jquery piszemy kod:
$( "ul li" ).filter( ":even" ).css( "background-color", "red" );
Funkcja dopasuje parzyste elementy i wykona na nich funkcje css(), która zmieni kolor na czerwony. Oczywiście w tym prostym przykładzie wystarczy, że zastosujemy prosty css i efekt dostaniemy taki sam, ale chodzi o pokazanie działania funkcji filter().
Użycie funkcji testującej
Druga forma funkcji filter() pozwala nam na zastosowanie funkcji sprawdzającej. Dla każdego elementu, na którym zostanie wykonana funkcja filter, zostanie przeprowadzony test funkcji, którą piszemy sami.

Przykładowy kod:
<ul>
<li><strong>list</strong> item 1 – one strong tag</li>
<li><strong>list</strong> item <strong>2</strong> –
two <span>strong tags</span></li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
Możemy filtrować elementy listy na podstawie ich zawartości.
$( "li" )
.filter(function( index ) {
return $( "strong", this ).length === 1;
})
.css( "background-color", "red" );
Ten kod na każdym elemencie listy(<li>) wykona metodę filter, która posiada funkcje sprawdzającą. Funkcja ta sprawdza czy w danym elemencie listy znajduje się więcej niż jeden tag <strong>. Jeżeli tak jest to wykonana jest funkcja CSS, która zmieni kolor tła elementu na czerwony. Przeczytaj więcej, aby dowiedzieć się o dynamicznym wyszukiwaniu elementów w tabeli.  […]

Autor |Luty 19th, 2014|JavaScript, Tworzenie stron internetowych|21 komentarzy

Walidacja adresu e-mail w PHP

Jednym z często występujących problemów wśród webmasterów jest walidacja adresu e-mail. W PHP do walidacji danych używana jest funkcja preg_match. Funkcja ta przyjmuje jako pierwszy parametr wyrażenie regularne, natomiast drugi parametr to tekst, który ma zostać sprawdzony. Do większości potrzeb wystarczą proste wyrażenia regularne, jednak jeżeli chcemy być w 100% zgodni ze standardem powinniśmy użyć wyrażenia regularnego, które jest zgodne z RFC

[…]

Autor |Grudzień 10th, 2013|PHP, Tworzenie stron internetowych|0 komentarzy

Jak zrobić button w CSS3 wraz z gradientami i efektami

Większość programistów tworzy buttony w programach graficznych. Jednakże, można zrobić to o wiele łatwiej bez konieczności umieszczania grafiki na serwerze. Jak wiadomo im szybciej strona się ładuje tym lepiej; krótki czas ładowania strony ma ogromne znaczenie dla wyszukiwarek i każdy specjalista SEO powinien o tym wiedzieć. Poza tym strona obładowana grafiką nie łąduje się szybko na wolnych łączach internetowych.

Aby stworzyć button skorzystam z kilku efektów CCS3 takich jak text-shadow, box-shadow, linear gradient oraz border-radius.

text-shadow – odpowiada za cieniowanie tekstu
box-shadow odpowiada za cieniowanie pojemnika(kontenera, warstwy itp)
border-radius – jest to efekt, który zaokrągli nam warstwę.

[…]

Odliczanie czasu w Jquery

Kolejny wpis poświęcę na napisanie prostego skryptu do odliczania czasu w Jquery. Często takie skrypty wykorzystywane są w stronach i aplikacjach www np. do odliczania czasu pozostałego do automatycznego wylogowania się z aplikacji.

Do tego celu wykorzystam dwie bardzo ciekawe funkcje w JavaScript mianowicie setInterval() oraz clearInterval().

Funkcja setInterval przyjmuje dwa argumenty pierwszym z nich jest […]

Autor |Grudzień 5th, 2013|Tworzenie stron internetowych|0 komentarzy

Tworzenie stron internetowych w modelu MVC

MVC jest to model programistyczny dzielący aplikację na trzy warstwy: model, widok(view) oraz kontroler(controller).

Model jest to warstwa odpowiadająca za obliczenia. Dzięki plikom modelów, możemy pobrać informacje z plików, bazy danych oraz odpowiednio je przetworzyć.

Widok jest warstwą prezentacji, dzięki której użytkownik może zobaczyć efekt działania aplikacji. W przypadku stron internetowych są to zazwyczaj pliki html.

Kontroler jest to warstwa, która łączy widok z modelem. Kontroler ma akcje, które są wywoływane na podstawie odpowiednich parametrów podanych przez użytkownika np. adres strony internetowej.
Praktyczne użycie wzorca MVC
Wyobraźmy sobie sytuacje, gdzie użytkownik wchodzi na stronę internetową pod adresem „http://rpodwika.pl/pliki/pobierzplik/id/3” co się wtedy dzieje?

Podczas wywołania tego adresu kontroller wie, że musi przekazać działanie kontrolerowi „pliki” a następnie wywołać akcje „pobierzplik” i przekazać parametr „id” o wartości „3”. Następnie w tej akcji tworzymy nowy obiekt modelu, który na podstawie wartości 3 zwróci odpowiednie dane, które zostaną wyświetlone za pomocą widoku „pliki/pobierzplik.html”

[…]

Autor |Grudzień 2nd, 2013|PHP, Tworzenie stron internetowych|2 komentarze

Jquery prosty skrypt zakładek

W poprzedniej części omawiałem animacje, tym razem przyszedł czas na prosty skrypt zakładek napisany w JQuery. W poprzednich częściach omawiałem obsługę zdarzeń i kilka funkcji, które w zupełności wystarczają do napisania takiego skryptu.

Pisanie skryptów w JQuery powinniśmy zacząć od poprawnej struktury kodu HTML. W zakładkach będziemy potrzebować elementów, które możemy kilknąć by przejść do […]

Autor |Listopad 29th, 2013|Tworzenie stron internetowych|0 komentarzy

Jquery – podstawy animacji

W poprzednim wpisie przedstawiłem obsługę zdarzeń oraz selektory. W tym wpisie pokażę gotowy przykład, który wykorzystuje animacje. Do zrozumienia tego przykładu będzie potrzebna podstawowa wiedza z CSS, JavyScript oraz HTML.

Potrzebne nam będą 3 warstwy html, jako obiekt warstwy możemy użyć znacznika DIV
<div class="pudelko"></div>
<div class="pudelko zaaograglone"></div>
<div class="pudelko wypasione"></div>
Warstwy te zawierają 3 pudelka, które posłużą nam do zaprezentowania animacji JQuery.

Aby te „pudełka” nabrały wyglądu należy je odpowiednio wystylować, użyję do tego CSS
div.pudelko{width:100px; height:100px; margin:5px; float:left; background-color:red;}
div.pudelko.zaaograglone{border-radius:25px;}
div.pudelko.wypasione{border: 4px solid black;}
Ogólnie każde pudełko ma rozmiar 100×100 px w ogół margines 5px. Pudełka układane są od lewej strony oraz mają czerwony kolor tła. Pudełko zaaokrąglone posiada zaokrąglenie 25px a pudełko wypasione posiada obramowanie o szerokości 4px w kolorze czarnym.

Czas na JQuery.  […]

Autor |Listopad 28th, 2013|Tworzenie stron internetowych|0 komentarzy

Jak stworzyć stronę internetową część 1

Jeżeli trafiłeś/trafiłaś na tą stronę to pewnie zastanawiasz się jak wygląda proces tworzenia stron internetowych. Pozwól, że Ci to wyjaśnię. Postaram się by ten wpis był zrozumiały dla osób nietechnicznych. Do zrozumienia tekstu wymagana jest znajomość kilku pojęć:

HTML – język znacznikowy dzięki, któremu wyświetlane są strony www
CSS – jest to język służący do stylowania […]