Archiwum kategorii: HTML i CSS

Jaki język na początek…?

Witaj!

Też zastanawiasz się jaki język wybrać na początek? Od czego zacząć naukę, co wziąć na warsztat jako pierwsze? Nie, nie Python, nie Java, nie C#, nawet nie Perl… weź po prostu język angielski!

Boli, wiem – nie ma lekko. Sam przez niego cierpię. Młode lata gdzie wiedza i umiejętności językowe przychodzą łatwiej dawno mi odeszły. Obijanie się i lenistwo wygrały. Dziś walczę zacięcie. Mam kibiców który mi w tym pomagają, napędzają, gonią i wspierają – dziękuję wam!

Język angielski w całej strukturze IT jest bardzo ważny. Dokumentacje, tutoriale, opisy, książki itd. Wszyscy wszystko piszą po angielsku – jest to język wiodący i ważny podczas rozwoju kariery, nauki, ale też w życiu codziennym. Wyjazdy w delegacje zagraniczne, rozmowy z kontrahentami, czy chociażby wakacje za granicą. Wszędzie tam on się przydaje, otwiera nam drzwi do poznania innych, nawiązania kontaktu czy zapytania o drogę do najbliższego sklepu z jakimś jedzeniem.

Czego ja używam do nauki?

  • etutor.pl – portal z kursem języka angielskiego – płatny
  • diki.pl – podpięty pod w/w portal słownik języka angielskiego – wg mnie jeden z najlepszych
  • shebang.pl – godny polecenia, rozwijany, angielski dla programistów
  • ang.pl – darmowy serwis z całym mnóstwem słówek i wytłumaczeniem gramatyki
  • British Council – podcasty i gramatyka
  • Podcasty Diki.pl – podcasty z dołączone do słownika
  • Study English Online – kanał na YT wg mnie godny polecenia

Poza tym książką do gramatyki English Grammar in use – granatowa i bordowa – wg mnie jedne z najlepszych.
Ostatnio też przeglądam English 4 IT z wydawnictwa Helion – przystępna i godna polecenia 🙂

A Ty z czego korzystasz podczas nauki języka angielskiego?

Pozdrawiam,
Romek

 

Narysowane…

Witam!

Nie komentujcie zbytnio, nie pastwcie się nad tym wpisem, nie piszcie że jest bez sensu i bez większej wartości… musiałem to narysować na kartce i ogarnąć po swojemu lekko co się skąd bierze. Może i jest nieczytelnie dla większości – ważne że ja wiem o co w tym chodzi i potrafię się rozczytać i ogarnąć co się skąd bierze.

No więc sześć brzydkich fotek z brzydkimi zapiskami…

Mały pomysł na bazę, krótki opis co skąd gdy coś kliknę albo najadę i jak ma wyglądać… to tyle. Biorę się dalej.

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

 

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

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