Miesięczne archiwum: Marzec 2017

Rozwój projektu #1

Witaj!

#DSP2017 trwa. Projekt rozwijam, dodaje nowe elementy, uczę się.
HTML i CSS we wstępnej wersji został opracowany. Niektóre rzeczy ładnie się wyświetlają, inne zmieniają kolory itd.

Co nowego poznałem?

HTMLa okazuje się, że nawet pamiętałem. Poznaje bardziej CSSa.
Najbardziej zaskoczyła mnie w nim możliwość zmiany sposobu wyświetlania elementów. Z łatwością mogę zmienić sobie sposób wyświetlania (np listy) ze standardowej list-item na chociażby block. Dzięki takiemu zabiegowi w prostu sposób mogłem zrobić moje menu przy pomocy listy, ale ustawione jednak w jednym rządku. Żeby nie było zbyt prosto, mam nie rozwiązany problem przy tym elemencie, a mianowicie odległość pomiędzy napisem a bokami podświetlonego prostokąta w każdym z tych elementów jest inna. Przy napisie „Kontakt” jest najmniejsza a przy „Strona główna” największa. Żadne operowanie wartościami padding oraz margin niestety nie pomaga i ciągle jest ona widoczna.
Jeśli ktoś może podpowiedzieć przy czym pomajstrować żeby było dobrze – proszę o kontakt.

Ciekawą możliwością są efekty graficzne jakie można wykonać używając samego CSSa – takie jak chociażby zmiana koloru tła po najechaniu na element dzięki użyciu transition, czy border-radius, który ładnie zaokrągla rogi w wyświetlanych prostokątach.

Co zostało dodane?

Dzisiaj dodałem dwa większe divy w centrum – pierwszy za zadanie ma wyświetlać wybrany przez użytkownika pierwiastek z jego nazwą, symbolem, liczbą i masą atomową. Drugi zawiera w sobie tabelę która zawiera parę dokładniejszych danych dotyczących wybranego pierwiastka.

Co dalej?

Teraz przede mną trudniejsze wyzwanie – chcę przy pomocy JavaScript i jQuery (których też nie znam i dopiero poznaję) zrobić tak, aby po najechaniu na wybrany pierwiastek z tablicy, dane we wspomnianych wyżej dwóch dużych divach dynamicznie się zmieniały. Są to dane podstawowe i mógłbym je umieścić na stałe w pliku i pobierać je stamtąd np wykorzystując liczbę atomową jako identyfikator po którym można wyszukiwać poszczególne rekordy, bądź użyć jakiejś lekkiej bazy (SQLite). Jak to rozwiążę jeszcze nie wiem, docelowo w planie jest dodanie także dłuższych opisów i innych informacji, a te zdecydowanie łatwiej byłoby przechowywać jednak w bazie danych.

Na koniec…

Podgląd zmian jakie nanoszę znaleźć można na http://www.pierwiastki.romansroda.com/.
Jeśli ktoś ma jakieś propozycje rozwiązań o których pisałem powyżej, chętnie spróbuję różnych rozwiązań które mogą okazać się pomocne.

Pozdrawiam,
Romek

Podgląd prawie „na żywo”.

Nadszedł czas

Tak, nadszedł. Na to aby zacząć pokazywać coś więcej niż tylko statyczne obrazki które każdy może zrobić sobie w paincie i wkleić do bloga.

Dzisiaj dodałem subdomenę, pod adresem której będzie można prawie że na żywo oglądać moje poczynania. Coś napiszę – to tam wrzucę i będzie można sobie najechać na to myszką, niebawem coś nawet kliknąć.

Strona nie jest responsywna. Nie wiem czy będzie – nie mam pomysłu kompletnie jakby to ugryźć na małe rozdzielczości np. telefonowe. Od 1200×800 wzwyż powinna wyświetlać się tak jak chce – czyli w miarę poprawnie (zakładam, że użytkownicy są dość rozsądni i aktualizują swoje przeglądarki). W dół ciut się rozjeżdża 🙁

Wszelakiego rodzaju krytyka, pomysły, podpowiedzi i inne sugestie mile widziane.
Można je wpisywać w komentarzach pod postami lub jeśli ktoś woli drogą mailową na adres dsp2017@romansroda.com.

Na koniec oczywiście adres pod którym można pooglądać to co przy pomocy próby nauki próbuję stworzyć: http://www.pierwiastki.romansroda.com/

Pozdrawiam,

Romek

Pierwsze efekt pracy…

Oto in on – pierwszy efekt mojej pracy.

Logo tymczasowe ukradzione skądś bo było pierwszym obrazkiem z brzegu jaki się w google.com nawinął i był określonych wymiarów, strona w kolorach zielono-żółto-szarych, bo takie się wylosowały, wszystko póki co napisane i wpisane ręcznie w HTMLu i CSSie – ale pierwszy efekt mi się podoba. Troszkę się nagimnastykowałem i naliczyłem pikseli i procentów (póki co jest wszystko na pikselach bo procenty średnio równo mi wychodziły), nakombinowałem z divami żeby wyglądało to jakoś rozsądnie i wyszło coś coś takiego (póki co w formie kawałka screenu).

Następnym etapem będzie ułożenie tych wszystkich małych divów w sposób procentowy tak, żeby się chociaż trochę skalowało pomiędzy rozdzielczościami – na wypadek gdyby ktoś używał 800×600 jeszcze, ale także aby Ci z 4K mieli ciut większe prostokąciki.
Chciałbym także na górze po środku tak jak to u wszystkich zrobić jeden większy prostokąt z dynamicznie wczytywanymi podstawowymi danymi – tutaj pomocny będzie już JavaScript.

Kod na GitHub? Niebawem…

Pozdrawiam,
Romek

Różne źródła wiedzy. #1

Darmowa wiedza… czy istnieje?

Różne istnieją na ten temat zdania. Jedni powiedzą, że oczywiście że istnieje i wszystko w sieci można mieć za darmo, inni że absolutnie nie, za wszystko w jakiś sposób płacimy.
Można zgadzać się z jedną, drugą lub obiema grupami na raz, ale ważne jest to jak my sami do tego podchodzimy.
Ja osobiście lubię kupić coś co mogę poczytać lub obejrzeć i przynosi jakąś wartość daną, ale trafia mnie jeśli np książka którą nabyłem okazuje się pomimo dobrych ocen totalnym niewypałem. Wtedy przychodzi zastanowienie – kto wystawiał te opinie i dlaczego nie kupiłem pizzy i piwa za to… no cóż. Czasami dobrze coś zobaczyć wcześniej w sklepie i dopiero kupić lub jeśli jest dostępne za darmo, bądź prawie za darmo to z tego skorzystać.

Tym wpisem chciałbym otworzyć cykl dotyczący różnych źródeł wiedzy z których korzystam i które są darmowe, dostępne po zarejestrowaniu się, dostępne za symboliczną opłatą lub opłacane cyklicznym abonamentem, ale wg mojego uznania warte uwagi.

Darmowa lektura

Na początku zacznijmy od tego co tygryski lubią najbardziej, czyli coś co jest prawie że zupełnie za darmo (wymagana rejestracja). Packt Publishing na swojej stronie każdego dnia udostępnia inną pozycję w postaci ebooka dotyczącą przeróżnych technologi. Wchodząc na ten adres każdego dnia możemy dodać do swojej kolekcji darmowego ebooka, a następnie pobrać go do siebie w różnych dostępnych formatach. Są to dokumenty PDF, MOBI, ePUB czy wersje na czytniki Kindle.
Jedyne wymaganie jakie jest to darmowa rejestracja na stronie celem posiadania konta na którym odkładamy zdobyte przez nas publikacje celem późniejszego dostępu do nich.

Puckt Publishing nie kończy na tym niespodzianek jakie oferuje. Codziennie (przynajmniej dotychczas) na swoim fan page na FB publikuje dodatkowego posta z jeszcze jedna darmowa pozycją którą można dodać do swoich zbiorów – dlatego warto ich zalajkować i dodać do obserwowanych.
Pozycje wybierane są spośród wszystkich dostępnych w serwisie książek i muszę przyznać, że są dość interesujące i każdy znajdzie coś dla siebie. Warto chociażby co jakiś czas spojrzeć i sprawdzić czy nie jest udostępniona książka, która interesuje akurat nas lub jest z dziedziny, którą chcielibyśmy poznać a zawsze brakowało na na to czasu.

Dzisiaj dostępna „Android 5 Programming by Example”.

Polecam w/w źródło – może się komuś przydać i zachęci go do poznania czegoś nowe.

Romek

Nauka która oby do lasu nie chodziła… vol. 1

Słowem wstępu

Dzisiaj usłyszałem pytanie:

  • A kiedy coś wrzucisz na GitHuba, żebyśmy się mogli razem pośmiać?„.

Standard – taki niezobowiązująco motywujący tekst.
A kiedy? Niedługo. Mam nadzieję, że w tym tygodniu już się uda i pierwsze wyniki mojego siedzenia „nienadaremne” pokażą jakiś efekt i coś niecoś ukaże się także na GitHubie. Póki co nie widzę większego sensu wrzucać jakichś bezsensownych prób ułożenia layoutu w jeden składny dokument i do tego niezbyt związany z projektem, który staram się, żeby chociaż przechodził walidację i miał ręce i nogi pod względem niezapętlania się znaczników – ot takie moje próby zrobienia czegoś co może działać. Chociaż przyznam że Atom.io skutecznie mi w tym przeszkadza i wstawia znaczniki tak jak on chce – muszę go jakoś przywołać do porządku.

Co udało mi się do tej pory w dobry sposób poznać

Na stronie z kursami edx.org podjąłem próbę poznania HTMLa i CSSa. Idzie to powoli bo materiału sporo. Trzeba pooglądać, poczytać, napisać, sprawdzić… i tak ze dwa razy bo coś się wykrzaczyło – zwykle standardowy brak średnika, znaku równości, cudzysłowu lub nawiasu. Jeśli kod można spróbować skompilować, to wszystkie takie braki po kolei wychodzą – tutaj nie, trzeba je jakimś cudem wynaleźć, co bywa ciężkie.

W nowej wersji HTMLa spodobały mi się (jak już to napisałem w poprzednim poście) nowe znaczniki. Twórca wymyślił sprytnie, żeby zamiast wszystko ładować do jednego znacznika <div> i sobie go później oznaczać odpowiednimi klasami bądź identyfikatorami, można użyć gotowych znaczników (które później także swobodnie można opisać w CSSie). I tak powstały:

  • <header> – odpowiadający za nagłówki;
  • <nav> – do którego dobrze jest włożyć nasze menu nawigacyjne strony;
  • <main> – gdzie umieszczamy cały główną zawartość strony (tak wiem, kontent przez „K” brzmi dziwnie wiec się z niego wycofałem prawie od razu);
  • <section> – który pozwala nam wydzielić poszczególne sekcje na stronie w miejscach w których chcemy;
  • <article> – jak sama nazwa wskazuje, tutaj powinien znaleźć się jakiś artykuł bądź treść właściwa danej podstrony;
  • <aside> – to taki sprytny znacznik, który według zamysłu ma zawierać informacje nie do końca związane z treścią główną strony. Taki dodatkowy boczny pasek;
  • <footer> – i na koniec stopka, w której standardowo umieszcza się rzeczy które w stopce powinny się znaleźć.

Jest jeszcze cała masa innych znaczników, ale może o nich przy innej okazji, gdy okażą się bardziej potrzebne.

Dowiedziałem się także, że znacznik <header> i <footer> mogą być wykorzystywane także wewnątrz znaczników <section> i <article> z takim samym znaczeniem jak na stronie głównej, tylko akurat w tym wypadku w roli pomocniczej przy mniejszym kawałku danej strony.

Kolejną rzeczą są nagłówki od <h1> do <h6>, czyli takie wyróżniki na stronie które dodatkowo „rozdzielają” poszczególne sekcje. Kiedyś to one wyznaczały podziały, teraz mamy od tego odpowiednie znaczniki (j/w). Używanie ich jednak powinno być (wg tego co mówi standard) w taki sposób, że znacznik H1 najlepiej aby użyty był jeden raz i opisywał główną zawartość strony. Każda sekcja bądź artykuł, także powinny zawierać nagłówki, ale już niższego poziomu. Służyć to ma hierarchizacji na stronie i… ułatwia osobom które używają czytników ekranowych korzystanie z takich stron.

Na sam koniec zostawiłem rzecz, która męczyła mnie od kilkunastu lat i trochę z lenistwa nie doszukałem się jej nigdy. Chodzi o to, w jaki sposób ustawić obok siebie np dwa kontenery z treścią, a pod nimi jeszcze jeden, ale taki na całej długości. W dawnych czasach tego nie wymyśliłem, nie znalazłem, okazałem się ignorantem i zrezygnowałem… ale to takie proste. Czarodziejską sztuczką jest odpowiednie nadanie w stylach CSS dobrych reguł.

Obrazkowo wyglądać to powinno mniej więcej tak:

dwie kolumny

A opisowo robi się to w taki sposób:

#Column 1
section {
  float: left;
  width: 70%
}

#Column 2
aside {
  float: right;
  width: 25%
}

#Footer
footer {
  clear: both
}

Całym kluczem do sukcesu było clear: both, które to usuwa ustawienia kontenerów do przyklejenia się odpowiednich stron odpowiednią krawędzią (można też dać obydwa float: left).
Poza tym można poustawiać odstępy wewnątrz kontenerów oraz na zewnątrz definiując każdą odległość osobno, parami, całościowo jedno wartością. Wielkości, kolory, style fontów (podobno to są fonty a nie czcionki – sam nie wiem czemu, ale słyszałem już nie raz ogromne oburzenie z tego powodu), tła, szerokości, wysokości itd. Całą masę ustawień styli CSS:

  padding: 20px 50px 20px 50px;

  margin: 0 15px;

  font-size: 1.5em;

  width: 25%;

  text-align: center;

  background: #722;

  color: #fff;

Z tego co widziałem to w CSSie można robić przeróżne rzeczy – jak chociażby rysować różne elementy, co próbuje pokazać jedna z uczestniczek #DSP2017. Liczę, że i mój zakres wiedzowy niebawem dotrze do tego momentu, bo przyznaję, przyda się to w moim projekcie.

Podsumowanie

Poznawanie nowych rzeczy trwa. Idzie to niezbyt szybko, jednak żyć poza konkursem też trzeba i inne rzeczy odłogiem leżeć niezbyt mogą. Postęp jest.

Pozdrawiam,
Romek

 

„Od Zera do Web Developera”

Trzeba było zacząć, więc zacząłem – się uczyć!

Postęp prac? – póki co więcej czytam i kombinuję niż faktycznie tworze jakiegokolwiek kodu związanego z rozwojem projektu konkursowego. Dlaczego?
Dlatego, że tak jak pisałem w poprzednim poście bycie web developerem nigdy nie było mi po drodze, nigdy mnie nie kręciło i kompletnie nie cieszyło. Przymus zrobienia czegoś w tej formie na studiach jeszcze w HTMLu 4 i CSS 2 zniechęciło mnie do tego zupełnie. Odłożyłem to na długie lata…

Teraz zacząłem od nowa – niecałe dwa tygodnie temu. Otworzyłem dokumentację, książkę, kurs na edX i próbuję walczyć. Przyznam szczerze, że jestem już od początku zdziwiony i mile zaskoczony. Pierwsze znaczniki HTMLa nie przyprawiają o ból głowy. Wyglądają normalnie (może poza „meta”), ale chociażby sam DOCTYPE został przywołany do porządku i nie trzeba za dużo przy nim się zastanawiać. Wcześniej trzeba było podawać wersje HTMLa, XHTMLa, języki, strony kodowania, strony dostępu i nie wiedzieć co jeszcze. A teraz – łatwo, prosto i przyjemnie. O tak:

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>"PIERWIASTKI" - Układ okresowy pierwiastków chemicznych - online!</title>
    <link rel="stylesheet" href="styles/style.css">
    <script src="scripts/script.js"></script>
  </head>
  <body>
    <!-- Content -->
  </body>
</html>

I mamy cały gotowy podstawowy schemat strony. Przy tworzeniu nowej wersji samego HTMLa pomyślał ktoś także i dodał różne nowe znaczniki sekcji. Teraz znajdziemy w składni języka takie znaczniki jak np <header>, <nav>, <section>, <article>, <footer>. Wszystko ma swoje miejsce i od razu wskazuje co skąd jest. Dawne układy strony przy pomocy tabel odeszły w siną dal… i niech nie wracają. Dzięki wszechobecnym <div> i zgrabnym stylom CSS można stronę ładnie poukładać i o dziwo sprawić żeby działała wszędzie tak samo bez zarywania tygodnia nocy z rzędu bo IE5 „się krzaczy” (tak – IE5 wyrządziło mi tą krzywdę).

Początki zapowiadają się obiecująco. Wygląda to ciekawie. Zajrzałem także do BootStrapa i przyznaję, że wygląda przyjemnie i lekko – myślę, że dam radę go przyswoić 😉

Więc moje „Od Zera do Web Developera” w tym momencie jest dosłowne. Muszę poznać na nowo HTMLa, CSS, JavaScript, a można by powiedzieć, że w ogóle poznać je pierwszy raz, bo to co było wyparłem z pamięci dawno – brrr. Przyda się do tego jakiś framework/biblioteka albo dwa żeby było łatwiej i ponoć szybciej (BootStrap i JQuery), więc wykorzystywana technologia z pierwszego postu jeszcze może ulec delikatnej modyfikacji.

Wracam do książki i do edytora, żeby w niedługim czasie coś się pojawiło na GitHubie i żeby można było zobaczyć postęp prac.

Pozdrawiam,
Romek

„Pierwiastki”, czyli o projekcie słów kilka. #DSP2017

Czas zacząć!

#DSP2017 wystartował. Co prawda rejestracja została przedłużona do 12 marca 2017 r., ale trzeba zawijać rękawy i podąć nierówną walkę z czasem i rzeczywistymi przeciwnościami losu w postaci braków w warsztacie i tym czego prawie nigdy się nie robiło.

Dlaczego to wszystko od początku ma takie ciemne barwy i toczona walka ma być ciężka?
Dlatego, że nigdy nie zajmowałem się programowaniem, projektowaniem i budowaniem aplikacji typu WEB. Jeśli już coś tworzyłem to były to aplikacje desktopowe i zdecydowanie wolę ten typ rozwiązań, jednak każdy z nas wie, że aby iść do przodu trzeba poznawać też nowe rzeczy i iść z duchem czasu – więc tym razem zdecydowałem, że wyzwanie podejmę wraz z HTML, CSS, BootStrapem, JavaScriptem, JQuery… i czym jeszcze to nie wiem. Do tego niezbędna będzie jakaś niewielka baza danych oraz oprogramowanie backendu – z którym mam nadzieję pójdzie dużo sprawniej – a wspierany on będzie przez PHP albo Pythona (rzucę monetą i niech los zdecyduje).

O projekcie

Co zamierzam napisać? Pomysłów było kilka. Jedne za duże na czas dziesięciu tygodni, inne zbyt małe na konkursowy „Pet Project”, jeszcze inne (które może wydawały mi się przydatne) lepiej aby nie oglądały światła dziennego. Wybór zapadł tak na prawdę wczoraj po ostatnim przemyśleniu i drobnej inspiracji (ten wpis już był przygotowany pod troszkę inną tematykę aplikacji ale rzutem na taśmę zwyciężyło coś innego). A więc… aplikacja którą zamierzam napisać to:

„PIERWIASTKI”

Pisząc bardziej zrozumiale będzie to Układ Okresowy Pierwiastków Chemicznych dostępny poprzez przeglądarkę internetową z możliwie dużą ilością informacji na ich temat.

Taki układ widział chyba każdy z nas, a na pewno każdy z nas ma styczność z tym co w nim się znajduje i to na co dzień – chociażby oddychając 😉
Wygląd wstępny wizualnie już mamy przedstawiony – będzie on zrobiony w HTMLu, CSSie, BootStrapie, JavaScripcie i coś pewnie pomoże im JQuery.
W aplikacji znaleźć będzie można poza nazwą, symbolem, masą, numerem cały szereg innych, mam nadzieję że przydatnych informacji. Znajdowały się będą one w bazie danych, z której to przy pomocy niczego innego jak SQLa będę wyciągał te informacje i podawał przez napisany „silnik obsługujący” backend w wylosowanym języku.

Planuję też zrobić panel do zarządzania całą tablicą i możliwością dodania nowych pierwiastków (jeśli zostaną odkryte), edycji istniejących wpisów (zawsze ktoś może coś wykluczyć – spójrzmy na sytuację Plutona który planetą był, a już nie jest).
Są także zakusy na inne możliwe funkcjonalności, ale póki co rozpędzał się nie będę – zobaczę na ile czasu wystarczy.

Czas brać się do pracy… mam nadzieję, że wyjdzie mi coś ciekawego i przydatnego, oraz że każdy będzie mógł z tego skorzystać. Wszelakie sugestie, propozycje i motywacje mile widziane.

Romek.

PS. Chciałbym jeszcze dodać, że głównym prowodyrem tego pomysłu jest TiOCl2 i jego Wytwórca – chciałem tylko sprawdzić czy dam radę policzyć tego masę molową (z którymi nie wiem dlaczego miałem dziwne problemy, a to się przecież łatwo liczy)… stąd pomysł.