Witajcie w kolejnej odsłonie cyklu Wyszperane w Internecie
W poprzednim poście przedstawiłem Wam bibliotekę processing.js. Dzisiaj chcę Wam opowiedzieć o kolejnej bibliotece dotyczącej grafiki - p5.js.
P5.js, tak samo jak processing.js oparty jest o ideę towarzyszącą językowi Processing. Tutaj nasuwa się pytanie - czym się w takim razie różnią? Strona Sitepoint tłumaczy to tym, że w p5.js składnia Javascriptu tłumaczona jest na język Processing, który może być uruchamiany na wielu platformach. Natomiast processing.js to konwerter kodu Processing na składnię Javascriptu. W zależności od tego, jaki umiemy język programowania (Processing, czy Javascript), takiej biblioteki używamy.
Nie będzie to dla nas dużym zaskoczeniem, jeśli napiszę, że według twórców biblioteka jest dobra do nauczenia się programowania przez artystów, nauczycieli oraz dla wszelkiej maści początkujących w tej dziedzinie.
Na cały projekt P5 składa się wiele bibliotek, które pozwalają nam manipulować obiektami HTML5, takimi jak tekst, dane wejściowe (input), obraz, dźwięk, kamera itp. Daje to ogromne możliwości do modyfikacji naszej strony, aby miała jeszcze więcej "wodotrysków".
Poniżej przedstawiam kilka przykładowych rozwiązań dla tej biblioteki, jakie znalazłem w Internecie:
Biblioteka jest dopiero w fazie rozwoju, więc nie ma dla niej edytowalnego środowiska, ale twórcy, czyli Lauren McCarthy i zebrana wokół niej społeczność będą rozwijać projekt i dodać nowe funkcjonalności.
Co ciekawe, obie biblioteki (p5.js i processing.js) nie konkurują ze sobą, ponieważ jednym ze wspierających przedsięwzięcie jest Processing Foundation - fundacja opiekująca się i rozwijająca język Processing. Dzięki temu można liczyć na to, że biblioteka będzie się rozwijała w dobrym kierunku.
Myślę, że warto obserwować ten projekt, ponieważ jest on stosunkowo nowy oraz dostarczy wielu ciekawych funkcjonalności, czekających tylko na to, aby wdrożyć je w naszym projekcie. Niech przykładem będzie dla nas strona startowa projektu. Teraz się nie dziwię, że używając p5.js mamy traktować stronę internetową jak płótno.
Damian
środa, 29 marca 2017
wtorek, 28 marca 2017
Postownia cz. 5
Cześć,
już 5 tydzień piszę Wam o postępach w pracach nad Postownią. Od ostatniego posta dodałem kolejną funkcjonalność do projektu.
Od teraz użytkownicy mogą edytować swoje posty. Po zalogowaniu się do strony widzimy następujący widok:
Jak widzimy, użytkownik (w tym wypadku o nicku Damian) może dodać post, usunąć swój post lub dokonać edycji już istniejących. Tak samo, jak dla usuwania postów, użytkownik widzi przycisk edycji tylko przy swoich postach. Dodatkowo po stronie serwera badam, czy post, który ma być edytowany, faktycznie należy do użytkownika. Po prostu nie lubię, jak ktoś grzebie w nieswoich rzeczach. :)
Użytkownik klika w przycisk Edit i widzi takie oto coś;:
Po kliknięciu pojawia się nowe pole tekstowe z treścią posta, który edytujemy. Edytujemy post i klikamy Send (muszę jeszcze ten przycisk przenieść pod pole tekstowe). Powiedzmy, że zmienię ten post na inny o treści "Huba buba".
Na serwerze następuje zamiana treści posta i wysyłane są posty do ponownego wyświetlenia. Po przeładowaniu strony znika pole tekstowe do edycji posta.
Wiem, że wygląd strony jest dosyć ascetyczny i odpychający, ale chwilowo nie zajmuję się tutaj grafiką. Na razie poznaję tajniki Javascriptu i komunikacji na linii klient - serwer i przyznaję, że idzie mi to coraz lepiej.
W następnym tygodniu przedstawię Wam kolejną funkcjonalność, którą chcę dodać - role użytkowników.
Damian
już 5 tydzień piszę Wam o postępach w pracach nad Postownią. Od ostatniego posta dodałem kolejną funkcjonalność do projektu.
Od teraz użytkownicy mogą edytować swoje posty. Po zalogowaniu się do strony widzimy następujący widok:
 |
| Widok po zalogowaniu |
Jak widzimy, użytkownik (w tym wypadku o nicku Damian) może dodać post, usunąć swój post lub dokonać edycji już istniejących. Tak samo, jak dla usuwania postów, użytkownik widzi przycisk edycji tylko przy swoich postach. Dodatkowo po stronie serwera badam, czy post, który ma być edytowany, faktycznie należy do użytkownika. Po prostu nie lubię, jak ktoś grzebie w nieswoich rzeczach. :)
Użytkownik klika w przycisk Edit i widzi takie oto coś;:
 |
| Teraz możemy edytować post |
Po kliknięciu pojawia się nowe pole tekstowe z treścią posta, który edytujemy. Edytujemy post i klikamy Send (muszę jeszcze ten przycisk przenieść pod pole tekstowe). Powiedzmy, że zmienię ten post na inny o treści "Huba buba".
 |
| Teraz widzimy zmieniony post |
Na serwerze następuje zamiana treści posta i wysyłane są posty do ponownego wyświetlenia. Po przeładowaniu strony znika pole tekstowe do edycji posta.
Wiem, że wygląd strony jest dosyć ascetyczny i odpychający, ale chwilowo nie zajmuję się tutaj grafiką. Na razie poznaję tajniki Javascriptu i komunikacji na linii klient - serwer i przyznaję, że idzie mi to coraz lepiej.
W następnym tygodniu przedstawię Wam kolejną funkcjonalność, którą chcę dodać - role użytkowników.
Damian
niedziela, 26 marca 2017
Wyszperane w Internecie cz. 4
Cześć,
w dzisiejszym poście z cyklu Wyszperane w Internecie przedstawię Wam jedną z bibliotek Javascriptu, którą znalazłem i wydała mi się bardzo interesująca.
Mowa o processing.js. Biblioteka ta jest siostrzaną wersją języka programowania Processing, stworzonego przez Bena Fry'a i Casey Reas na MIT. Processing, wraz z całym środowiskiem IDE, miał pomagać uczyć się programowania ludziom z tym niezwiązanym. Miało to zostać osiągnięte przez efekty wizualne, jakie od razu się pojawiają po napisaniu kodu oraz jego uproszczeniu składni do tworzenie grafiki w Javie. Dlatego język ten wykorzystywany jest w sztuce elektronicznej i projektowaniu graficznym. Przełożeniem tego języka na Javascript jest właśnie biblioteka processing.js.
Twórcy biblioteki chwalą się, że jej możliwości można wykorzystać do wizualizacji danych, sztuki cyfrowej, interaktywnych animacji, tworzenia edukacyjnych wykresów, gier wideo bez używania dodatkowych pluginów.
Strona projektu zawiera wiele ciekawych przykładów wykorzystania biblioteki, jak na przykład wąż poruszający się za kursorem, interaktywne wykresy czy prosty zegar. Pod każdym przykładem jest kod, który generuje dany przykład. Jest to duży plus dla twórców.
Uważam, że biblioteka daje ogromne możliwości graficzne i nadaje się idealnie dla stron bazujących na wyświetlaniu grafiki (strony poświęcone ekonomii, blogi artystów, big data), ponieważ można osiągnąć świetne efekty przy małym nakładzie pracy i kodu. Tak więc jeśli tworzysz grafikę, a nie znasz tej biblioteki, to wiesz, co masz teraz przejrzeć :)
Damian
PS Na koniec jeszcze jeden ciekawy przykład - interaktywne akwarium
w dzisiejszym poście z cyklu Wyszperane w Internecie przedstawię Wam jedną z bibliotek Javascriptu, którą znalazłem i wydała mi się bardzo interesująca.
Mowa o processing.js. Biblioteka ta jest siostrzaną wersją języka programowania Processing, stworzonego przez Bena Fry'a i Casey Reas na MIT. Processing, wraz z całym środowiskiem IDE, miał pomagać uczyć się programowania ludziom z tym niezwiązanym. Miało to zostać osiągnięte przez efekty wizualne, jakie od razu się pojawiają po napisaniu kodu oraz jego uproszczeniu składni do tworzenie grafiki w Javie. Dlatego język ten wykorzystywany jest w sztuce elektronicznej i projektowaniu graficznym. Przełożeniem tego języka na Javascript jest właśnie biblioteka processing.js.
Twórcy biblioteki chwalą się, że jej możliwości można wykorzystać do wizualizacji danych, sztuki cyfrowej, interaktywnych animacji, tworzenia edukacyjnych wykresów, gier wideo bez używania dodatkowych pluginów.
Strona projektu zawiera wiele ciekawych przykładów wykorzystania biblioteki, jak na przykład wąż poruszający się za kursorem, interaktywne wykresy czy prosty zegar. Pod każdym przykładem jest kod, który generuje dany przykład. Jest to duży plus dla twórców.
Uważam, że biblioteka daje ogromne możliwości graficzne i nadaje się idealnie dla stron bazujących na wyświetlaniu grafiki (strony poświęcone ekonomii, blogi artystów, big data), ponieważ można osiągnąć świetne efekty przy małym nakładzie pracy i kodu. Tak więc jeśli tworzysz grafikę, a nie znasz tej biblioteki, to wiesz, co masz teraz przejrzeć :)
Damian
PS Na koniec jeszcze jeden ciekawy przykład - interaktywne akwarium
sobota, 25 marca 2017
Postownia cz. 4
Witajcie w kolejnym poście z cyklu Postownia. Tak jak co tydzień opiszę, co zrobiłem przez ostatni tydzień w projekcie.
Przechodząc do konkretów.
Dodałem kolejną funkcjonalność, która jest must have dla blogów, mikroblogów, forów itp. Mianowicie usuwanie postów.
Teraz po zalogowaniu się użytkownik widzi swoje posty wraz z przyciskiem Delete, tak jak to wygląda na screenie poniżej.
Oczywiście użytkownik może usuwać tylko swoje posty. Na zrzucie ekranu jestem zalogowany jako używkownik "Damian" i tylko mogę usunąć posty użytkownika "Damian".
Proces weryfikacji, czy faktycznie użytkownik usuwa swoje posty, jest dwuetapowy. O pierwszym etapie już wspomniałem przed chwilą. Drugim etapem jest weryfikacja po stronie serwera, czy usuwany post należy do użytkownika, który go usuwa. Jest to dodatkowe zabezpieczenia, aby nawet grzebiąc w kodzie strony, nikt niepowołany nie usuwał dowolnych postów.
Po usunięciu postu strona się odświeża z aktualną zawartością.
Myślę, że więcej nie muszę wyjaśniać. Ale jeśli macie jakieś pytania, śmiało zostawiajcie je w komentarzach. :)
Damian
Przechodząc do konkretów.
Dodałem kolejną funkcjonalność, która jest must have dla blogów, mikroblogów, forów itp. Mianowicie usuwanie postów.
Teraz po zalogowaniu się użytkownik widzi swoje posty wraz z przyciskiem Delete, tak jak to wygląda na screenie poniżej.
 | ||
| Dodałem przycisk Delete |
Oczywiście użytkownik może usuwać tylko swoje posty. Na zrzucie ekranu jestem zalogowany jako używkownik "Damian" i tylko mogę usunąć posty użytkownika "Damian".
Proces weryfikacji, czy faktycznie użytkownik usuwa swoje posty, jest dwuetapowy. O pierwszym etapie już wspomniałem przed chwilą. Drugim etapem jest weryfikacja po stronie serwera, czy usuwany post należy do użytkownika, który go usuwa. Jest to dodatkowe zabezpieczenia, aby nawet grzebiąc w kodzie strony, nikt niepowołany nie usuwał dowolnych postów.
Po usunięciu postu strona się odświeża z aktualną zawartością.
Myślę, że więcej nie muszę wyjaśniać. Ale jeśli macie jakieś pytania, śmiało zostawiajcie je w komentarzach. :)
Damian
sobota, 18 marca 2017
Wyszperane w Internecie cz. 3
Cześć,
w kolejnym poście z cyklu Wyszperane w Internecie opowiem Wam o jednym z modułów, który pomógł mi zrobić jedną rzecz w Postownii, która na pierwszy rzut oka wydaje się prosta i banalna do stworzenia, ale taka nie jest.
Tym modułem jest ejs.js.
ejs.js <% Embedded JavaScript %> służy do generowania szablonu HTML na poziomie serwera przy wykorzystaniu Javascriptu. Pomiędzy znaczniki <% %> wpisujemy kod Javascriptu, którego działanie jest wyświetlone na naszej stronie. Jest to bardzo przydatne, gdy musimy wyświetlić spersonalizowaną treść.
Jednym z przykładów podanych na stronach twórców tutaj i tutaj jest wyświetlenie w punktach zawartości Javascriptowej listy. Tak więc jak to robimy?
W header przesyłamy tą listę wraz z nazwą zmiennej, po jakiej będziemy się do niej odwoływać, a w szablonie HTML piszemy w znacznikach podanych wyżej kod Javascriptu, który nam to wyświetli. Należy również pamiętać o tym, że plik z szablonem HTML i kodem ejs nie może mieć rozszerzenia .html, ale .ejs. Jeśli o tym zapomnimy, to wyświetli nam się błąd.
Drugą ważną rzeczą do zapamiętania korzystając z ejs.js jest funkcja wysyłająca szablon HTML do klienta. Gdy wysyłamy stronę z rozszerzeniem .ejs używamy funkcji render, gdzie pierwszy argument to szablon strony, a drugi to zmienne przesyłane do header. (drugi argument jest opcjonalny)
A do czego ja wykorzystałem ten moduł?
Tak jak wspomniałem wcześniej, do rzeczy wydającej się prosta i oczywista. Jednak taka nie była.
Za pomocą ejs.js chciałem wyświetlić nick użytkownika przy jego poście, który dopiero co dodał.
Jak to robię?
Przy logowaniu się użytkownika do Postownii przesyłam jego nick używając ejs.js i umieszczam go w input type hidden. Dzięki temu zabiegowi przy dodaniu nowego postu przez użytkownika sczytuję jego nick i mogę dodać nowy post do pliku JSON z nick'iem właściwego autora i wyświetlić na stronie post z nazwą autora.
Mam nadzieję, że ten krótki opis pomoże Wam wykorzystać moduł ejs.js we własnych projektach. W razie pytań zadawajcie je w komentarzach.
Damian
w kolejnym poście z cyklu Wyszperane w Internecie opowiem Wam o jednym z modułów, który pomógł mi zrobić jedną rzecz w Postownii, która na pierwszy rzut oka wydaje się prosta i banalna do stworzenia, ale taka nie jest.
Tym modułem jest ejs.js.
ejs.js <% Embedded JavaScript %> służy do generowania szablonu HTML na poziomie serwera przy wykorzystaniu Javascriptu. Pomiędzy znaczniki <% %> wpisujemy kod Javascriptu, którego działanie jest wyświetlone na naszej stronie. Jest to bardzo przydatne, gdy musimy wyświetlić spersonalizowaną treść.
Jednym z przykładów podanych na stronach twórców tutaj i tutaj jest wyświetlenie w punktach zawartości Javascriptowej listy. Tak więc jak to robimy?
W header przesyłamy tą listę wraz z nazwą zmiennej, po jakiej będziemy się do niej odwoływać, a w szablonie HTML piszemy w znacznikach podanych wyżej kod Javascriptu, który nam to wyświetli. Należy również pamiętać o tym, że plik z szablonem HTML i kodem ejs nie może mieć rozszerzenia .html, ale .ejs. Jeśli o tym zapomnimy, to wyświetli nam się błąd.
Drugą ważną rzeczą do zapamiętania korzystając z ejs.js jest funkcja wysyłająca szablon HTML do klienta. Gdy wysyłamy stronę z rozszerzeniem .ejs używamy funkcji render, gdzie pierwszy argument to szablon strony, a drugi to zmienne przesyłane do header. (drugi argument jest opcjonalny)
A do czego ja wykorzystałem ten moduł?
Tak jak wspomniałem wcześniej, do rzeczy wydającej się prosta i oczywista. Jednak taka nie była.
Za pomocą ejs.js chciałem wyświetlić nick użytkownika przy jego poście, który dopiero co dodał.
Jak to robię?
Przy logowaniu się użytkownika do Postownii przesyłam jego nick używając ejs.js i umieszczam go w input type hidden. Dzięki temu zabiegowi przy dodaniu nowego postu przez użytkownika sczytuję jego nick i mogę dodać nowy post do pliku JSON z nick'iem właściwego autora i wyświetlić na stronie post z nazwą autora.
Mam nadzieję, że ten krótki opis pomoże Wam wykorzystać moduł ejs.js we własnych projektach. W razie pytań zadawajcie je w komentarzach.
Damian
środa, 15 marca 2017
Postownia cz. 3
Cześć,
dzisiaj mijają równo 2 tygodnie od rozpoczęcia konkursu "Daj się poznać" i od kiedy robię projekt Postownia. Jest to intensywny czas nauki Javascriptu, ale bardzo mi się podoba takie tempo. Polubiłem ten język programowania. Jest przyjemniejszy do obsługi niż typowe języki obiektowe. Zawsze szybciej się odnajdywałem w rzeczach typowo funkcynych, aniżeli obiektowych.
Przez ostatni tydzień dodałem dwie całkiem ważne funkcjonalności do mojego mini portalu: zakładanie użytkowników oraz dodawanie nowych postów na stronie.
Użytkownik, chcąc założyć sobie konto, podaje tylko login i hasło i od razu zostaje przekierowany na stronę z postami, gdzie może już tworzyć komentarze. Loginy i hasła przechowuję w pliku JSON, gdzie login to klucz, a hasło to wartość hashmapy. Przy okazji poćwiczyłem pracę na plikach JSON oraz obsługę plików z poziomu node.js i modułu fs.js. Na razie możliwe jest utworzenie użytkownika o tej samej nazwie - po prostu hasło zostanie nadpisane.
Tak jak wspomniałem wyżej, drugą funkcjonalnością dodaną przeze mnie w tym tygodniu jest dodawanie nowych postów. Po zalogowaniu się użytkownik widzi posty innych użytkowników, a na dole pole tekstowe z przyciskiem, gdzie wpisuje treść komentarza. Całą strukturę postów przechowuję w pliku JSON - nick użytkownika, datę dodania oraz treść posta. Sam mechanizm dodawania postów nie jest skomplikowany - po stronie klienta widnieje prosty formularz, a po stronie serwera następuje pełna obsługa requesta - zapis do pliku JSON wymienionej trójki i wyświetlenie ponownie wszystkich postów wraz z nowym.
Jako, że dodałem możliwość rejestracji nowych użytkowników, musiałem również poprawić mechanizm logowania się. Wcześniej był tylko jeden użytkownik, więc wstawiłem na sztywno jego login i hasło. Teraz po podaniu loginu i hasła następuje weryfikacja, czy taki użytkownik istnieje w systemie. Jeśli tak, zostaje zalogowany i przekierowany na stronę z postami. W przeciwnym wypadku przenoszony jest ponownie na stronę logowania.
To był pracowity tydzień, ale widać też, jak dużo nowych rzeczy zostało dodanych. Coraz bardziej zaczyna mi się podobać mój mini portal. :)
W razie pytań - zostawcie komentarz poniżej.
Damian
dzisiaj mijają równo 2 tygodnie od rozpoczęcia konkursu "Daj się poznać" i od kiedy robię projekt Postownia. Jest to intensywny czas nauki Javascriptu, ale bardzo mi się podoba takie tempo. Polubiłem ten język programowania. Jest przyjemniejszy do obsługi niż typowe języki obiektowe. Zawsze szybciej się odnajdywałem w rzeczach typowo funkcynych, aniżeli obiektowych.
Przez ostatni tydzień dodałem dwie całkiem ważne funkcjonalności do mojego mini portalu: zakładanie użytkowników oraz dodawanie nowych postów na stronie.
Użytkownik, chcąc założyć sobie konto, podaje tylko login i hasło i od razu zostaje przekierowany na stronę z postami, gdzie może już tworzyć komentarze. Loginy i hasła przechowuję w pliku JSON, gdzie login to klucz, a hasło to wartość hashmapy. Przy okazji poćwiczyłem pracę na plikach JSON oraz obsługę plików z poziomu node.js i modułu fs.js. Na razie możliwe jest utworzenie użytkownika o tej samej nazwie - po prostu hasło zostanie nadpisane.
 |
| Prosty formularz do rejestracji nowego użytkownika |
Tak jak wspomniałem wyżej, drugą funkcjonalnością dodaną przeze mnie w tym tygodniu jest dodawanie nowych postów. Po zalogowaniu się użytkownik widzi posty innych użytkowników, a na dole pole tekstowe z przyciskiem, gdzie wpisuje treść komentarza. Całą strukturę postów przechowuję w pliku JSON - nick użytkownika, datę dodania oraz treść posta. Sam mechanizm dodawania postów nie jest skomplikowany - po stronie klienta widnieje prosty formularz, a po stronie serwera następuje pełna obsługa requesta - zapis do pliku JSON wymienionej trójki i wyświetlenie ponownie wszystkich postów wraz z nowym.
 |
| Zapraszam do postowania na Postownii :) |
Jako, że dodałem możliwość rejestracji nowych użytkowników, musiałem również poprawić mechanizm logowania się. Wcześniej był tylko jeden użytkownik, więc wstawiłem na sztywno jego login i hasło. Teraz po podaniu loginu i hasła następuje weryfikacja, czy taki użytkownik istnieje w systemie. Jeśli tak, zostaje zalogowany i przekierowany na stronę z postami. W przeciwnym wypadku przenoszony jest ponownie na stronę logowania.
To był pracowity tydzień, ale widać też, jak dużo nowych rzeczy zostało dodanych. Coraz bardziej zaczyna mi się podobać mój mini portal. :)
W razie pytań - zostawcie komentarz poniżej.
Damian
Subskrybuj:
Posty (Atom)