Prosty WEB 2.0 generator kodu atrakcyjnych boxów na bloga lub stronę www.

Jeśli ktoś chce umieścić na swoim blogu lub stronie www atrakcyjny box z dowolną zawartością to niekoniecznie musi doskonale opanowywać niuanse kaskadowego systemu stylów CSS,  który to język pozwala na dowolne definiowanie sposobu prezentacji obiektów w przeglądarce. Uporządkowanie jednoznaczności i logiki standardów języków  HTML, CSS oraz JS  stworzyło możliwości tworzenia sieciowych aplikacji. Jedną z nich jest interaktywny generator kodu atrakcyjnych „pudełek” na stronę www lub bloga. Serwis z tym narzędziem dostępny jest pod adresem: http://www.the-html-tool.com/index.php/web-2-0-box-generator.

Narzędzie to ma dwa walory edukacyjne:

1. można sobie wygenerować atrakcyjny wizualnie  gadżet na swoją stronę www lub na swojego bloga
2. może być doskonałym narzędziem ilustracyjnym w nauczaniu budowy dokumentu HTML oraz roli jaką odgrywa w tym CSS. Praktycznie wszystkie zmiany wprowadzane w formularz to zmiany parametrów stylu CSS dokumentu. Serwis pokazuje wizualny efekt zmian od zaraz w czasie rzeczywistym.

Serwis ma wbudowany moduł wyboru wersji językowej serwisu oparty na translatorze Google, co ułatwia obsługę serwisu osobom nie znającym języka angielskiego.

Za pomocą tego serwisu można wygenerować sobie kod atrakcyjnego wizualnie kontenera typu BOX na swojego bloga lub swoja stronę. Zobacz ilustrację niżej.

Zmieniając suwakami parametry elementów formularza bezpośrednio wpływamy na widok „pudełka”, na rysunku zaznaczonego strzałką.  Widoczność zmian następuje w czasie rzeczywistym przy każdej naszej modyfikacji formularza. Dzięki temu możemy dobrać sobie doświadczalnie dowolną formę bloku – pudełka.

Pod polami formularza jest dynamiczne okienko edytora kodu. W polu tym dostępny jest dla nas kod CSS I HTML bloku, jaki sobie sami zaaranżowaliśmy. Wystarczy go skopiować i wkleić do kodu swojego bloga lub strony WWW.

Należy pamiętać, że kod wklejamy do kodu, a nie okna wizualnego edytora tekstowego. Tak jest w popularnych serwisach WordPress, Joomla! czy Drupal. Wszystkie one używają edytorów tekstu podobnych do wszystkich innych edytorów tekstu (np Word czy WordPad lub podobne). Sieciowe edytory w tle zapisują tworzony dokument w formacie HTML. W takiej sytuacji wygenerowany kod BOX (jak każdy inny kod, a nie tekst) należy wkleić do kodu, a nie treści. W tym celu trzeba przejść do trybu widoku kodu. Dostępne są we wszystkich internetowych edytorach pod różną nazwą zakładki: Źródło dokumentu, tekstowy, widok html … lub podobne.

I jeszcze jedna uwaga. Wygenerowany kod lepiej skopiować ze strony z wybranym językiem angielskim, bo automat Google tłumaczy również terminy kodu dostępnego w edytorze co może doprowadzić do nieoczekiwanych błędów wygenerowanego kodu.