Gnacio.eu :: Gnacio Portfolio

Komponenty i moduły w Joomla!

Joomla! jest systemem zarządzania treścią z możliwością dogrania wielu ciekawych i przydatnych modułów i komponentów.

 

Sondy

Wybieramy z menu „Komponenty -> Sondy”. Pojawia nam się strona zarządzania wszystkimi sondami. Aby utworzyć nową sondę klikamy na „Utwórz”. Załaduje nam się strona na której podajemy pytanie i odpowiedzi do sondy. Wybieramy czy sonda ma zostać opublikowana na stornie. Alias możemy pozostawić pusty. CMS sam automatycznie wpisze za nas.

Korespondencja seryjna

Korespondencja seryjna służy do wysyłania maili do wielu użytkowników na raz. Aby użyć korespondencji seryjnej w CMS Joomla wybieramy z menu: „Narzędzia -> Korespondencja”

W szczegółach zaznaczamy czy we wiadomości będzie możliwe używanie znaczników HTML oraz grupy użytkowników do których będzie wysyłana wiadomość (np. do wszystkich zarejestrowanych użytkowników). Obok mamy pole z tematem wiadomości oraz treścią. Aby wysłać korespondencje naciskamy przycisk „Wyślij pocztę”

 

 

 

VirtueMart

Jest to komponent, który umożliwia prowadzenie sklepu internetowego. Aby go zainstalować musimy ściągnąć paczkę instalacyjną np. ze strony www.joomla.pl. Wybieramy „Rozszerzenia -> Instalator” i załadujemy plik z komponentem. Pojawi się ekran powitalny:

 

 

Instalator pyta się czy wprowadzić przykładowe dane. W tej chwili mamy już zainstalowany komponent. Jest dostępny w panelu administratora. Aby zarządzać sklepem wybieramy „Komponenty -> VirtueMart”. Znajdują się tam m.in ustawienia: lista produktów, drzewko kategorii, konfiguracja sklepu, użytkownicy, inne ustawienia.

 

 

 

System ogłoszeń

MisterEstate jest komponentem do CMS Joomla. Służy do zarządzania nieruchomościami. Instalujemy go podobnie jak inne komponenty. Pobieramy archiwum z komponentem na dysk. Wybieramy „Rozszerzenia -> Instalator” i załadujemy plik z komponentem. Pojawi się informacja o prawidłowym zainstalowaniu.

 

 

 

 

Formularz kontaktowy

Nie musimy pisać całego kodu html i php, aby wstawić formularz kontaktowy na stronie. Wystarczy skorzystać z komponentu. Wybieramy „Komponenty -> Kontakt”. Dodajemy nowy. Wypełniamy dane i formularz gotowy.

 

 

 

MamBot

MamBoty są to dodatki w postaci skryptów, poprawiające funkcjonalność systemu zarządzania treścią. Aby zainstalować mambota, ściągamy plik ze spakowanym archiwum, przechodzimy do „Rozszerzenia -> Instalator” i załadujemy plik z komponentem. Nasz Mambot został zainstalowany.

 

 

 

Artykuły

Aby zarządzać artykułami wybieramy z menu „Artykuły -> Artykuły – wszystkie” i wyświetli nam się lista wszystkich znajdujących się w bazie danych artykułów. Aby utworzyć nowy artykuł, wybieramy z górnego menu „Utwórz”. Jeżeli chcemy edytować istniejący już artykuł, klikamy na jego nazwę. Joomla wyposażona jest w edytor tekstu WYSIWYG, dzięki czemu praca jest dużo wygodniejsza. Podajemy tytuł artykułu, alias możemy zostawić pusty. Wybieramy czy artykuł ma zostać opublikowany i czy ma znajdować się na stronie głównej. Niżej znajduje się pole tekstowe z treścią artykułu. Po skończonej pracy klikamy „Zapisz”, aby zapisać zmiany i wyjść z artykułu.

 

 

 

 

 

Forum dyskusyjne

Aby zainstalować forum na CMS Joomla musimy najpierw pobrać komponent. Przykładowo użyje komponentu Agora Forum 3.0.06 PL dla Joomla 1.5.x. Gdy już mamy pobrany komponent na dysku wgrywamy pliki na serwer ftp. Następnie wybieramy w panelu administracyjnym z menu: „Rozszerzenia -> Instalator”. Pojawiła się strona z wyborem pliku lub podaniem ścieżki do niego. Wybieramy plik z dysku i klikamy „Wczytaj plik & zainstaluj”. Nasz komponent został zainstalowany i jest dostępny w menu: „Komponenty -> Agora”.

 

Tagi: agora, Artykuły, cms, formularz kontaktowy, forum dyskusyjne, joomla, komponenty, korespondencja seryjna, MamBot, moduły, php, porady, sklep, skrypt, sondy, system ogłoszeń, tutorial, VirtueMart, web 2.0

Model DOM

DOM (Document Object Model – Obiektowy model dokumentu) – jest to sposób przedstawienia elementów znajdujących się na stronie internetowej w postaci obiektów, które możemy obrabiać za pomocą np. języka JavaScript. Obiektowy model dokumentu umożliwia przetwarzanie złożonych dokumentów XML i XHTML w postaci obiektów. DOM jest w stanie przetwarzać także pliki CSS. Model DOM jest niezależny od języka w których programujemy oraz platformy. Metody DOM są dostępny nie tylko w JavaScript. Tak samo można operować na m.in. w Java lub PHP5.

Używany jest do uzyskiwania dostępu oraz aktualizacji zawartości, stylu oraz struktury dokumentów XML i XHTML. Model obiektu składa się z obiektów, właściwości, metod i zdarzeń, które mogą reprezentować oraz wpływać na składniki dokumentu. Model DOM umożliwił programistom szybkie i łatwe wykorzystanie plików XML w celu przechowywania danych.

Model przechowuje dane XML w strukturze hierarchicznej, podobnej do drzewa. Document Object Model umożliwia dostęp do każdego składnika dokumentu. Także do jego elementów, atrybutów, instrukcji przetwarzania, komentarzy oraz deklaracji jednostek. Do modelu może być załadowany dowolny dokument XML. Po załadowaniu dokumentu do modelu, dokument XML jest czytany od początku do końca i przechowywany w modelu DOM jako model węzłów.

Document Object Model nie istniał w pierwszych przeglądarkach. Twórcy najpopularniejszych przeglądarek internetowych takich jak Microsoft czy Netscape tworzyli własne, niezgodne ze sobą modele. Organizacja W3C przygotowała standard obiektowego modelu dokumentu. Podobny do wersji Microsoftu. Współczesne przeglądarki internetowe z każda kolejna wersją coraz lepiej obsługują model DOM zgodny ze standardami W3C.

Model DOM przyczynił się do powstania nowych technologii, jak np. AJAX (Asynchronous JavaScript and XML). AJAX jest to technika tworzenia aplikacji internetowych, w których interakcja użytkownika z serwerem odbywa się bez przeładowania całej strony. AJAX wykorzystywany jest obecnie bez integracji z plikami XML. Rozwój AJAXa zawdzięczamy modelowi DOM.

Istnieje kilka poziomów modelu DOM:

• DOM LEVEL 0 (nieoficjalny) – jest to model przeglądarki Netscape 3.0. Później skopiowany przez Microsoft. Nie jest oficjalnym standardem W3C. Umożliwia dostęp tylko do pól formularzy.
• DOM LEVEL 1 – umożliwia dostęp do treści dokumentu tworzenie, modyfikowanie i dodawanie elementów i atrybutów.
• DOM LEVEL 2 – poziom wprowadza obsługę zdarzeń
• DOM LEVEL 3 – na poziom trzeci składa się kilka elementów:
  • DOM LEVEL 3 Core
  • DOM LEVEL 3 Load and Save
  • DOM LEVEL 3 XPath
  • DOM LEVEL 3 Views and Formatting
  • DOM LEVEL 3 Requirements
  • DOM LEVEL 3 Validation

Podstawowe metody można wywołać na dowolnym elemencie dokumentu lub na samym obiekcie:

document.

Element można odnajdywać np. po identyfikatorze, nazwie elementu czy nazwie tagu.

Aby odnaleźć element po identyfikatorze musimy przypisać document.getElementById do zmiennej:

var obj = document.getElementById(‘obj’);

Podobnie robimy z nazwą elementu i nazwą taga:

var obj = document.getElementByName(‘obj’);

lub:

var obj = document.getElementByTagName(‘obj’);

 

Należy uważać na pisownie małych i wielkich liter.

 

Aby utworzyć element wpisujemy:

var obj = document.createElement(‘obj’);

W ten sposób utworzymy element, ale nie będzie on dodany do dokumentu. Aby element pojawił się w dokumencie musimy użyć funkcji appendChild, która dołącza element na koniec dokumentu:

document.body.appendChild(obj);

Tagi: ajax, document object model, model dom, obiektowy model dokumentu, porady, skrypt, tutorial, web 2.0

jMenu – dynamiczne menu w jQuery

JavaScript / CSS – menu
jMenu
Licencja: CC
Demo: ajax.gnacio.eu/jmenu
Pobierz: download.gnacio.eu

jMenu jest wtyczką napisaną przy pomocy bibliotek jQuery, która umożliwia nam tworzenie poziomych nawigacji z nieograniczoną liczba podmenu. Skrypt obsługuje wszystkie efekty tej biblioteki (jak FadeIn czy slideDown). Wygląd jest zapisany w pliku CSS, więc modyfikacja na własne potrzeby nie sprawi dużych problemów (chyba, że ktoś nie zna css ;p).

Tagi: ajax, css, download, FadeIn, jQuery, menu, porady, skrypt, slideDown, tutorial, web 2.0

Mobilna strona

Od dzisiaj ta strona – Projektowanie stron www dostępna jest w wersji mobilnej. Wprowadziłem też kilka innych drobnych zmian. Jedna z nich jest np. wysyłanie treści na takie portale jak: facebook, wykop, twitter czy dodanie do ulubionych oraz drukowanie i zapisywanie do PDF. Wkrótce kolejne zmiany.

Tagi: drukowanie, facebook, favorite, mobile, pdf, print, serwer, skrypt, telefony, twitter, ulubione, wordpress, wykop, zabezpieczenia, zmiany

Boty

Po nazwie tematu każdy może zastanawiać się o co w tym chodzi :D
Ostatnio przez przypadek trafiłem na stronę z bazą 145396 botów (oczywiście tych szkodliwych)
Są podane takie informacje jak:

• Nazwa bota
• E-mail
• Adres IP

Można w bardzo łatwy sposób wyszukać użytkownika i sprawdzić czy to nie jest bot.
Strona przyda się szczególnie administratorom stron i for.
Adres: http://www.botscout.com/

Tagi: boty, php, porady, serwer, skrypt, tutorial, zabezpieczenia

TJPzoom 3 – ajax’owy zoom

JavaScript / CSS / DOM – powiększenie obrazu
TJPzoom 3
Autor: Janos Pal Toth
Email autora: valid@tjp.hu
Licencja: Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.
Demo: ajax.gnacio.eu/tjpzoom
Pobierz: download.gnacio.eu

Co to jest?
Jest to skrypt tzw. lupki. Można ją wykorzystać do powiększania zdjęć. Na pewno się przyda na stronach/forach graficznych i nie tylko.

Jak działa?
Jeśli przesuniesz mysz nad obrazem, można nieco powiększyć okno z wersji powiększony o część obrazu w nim. Ale to nie wszystko:

• kliknij i przeciągnij myszy w górę, powoduje przybliżenie,
• kliknij i przeciągnij mysz w dół, to powoduje pomniejszenie,
• kliknij i przeciągnij, aby PRAWO myszy, powiększenie okna,
• kliknij i przeciągnij w lewo, myszy, pomniejszenie okna.

Nowa wersja posiada:

• posiada przejrzysty spadek cień (IE6 +)
• działa szybciej
• znacznie czystszy kod

Skrypt jest zgodny z przeglądarkami:

• Internet Explorer 6, 7
• Firefox 2
• Opera 8.54
• Safari 2
• Konqueror 3.5.6

Tagi: ajax, porady, skrypt, tutorial, web 2.0, zoom