Ósmy bit – powrót do przeszłości.

Witaj!

Jest weekend, podobno trzeba wyluzować. Ale tak do końca się nie da, czas goni wszystkich, urlop nie nadszedł… więc trzeba coś zrobić – się robi, ale w tle.

A co na bieżąco? Kilka dni temu dołączyłem do #DSP17 na Slacku.
Pogadanki są różne, od zwykłej serii codziennej w stylu „Cześć, dzień dobry, witam dziś”, przez tematy wpisów na blogi, własne projekty, pokazywanie co kto zrobił, przekomarzanie się który framework JS jest szybszy i dlaczego właśnie ten którego „ja używam” a ten wasz jest całkowicie „be ” i do niczego się nie nadaje bo już przecież nikt tego pewnie nawet nie używa, kończywszy na tym w co kto gra. Bo jakby inaczej, każdy potrzebuje chwilę oderwania się od swojego kodu, konsoli, bazy czy co tam jeszcze ma. Każdy musi odpalić swoją ulubioną gierkę i chwile „pociupać” – pomordować, pokopać kwadraty, polatać, pobiegać czy podnieść podatki w swoim mieście.
Ostatnio na topie i sporym elementem wspomnień na #DSP17 jak zauważyłem jest „The Legend of Zelda”. Sporo ludzi emuluje na swoim sprzęcie konsolę co by móc odpalić w/w i pobiegać parę chwil Linkiem – czyli głównym bohaterem legendy. Emuluję i ja… ale nie Nintendo czy Wii. Nie grywam w „Zelde”, nie szaleje na jej punkcie. Wręcz przeciwnie. Jedynie grę kojarzę z jakiegoś filmiku czy wpisu na portalu w dziale gry. Bardziej interesującą w tym wypadku rzeczą jest to, że pierwsza część byłą wydana w 1986 r. w Japonii i rok później w USA i Europie.

Co ja robiłem w tym czasie?

Ja wtedy jak na mój wiek, w pełni zadowolenia i ładnie wyprostowany wchodziłem na stojąco pod stół, a to tylko po to by za kolejny rok, na naszym wspólnym (moim i moich braci) Atari 130XE, napisać pierwsze programy w Basciu. Były one proste, nieskomplikowane, zwykle mające około 5-10 krótkich linijek, których zdaniem było zmienianie koloru wyświetlanego na ekranie telewizora (TAK! Wtedy komputer podłączało się do telewizora), narysowanie jakiejś linii lub dwóch lub wyświetlenie napisu „Romek” czy innego „Hello world”. Nie zawierały one na początku pętli, ifów itp zaawansowanych poleceń tylko coś co było proste dla 4-ro letniego dziecka. Wtedy nie było smartfonów, tabletów i innych tego typu udogodnień. Obecnie dzieci w tym wieku śmigają na tego typu urządzeniach, ale za to my mogliśmy jeść piach bo nie był rakotwórczy, mogliśmy się sami bawić na podwórku i strzelać do siebie kijami które zastępowały karabiny, a najlepszą bazą była ta zrobiona na zdobytym terenie przy innym bloku.
Programy wyglądały mniej więcej tak:

10 GRAPHICS 24
15 COLOR 1
20 PLOT 10,10
30 DRAWTO 10,20
35 COLOR 2
40 POSITION 50,50
50 ? #6;"A"  - tej linijki nie kojarzę :P
100 GOTO 100

Były przepisywane literka po literce z książki (później powoli rozumiane i wytłumaczone), która była dołączona do całego zestawu komputerowego, czyli komputera właściwego, magnetofonu, kabli zasilających i antenowych oraz najważniejszego składnika – joysticka!!
I tym oto sposobem znaleźliśmy się w miejscu najważniejszym. GRY! Gry na Atari! Te w które ja grałem, które lubiłem i… w które nadal grywam – tak w 2017 roku. Teraz na szczęście nie muszę już ładować gry z kasety czekając 120 min na to czy się wgra czy nie bo mrugnąłem albo za głośno oddycham. Uruchamiam emulator i pięć sekund później mogę pograć w moje ulubione gry ze świetną grafiką nie 3D. Gry które zajmują parę minut rozrywki, i po których spokojnie mogę wrócić do pracy. Gry w które również trzeba pograć w całą dobę albo i dłużej – bo nie ma czegoś takiego jak „save” i że jak nas zabije to sobie mykniemy jeszcze raz bo mamy zapisane. Tam nie ma przebacz. Giniesz i… koniec. Umarł w butach. Amen w pacierzu. Zacznij jeszcze raz albo spadówa.

Co w tych grach jest takiego ciekawego?,

Największą zaleta tych gier jest ich tzw. grywalność. Tak wiem, Wiedźmin też ma grywalność, też jest świetny, ma wspaniałą grafikę, jest mega marketingowy, dobrze sprzedany i jest co najważniejsze NASZ POLSKI! Ale nasze polskie są też np Robbo, Misja, Fred czy Lasermania. Świetne gry napisane przez LK Avalon i jednego z wg mnie najlepszych w tamtym czasie programistów Janusza Pelca – tworzył świetne gry i muzykę na maszynach 8-bitowych.

Nie mówię, że Wiedźmin jest zły – jest świetna grą, mamy się z czym pokazać. Ale te małe gierki z dawnych lat też mają klimat, duszę i są warte pogrania – nie tylko nasze polskie.

Jakie są moje ulubione gry z tamtego czasu?

Na pewno nie jest to cała lista, ale to w co lubię czasami zagrać przez parę chwil (moje gry z dawnych lat):

  • Robbo
  • Fred
  • Misja
  • Lasermania
  • Zybex
  • Zorro
  • Jet Boot Jack
  • Feud
  • Outlaw
  • Gauntlet
  • Satans
  • Trix
  • River Ride
  • Mr. Robot (nie, nie ten o którym myślisz ale prawie)

Co do Comodore – nie wypowiem się – nie miałem.

A co nowego?

Oczywiście gram nie tylko w gry z mojego ośmiobitowca, który gdzieś leży w domu u rodziców na dnie szafy i czeka na swoje powtórne życie (tak działa, sprawdzałem).
Grywam w gry nowe, z dobrą fabułą, piękną grafiką, realistycznymi kolizjami, prawie inteligentną sztuczną inteligencją itd. Gram w gry które zabierają setki godzin życia, które odłączają od świata rzeczywistego na długi czas. Zdecydowanie wole gry strategiczne jednak nie w rzucie 3D (chyba nie ogarniam tego efektu i się gubię). W strzelanki jestem średni – zwykle daje pofragować innym moim kosztem, ale zabawa i tak jest dobra. W LoLa idzie mi tak jak wszystkim – zależy czy trafię na team lamerski czy wypaśny – standardzik. Lubie sobie pobudować coś w SimCity, pojeździć pociągami TTD, pokopać w Terrari, czy pozbierać coś w Don’t Starve… ale nie o tym miało być, taka tylko mała dygresja.

Zachęta…

Zagrajcie czasami w coś co jest stare, albo chociaż przełożone ze starego na nowe. Spróbujcie złapać dystans przy Tetrisie czy którym z Arkanoidów. Włączcie emulator dawnej maszyny i zobaczcie od czego to się zaczęło, zagrajcie w Ponga, pierwszą grę. Spróbujcie i wy… a może macie jakieś swoje ulubione 8-bitowe gierki?

Pozdrawiam,
Romek

Co z tym jQuery…?

Coś się zmienia – i to samo, prawie że tu i teraz.

Dodałem do mojego projektu jQuery, powoli doczytuje co się skąd może brać, co w jaki sposób działa, jak się coś zmienia i podmienia – i to wręcz na żywo.
Najbardziej podoba mi się to, że to wszystko działa! Aktualnie na ten moment dynamicznie pobieram sobie z kodu HTML z pojedynczych divów  wartościowość (liczbę atomową) danego pierwiastka i wrzucam go do mojego dużego diva z podglądem.
Aby tego dokonać dodałem dla każdego diva z pierwiastkiem specjalne pole atrybutu, które zaczyna się od przedrostka „data-*” i dzięki niemu mogę wstawić tam odpowiednią wartość, którą później pobieram przy pomocy jQuery do zmiennej i podmieniam w odpowiednich miejscach. Do tego dostałem małą podpowiedź odnośnie styli CSS, aby wszystkie małe divy oskryptować jednym wpisem i dodać do niego drugi (po spacji) który będzie zawierał szczegóły dotyczące tylko tego jednego stylu (w tym wypadku koloru) – dzięki Grzegorz.

Wygląda to tak. Div z HTMLa z pojedynczym pierwiastkiem (przykład Wodoru):

<div class="cell niemetal" data-liczba-atomowa="1"><br>H<br><span class="nazwa" id="nazwa">Wodór</span></div

Duży div:

<div class="cell_big" id="big_cell">
   <div id="liczba_atomowa" class="liczba_atomowa">1</div>
   <h1>H</h1>
   <h2 id="nazwa_pierwiastka" class="nazwa_big">Wodór</h2>
   <div class="masa_atomowa"><span class="nazwa">Masa atomowa</span><br><span id="masa_atomowa">1,00794</span></div>
</div>

I wspaniałe jQuery, które jak to się mówi robi robotę… póki co tylko troszkę, ale od czegoś muszę zacząć:

$('div.cell').on({
    'mouseover' : function() {
        var $la = $(this).data('liczba-atomowa');
        $('#liczba_atomowa').html($la);
        $('#wartosciowosc').html($la);
    }
});

Uruchamia się on po najechaniu na dowolny div który jest klasy „cell” (czyli te małe prostokąty z pierwiastkami), pobiera z niego wartość jaka została przypisana polu „data-liczba-atomowa” przypisując ją do zmiennej $la i nastepnie wstawia tą zmienną jako kod HTML (można np jeszcze to wstawiać jako tekst) do znaczników o identyfikatorach odpowiednio #liczba_atomowa oraz #wartosciowosc. I ot cała filozofia – póki co, są to rzeczy proste.

Kolejnym krokiem jest przygotowanie małej bazy danych i pobieranie z niej pozostałych informacji w sposób dynamiczny tak, aby bez odświeżania strony i klikania wszystko się zmieniało wraz z ruchem kursora po tablicy pierwiastków.
Chciałbym jeszcze uporządkować ciut kod HTML i CSS, pododawać w odpowiednie miejsca identyfikatory, zmienić wszystko na jeden styl językowy (angielski/polski), żeby to miało ręce i nogi na właściwych miejscach.

Podgląd oczywiście na http://pierwiastki.romansroda.com/.

Pozdrawiam,
Romek

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

Witajcie!

Weekend minął szybko, ciągle poza domem więc do przodu coś się ruszyło, ale marnie. W najbliższym tygodniu podejmuję próbę ogarnięcia JavaScriptu i jQuery w moim projekcie i zrobienia zamierzonych efektów.

Pierwszym źródłem w którym coś podpatrzę będzie oczywiście dokumentacja – rzecz praktycznie oczywista.
Zainteresowała mnie też polska strona www.kursjs.pl na której po wstępnym przejrzeniu materiału, wydaje mi się, że będzie odpowiednia na start.
Korzystam także od samego początku z KhanAcademy. Jest to przyjemne źródło z kursami. Zacząłem co prawda od tych podstawowych dotyczących HTMLa i CSS, ale wcześniej korzystałem tam z wykładów z fizyki, mikro- i makroekonomii. Wszystko było wytłumaczone sensownie i jasno. Mam nadzieję, że JS pójdzie równie przyjemnie.

Programować programuję, i składnia w porównaniu do innych języków dużo się nie różni – przynajmniej ta podstawowa, więc tyle już praktycznie za mną. Zobaczymy co będzie dalej.

Na półce u siebie znalazłem też dwie książki dotyczące jQuery i JS.
Pierwsza to „jQuery. Poradnik programisty.” autorstwa Włodzimierza Gajdy, a druga to „Szybki kurs JavaScript. Wprowadzenie do języka w 24 godziny„.
Co prawda 24 godzin na raz na to nie mam, ale chyba czas nastał aby je otworzyć i przeczytać. Kiedyś na tą półkę trafiły, więc czas po nie sięgnąć.
Obydwie zostały wydane przez wydawnictwo Helion. Osobiście większość książek i tak kupuję poprzez inną księgarnię – bo taniej, ale jak ktoś lubi akurat tutaj linki powyżej.

Tyle na dzisiaj, czas jeszcze rozpakować torbę po podróży, poczytać i zebrać siły na jutrzejszy dzień – oby przynoszący więcej rozwiązań do projektu.

Pozdrawiam,
Romek

 

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