Archiwa tagu: FromZeroToWebHero

Coś się kończy, a coś zaczyna…

Witaj!

Tak, dokładnie jak w tytule. Coś się kończy, a coś nowego zacznie.
#DSP2017 powoli się kończy. Zostało kilka dni do końca maja.

Co się udało, zrobić, na co zabrakło czasu, a czego się dotknąć nie chciało i czuło, że to jednak nie to?
HTML i CSS – troszkę poznane, pouczone, rozwiązanie pewne niejasności, obejrzane kilka materiałów dotyczące powyższych, przeczytane i przepracowane dwie książki – tu jestem z siebie zadowolony, bo poza częścią projektową zrobiłem jeszcze kilka innych rzeczy poza konkursowych, które nauczyły mnie jak się tymi dwoma rzeczami do tworzenia podstawowych stron posługiwać. Do tego poznałem odrobinę bootstrapa.

Baza danych – tutaj udało się zrealizować wszystko w komplecie – całość danych jakie chciałem, żeby się znalazły w bazie wraz z powiązaniami tam się znalazły (commit całości do zakończenia konkursu będzie).

PHP – tu działa wszystko (chyba). Malutki skrypt do pobierania danych z bazy i przerzucania dalej do jQuery jest, śmiga i daje rade. Nie musi być mega optymalny ze względów pojemności bazy danych – zaledwie kilkaset rekordów. Starałem się żeby jednak nie przesadzić.

jQuery i JavaScript – tu leże. Pomimo wyłożenia sobie jak działa ajax, jak to wszystko powinno działać no nie mogę – nie czuje tego nadal. Dziwnie tak, ale chyba będę musiał przysiąść nad samym JavaScriptem, poznać jego a dopiero później jQuery. Mam nadzieję, że do końca konkursu jednak uda się to odpalić – coś się gdzieś „wykrzacza” i „nie robi” tak jak bym chciał. Jeśli się nie uda – poddać się nie poddam. Dokończę projekt choćby miałby skończony dopiero 1 czerwca o godz 0:05, czyli już po konkursie. Będzie działał i będzie w sieci 🙂

To wyżej to jakieś osiągnięcia związane z technologiami za którymi nigdy nie przepadałem i żebym je polubił to nie powiem, ale zacząłem mieć o nich jakieś większe pojęcie i powoli rozumiem jak ich używać. Jednak czuje, że bycie frontendowcem to jak przebywanie w baśni „tysiąca frameworków i miliona technologii”. To jak walka z hydrą. Jednego frameworka się uczysz, poznasz go ledwo co a już pojawiły się dwa nowe, które są podobno od niego o lata świetlne lepsze – wg mnie… DżawoSkrypcie nie tędy droga – panie tego nie ogarniesz. Ale co kto lubi.
Brakło też czasu. Wiem, że jak ktoś chce, to nie będzie spał po nocach i da rade. Ale konkurs nie był dla mnie priorytetem numer jeden. Mam jeszcze do tego życie prywatne i zawodowe. Chciałem pojechać na wakacje, jeździć na rowerze, rolkach, pójść w góry, obejrzeć film, poczytać książkę, schudnąć, przemalować ścianę, zrobić ciasto, albo najzwyczajniej o 21:00 pójść spać. Więc – ile zdążyłem tyle zdążyłem. Poświeciłem na to sporo czasu z czego jestem zadowolony. Udało mi się (chyba) doprowadzić bloga do końca, projekt do jakiego takiego końca (jeszcze te trzy dni powalczę z tym jQuery – może akurat ruszy) i poznać kilka nowych rzeczy.
Czytanie blogów współuczestników uważam za czas poświęcony na poznanie nowych rzeczy i ich podejścia do nich – zrobiliście na prawdę dużo i włożyliście w to całą masę pracy!

Czy mam szansę na wygraną? Uważam że absolutnie nie 🙂
W porównaniu do innych podejście miałem luźne, ale i założenie zupełnie inne.
Chcę życzyć wszystkim, którzy dowieźli swoje projekty i blogi do końca konkursu – sukcesu i chęci do dalszych prac nad rozwojem waszych projektów.
Bądźcie dobrzy w tym co robicie i rozwijajcie się dalej.

Pozdrawiam,
Romek

 

Darmowy e-book.

Witaj!

Jak codziennie tak i dzisiaj na www.pucktpub.com dostępna jest kolejna darmowa książka w wersji elektronicznej.

Dzisiaj (jeszcze przez ok 2 godziny) można za darmo pobrać PDFa, ePub i Mobi z książką „Effective Python Penetration Testing”. Jeśli ktoś jest zainteresowany to polecam.
Po przeglądnięciu w/w pozycji uważam że warto 🙂

Skrócony spis treści:

Chapter 1: Python Scripting Essentials
Chapter 2: Analyzing Network Traffic with Scapy
Chapter 3: Application Fingerprinting with Python
Chapter 4: Attack Scripting with Python
Chapter 5: Fuzzing and Brute-Forcing
Chapter 6: Debugging and Reverse Engineering
Chapter 7: Crypto, Hash, and Conversion Functions
Chapter 8: Keylogging and Screen Grabbing
Chapter 9: Attack Automation
Chapter 10: Looking Forward

Boli jedynie to, że całość opisana jest w Pythonie 2.7, a nie w którejś kolejnej wersji Pythona 3.x. Cóż – nie można mieć wszystkiego. Jednak dla chcącego nic trudnego (może ciut). Zawsze można samemu opisane techniki i skrypty przełożyć na wersje 3.x, dopisać trochę treści i mieć świetne publikacje 🙂
Jeśli ktoś się spóźni na pobranie z Packt’u a chciałby tą książkę to niech pisze – podeślę.

Pozdrawiam,
Romek

 

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

 

jQuery i Ajax – pobieranie danych z bazy

Witaj!

Czas leci. Szybko. Za szybko. Ledwo tydzień się zaczął, a tu już czwartek… i to wieczór. Padło też pytanie – „A wpis na bloga już zrobiłeś?”. Zrobię…

Dziś o tym jak pobrać dane z bazy przy pomocy jQuery i Ajaxa.

Wygląda to wszystko niby prosto i przyjemnie. Proste i przyjemne jest na pewno przy dłuższej współpracy, ale zacząć z tym nie jest jakoś specjalnie trudno. Ajax ze zwykłym JavaScriptem przynosił wiele problemów i czytając wątki na forach widziałem jak ludzie rwali sobie włosy z głowy, że coś w jakiś sposób im ruszyło i działało – ale nie, nie chciało i już.
Przy jQuery sprawa wydaje się dużo prostsza.

Przydatny podczas całych manewrów będzie nam PHP (aktualnie już jest w wersji 7) – coś musi obsługiwać zapytania do bazy i zwracać w jakiś sposób pobrane elementy.

Ale do rzeczy. W jQuery mamy kilka metod służących do obsługi ajaxa. Należą do nich: $.get, $.post, $.ajax oraz $.ajax z zastosowaniem typu danych.
Dwie pierwsze, chociaż proste, nie dają pełnej kontroli nad połączeniem. Ustawić w nich możemy w jaki sposób będą przekazywane dane poprzez wybór metody (get, post), skrypt który będziemy wywoływali, dane jakie będziemy przekazywali do skryptu, a także jedną funkcję w której określić możemy co robimy z danymi gdy już do nas wrócą. Wystarczy jednak tylko odwołanie do samego skryptu który chcemy wykonać – pozostałe parametry są opcjonalne. Może to wyglądać na przykład tak:

$.get(
    "pobierz_pierwiastek.php",
    {
        masa_atomowa: "1"
    },
    function(data){
        alert("Pobrałem: " + data);
    }
);

// w przypadku metody POST wystarczy zamienić $.get na $.post - tyle wystarczy.

Metoda $.ajax pozwala nam już troszkę rozwinąć skrzydła. Co prawda podobnie jak dwie powyższe metody wymaga podania jedynie adresu URL do skryptu działającego po stronie serwera, ale mamy do dyspozycji jeszcze kilka innych atrybutów.

Type – wybieramy typ połączenia: POST lub GET. Jako domyślne jest GET.
Data – przekazywane dane w formie klucz: ‚warość’.
DataType – typ danych jaki oczekujemy. Może to być xml, html, script, json, jsnop, text oraz inne „oddzielone spacją zmienne”.
Zdarzenia – zdarzenia związane z połączeniem. Jest ich całe mnóstwo. Podstawowe do wykorzystania to success, complete i error. Więcej funkcji można znaleźć bezpośrednio w dokumentacji http://api.jquery.com/jQuery.ajax/

Przykładowy wygląd zapytania typu $.ajax wraz z ustawionym typem danych json:
(Jeśli chcemy użyć bez konkretnego typowania danych wystarczy usunąć linijkę z dataType i odpowiednio typować dane w PHP.

$.ajax({
    type : "POST",
    url : "pobierz_pierwiastek.php",
    dataType : 'json',
    data : {
        masa_atomowa : 1,
        nazwa_pierwiastka: 'Hel'
    },
    success: function(ret) {
        // Funkcja, która ma zostać wywołana, jeśli żądanie się powiedzie. 
        // Funkcja przeszukuje trzy argumenty: 
        // Dane zwrócone z serwera, sformatowane zgodnie z parametrem dataType; 
        // Ciąg opisujący status; 
        // Obiekt jqXHR (w jQuery 1.4.x, XMLHttpRequest).
    },
    complete: function() {
        // Funkcja, która ma być wywołana, gdy żądanie zostanie zakończone (po wykonaniu pomyślnego i wywołania zwrotnego błędu).
        // Funkcja pobiera dwa argumenty: obiekt jqXHR oraz ciąg klasyfikujący stan żądania ("sukces", "niezmodyfikowany", "błąd", "czas oczekiwania", "przerwanie" lub "Parsererror").
    },
    error: function(jqXHR, errorText, errorThrown) {
        // Funkcja, która ma zostać wywołana, jeśli żądanie nie powiedzie się. 
        // Funkcja odbiera trzy argumenty: obiekt jqXHR, ciąg opisujący typ błędu, który wystąpił i opcjonalny obiekt wyjątku, jeśli wystąpił. 
        // Możliwe wartości drugiego argumentu (oprócz null) to "timeout", "error", "abort" i "parsererror". 
        // Po wystąpieniu błędu HTTP errorThrown odbiera tekstową część stanu protokołu HTTP, na przykład "Nie znaleziono" lub "Błąd serwera wewnętrznego".
    }
});

Po wywołaniu powyższego zostaną do skryptu PHP przesłane metodą POST dwie zmienne, które będą dostępne odpowiednio jako:

$_POST['masa_atomowa']

$_POST['nazwa_pierwiastka']

Następnie aby dane zwracane zostały przesłane do skryptu w postaci json musimy je umieścić w tablicy i zwrócić poprzez:

<?php
    $masa_atomowa = (int)$_POST['masa_atomowa'];
    $nazwa_pierwiastka = (string)$_POST['nazwa_pierwiastka'];

    $data = array();
    $data['wynik_1'] = 'Moja masa atomowa to: ' + $masa_atomowa; //przykładowe działanie na zmiennej
    $data['wynik_2'] = 'Nazywam się: ' + $nazwa_pierwiastka;

    return json_encode($data);
?>

Aby wyciągnąć powyższe dane które zostaną przesłane przez serwer i coś z nimi zrobić, posłużymy się obsługą zdarzenia success.

success: function(json) {
    jQuery.each(json, function(i, val) {
        console.log(i, val);
    });
}

Tym oto sposobem, dane trafią do naszej konsoli, gdzie zostaną wyświetlone.

Na dzisiaj to tyle.

Pozdrawiam,
Romek

Baza danych i smutki życia codziennego… mój HP odchodzi.

Witaj!!

Praca, szkolenie, wyjazd… no i tydzień z głowy. Więcej poza domem niż w domu, czas mija błogo i przyjemnie. Nic się samo jednak nie zrobi.

Dziś baza danych. Zrobiona na prostym schemacie który pokazany był na zdjęciach wcześniejszego postu. Cztery tabele, po kilka pól, klucze obce… i tyle. Bez szaleństwa i wyolbrzymiania.

Plik ze strukturą w SQLu dostępny będzie na GitHubie wraz z całym projektem. Poza tym kod dostępny tu poniżej, pod całością wpisu – można zrobić: zaznacz, kopiuj, wklej… jeśli to komuś na coś potrzebne. Jeśli coś skopałem – dajcie znać, żeby poprawić póki jeszcze chwila czasu jest.

Od jutra dłuuuuugi weekend. Myślę jak ogarnąć zbliżającą się, aż dwutygodniową przerwę. Wyjechać trzeba, laptopa nie zabiorę – zrobił się stacjonarny – padła matryca.  Koszt wymiany 550 zł. Szok i niedowierzanie – mój najulubieńszy HP Pavilion dv6-1140ew zaczyna odchodzić. Koszt wymiany elementu przekracza koszt pozostałej całości. Służył długo – prawie 9 lat. Czas mu chyba na emeryturę i zasłużony odpoczynek. Jednak żal, bo działał dobrze i sprawował się nieźle aż do teraz. Jeszcze myślę – może jednak. Ma 4GB pamięci, dający radę procesor, dedykowaną kartę graficzną i włożony dysk SSD. Chodzi jak na swoje możliwości dobrze. Ciut ciężki, ale to nie przeszkadza. Bateria nadal trzyma prawie 2 godziny!! Muszę to przemyśleć. Jutro go zabiorę z serwisu na przetrzymanie w domu…

A jeśli coś nowego, to co polecicie? Jakieś sprawdzone pomysły i sugestie?
Moja podpowiedź taka tylko, żeby był już z kategorii ultra, miał i5 lub i7 z siódmej generacji, 16GB pamięci i oczywiście dysk SSD. Ktoś coś ma sprawdzonego i nie narzeka bardzo?

Tyle dobrego na dziś.

Kod SQL tworzący strukturę bazy:

--
-- Budowa schematu bazych danych do projektu 'Pierwiastki'
--

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

--
-- Struktura tabeli dla tabeli `charakter_pierwiastka`
--

CREATE TABLE `charakter_pierwiastka` (
  `id` int(11) NOT NULL,
  `nazwa` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Struktura tabeli dla tabeli `konfiguracja_elektronowa`
--

CREATE TABLE `konfiguracja_elektronowa` (
  `id` int(11) NOT NULL,
  `1s` tinyint(4) NOT NULL,
  `2s` tinyint(4) NOT NULL,
  `2p` tinyint(4) NOT NULL,
  `3s` tinyint(4) NOT NULL,
  `3p` tinyint(4) NOT NULL,
  `3d` tinyint(4) NOT NULL,
  `4s` tinyint(4) NOT NULL,
  `4p` tinyint(4) NOT NULL,
  `4d` tinyint(4) NOT NULL,
  `4f` tinyint(4) NOT NULL,
  `5s` tinyint(4) NOT NULL,
  `5p` tinyint(4) NOT NULL,
  `5d` tinyint(4) NOT NULL,
  `5f` tinyint(4) NOT NULL,
  `6s` tinyint(4) NOT NULL,
  `6p` tinyint(4) NOT NULL,
  `6d` tinyint(4) NOT NULL,
  `7s` tinyint(4) NOT NULL,
  `fk_pierwiastek_id` int(11) NOT NULL COMMENT 'FK'
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Struktura tabeli dla tabeli `pierwiastek`
--

CREATE TABLE `pierwiastek` (
  `id` int(11) NOT NULL,
  `elektroujemnosc` float NOT NULL,
  `energia` int(11) NOT NULL,
  `opis` text NOT NULL,
  `fk_charakter_pierwiastka_id` int(11) NOT NULL COMMENT 'FK'
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Struktura tabeli dla tabeli `statystyka`
--

CREATE TABLE `statystyka` (
  `id` int(11) NOT NULL,
  `klik` bigint(20) NOT NULL,
  `wydruk` bigint(20) NOT NULL,
  `fk_pierwiastek_id` int(11) NOT NULL COMMENT 'FK'
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


--
-- Ustawienie Primary Key dla pól ID i dodanie kluczy
--
ALTER TABLE `charakter_pierwiastka`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `konfiguracja_elektronowa`
  ADD PRIMARY KEY (`id`),
  ADD KEY `konfiguracja_elektronowa_pierwiastek` (`fk_pierwiastek_id`);

ALTER TABLE `pierwiastek`
  ADD PRIMARY KEY (`id`),
  ADD KEY `pierwiastek_charakter_pierwiastka` (`fk_charakter_pierwiastka_id`);

ALTER TABLE `statystyka`
  ADD PRIMARY KEY (`id`),
  ADD KEY `statystyka_pierwiastek` (`fk_pierwiastek_id`);


--
-- Auto Increment dla wartości ID w tabelach
--
ALTER TABLE `charakter_pierwiastka`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

ALTER TABLE `konfiguracja_elektronowa`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

ALTER TABLE `pierwiastek`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

ALTER TABLE `statystyka`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- Ustawienie kluczy obcych
--
ALTER TABLE `konfiguracja_elektronowa`
  ADD CONSTRAINT `konfiguracja_elektronowa_pierwiastek` FOREIGN KEY (`fk_pierwiastek_id`) REFERENCES `pierwiastek` (`id`);

ALTER TABLE `pierwiastek`
  ADD CONSTRAINT `pierwiastek_charakter_pierwiastka` FOREIGN KEY (`fk_charakter_pierwiastka_id`) REFERENCES `charakter_pierwiastka` (`id`);

ALTER TABLE `statystyka`
  ADD CONSTRAINT `statystyka_pierwiastek` FOREIGN KEY (`fk_pierwiastek_id`) REFERENCES `pierwiastek` (`id`);

Pozdrowienia,
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

Wszystkiego najlepszego!

Zdrowych, spokojnych Świąt Wielkiej Nocy!
Odpocznijcie i dajcie sobie chwile wolnego, aby wrócić z pełnią sił na dalsze dni pracy.

Pozdrawiam  i życzę wszystkiego co najlepsze!
Romek

PS. Miał być wpis o projektowaniu, ale Mama powiedziała że są święta i wszystko może poczekać – dzięki Mamo – masz 100% racji! Trzeba odpocząć 🙂

 

Quo Vadis Romanie?

Miało być super, ekstra i fantastycznie. Miało pójść jak tak jak chcę – wszystko się udać zrealizować i na końcu odtrąbić sukces. 10 tygodni, dwa posty w każdym, szybki i dość prosty projekt z którym powinien poradzić sobie bez problemu, ale

Nie wszystko przychodzi łatwo i przyjemnie. Trzeba  przyjąć trudy i przeciwności, braki warsztatowe, problemy codzienne i ZŁE PLANOWANIE! A właściwie jego brak. Co się stało i co jest źle?

Problem pojawił się już „parę chwil” temu. Rzucanie pomysłów na bieżąco podczas nawet prostego projektu nie jest dobrym rozwiązaniem. Wymyślanie czegoś podczas tworzenia nie mając wcześniej pełniejszego zarysu tego co chce się osiągnąć jest co najmniej kiepskim pomysłem. Tak, właśnie to zauważyłem. Niby określiłem na początku co chcę zrobić, jaką technologię wykorzystać, jednak to by było na tyle. Nie posiadam planu realizacji przedsięwzięcia. Nie określiłem sobie etapów projektu, jakichś deadlinów, nie rozrysowałem zależności, nie zrobiłem wizualizacji tego jak to może wyglądać i działam przez to trochę po omacku. TAK, JEST TO ZŁE!

W życiu codziennym wygląda to inaczej. Rozpisuje sobie plan dnia, używam kalendarza, ustalam cele krótko i długoterminowe. Cały projekt też do mojego harmonogramu dodałem – jednak jako całość. Zrobiłem przy tym wielki błąd i nie zaplanowałem go szczegółowo. Przyznaję się – zawaliłem.

Cóż więc pozostało? Połowa czasu projektowego, 6 tygodni. Mało czasu, projekt leży. Trzeba się przeorganizować, zaplanować i spróbować projekt ukończyć.

A więc… 3, 2, 1, start na nowo! Biorę do ręki zeszyt, kartki, ołówek i kredki, rysuje i obmyślam. Tak łatwo się nie poddam. Dam radę! Będę musiał nad projektem popracować bardziej wytrwale i planowo. Nie, nie wycofam się, będę walczył do końca – mojego lub jego!

Pozdrowienia,
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