javascript-html5-tutorial.pl

Tutorial Bootstrap i RWD – responsywne strony

Styczeń 16th, 2017

Dominik-W

Dziś szybki tutorial Bootstrap o tworzeniu responsywnych stron WWW. A właściwie szablonu, stanowiącego dobry punkt wyjścia dla dalszych projektów. Opowiemy też o kilku technikach, które pozwalają osiągnąć określone rezultaty. Zebraliśmy także linki do zasobów z cennymi informacjami.

Tutorial Bootstrap i RWD – szablon od ręki

Jak wiemy, Twitter Bootstrap (TB) to framework CSS, rozwijany jako projekt open-source. Niesamowicie ułatwia i przyśpiesza tworzenie solidnych, przyjemnych dla oka projektów web (UI). Mobile-first! Przejdźmy więc od razu do rzeczy i stwórzmy podstawowy szablon. Chcemy, aby szablon był gotowy do uruchomienia na przeglądarkach desktop oraz mobilnych. Pierwszym detalem będzie więc zdefiniowanie meta viewport (obszar strony widoczny dla użytkownika na jednym ekranie). Więcej o podstawach HTML5 tutaj.

Dokument HTML5 i dołączenie potrzebnych plików

Stwórzmy dokument HTML5, dodajmy do niego jQuery oraz Bootstrap 3.3.7 (np. z https://www.bootstrapcdn.com).

Czytaj dalej »

Style CSS dla html5 progress bar w różnych przeglądarkach

Październik 28th, 2016

Mr. JavaScript

Dziś kilka słów o HTML5 progress bar, a konkretnie nadawanie mu CSS w taki sposób, aby wyglądał tak samo we wszystkich przeglądarkach. Może tego wymagać projekt, a programista może być zaskoczony, że określone style stosują się tylko w określonej przeglądarce, podczas gdy w innych przygotowany pasek postępu wygląda zupełnie inaczej.

Ten sam wygląd html5 progress bar w różnych przeglądarkach

Różne przeglądarki różnie wyświetlają pasek postępu html5, różne są także domyślne style. Jeśli chcemy, aby pasek zawsze wyglądał tak samo we wszystkich przeglądarkach, potrzebujemy małego triku CSS. Gotowe rozwiązanie poniżej.

Czytaj dalej »

Przydatne narzędzia dla programistów: Yeoman

Sierpień 15th, 2016

Dominik-W

Znalazła się w końcu odrobina czasu na blogowanie, dlatego dziś chciałem napisać kilka słów o jednym z przydatnych narzędzi dla programistów – Yeoman.

Yo man! Przydatne narzędzia dla programistów – pan Yeoman

Po co robić żmudne, powtarzalne czynności skoro może to za nas robić maszyna, lub w tym przypadku – program. Yeoman pozwala nam na generowanie różnego rodzaju projektów – szczególnie tworzenie struktury katalogów i niezbędnych składników, zgodnie z najlepszymi praktykami i wzorcami.

Następuje wstępne utworzenie niezbędnych katalogów oraz plików, a także zainstalowanie potrzebnych zależności (dependencies).

Przykładowo możemy tworzyć nowy AngularJS, dla którego może zostać od razu zainstalowany Bootstrap, Saas i inne rozszerzenia, których nasz projekt będzie potrzebować.

Instalacja opiera się o npm, który z pewnością mamy w naszym środowisku, jeśli mieliśmy już do czynienia z node.js. Potrzebny jest również Bower i Grunt =>

Czytaj dalej »

Pasek postępu w CSS – progress bar w kilku linijkach kodu

Maj 6th, 2016

Dominik-W

Pasek postępu (progress bar) w projekcie Web? Jasne – i to bez użycia obrazków. Dziś krótko i na temat.

Pasek postępu w CSS i HTML5

Możemy skorzystać z HTML5 i Bootstrap, lub zdefiniować własne style CSS.

Sposób 1 – HTML5

Dodajmy do strony Bootstrap i jQuery, oraz kod jak poniżej.

...
  <div class="progress" style="width: 50%">
    <div class="progress-bar" role="progressbar" aria-valuenow="40"
      aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      40% (default style)
    </div>
  </div>

Gotowe. Mamy pasek postępu! Kolory i postęp definiujemy poprzez klasy CSS (np. class=”progress-bar progress-bar-danger”) oraz właściwości (np. role=”progressbar”, aria-valuenow=”100″). A ponadto ustawiamy szerokość elementu (style width).

Więcej przykładów pasków postępu poniżej.

Czytaj dalej »

Tutorial AngularJS – proste UI do sterowania elementami

Marzec 12th, 2016

Dominik-W

Angular w praktyce! Dziś mamy tu mały tutorial AngularJS, w którym stworzymy proste UI powiązane z dynamicznie rysowanym (odświeżanym ) obiektem graficznym.

Tutorial AngularJS – sterowanie obiektem graficznym za pomocą Angular

W kursie podstawowym skupialiśmy się głównie na informacjach, warto więc teraz zobaczyć to w realnym przykładzie. Pomoże nam ten prosty tutorial w kilku krokach.

Krok 1.

Stwórzmy dokument HTML5 i dołączmy bibliotekę AngularJS.

Krok 2.

Zdefiniujmy element, którym będziemy poruszać z poziomu UI. W naszym przykładzie stworzymy prosty element w CSS:

.my-elem {
  background: #00c;
  border-radius: 10%;
  position: absolute;
  width: 200px;
  height: 200px;
  max-width: 500px;
  max-height: 500px;

  /* speed */
  transition: 0.8s;
  -webkit-transition: 0.8s;

  /* init pos*/
  left: 100px;
  top: 200px;
}

Czytaj dalej »

Nauka AngularJS od podstaw – część III – podsumowanie

Marzec 5th, 2016

Dominik-W

W części III podstawowego kursu Angular kontynuujemy zagadnienia z części poprzedniej, jak i dotykamy nowych, kolejnych zagadnień dotyczących pracy z tą biblioteką.

Nauka AngularJS – kolejne zagadnienia

Zacznijmy od filtrów. To kolejna cecha AngularJS, która zdejmuje z programisty część żmudnej pracy. Zobaczmy je w akcji, podczas formatowania danych różnego rodzaju.

Filtry (AngularJS filters)

Już w poprzedniej części mogliśmy zobaczyć jak proste w użyciu (a jednocześnie pomocne) są filtry, na przykład:

...
<p>{{ message.sent | date:'MMM d, y h:mm:ss a' }}</p>
...

Czytaj dalej »

Nauka AngularJS od podstaw – część II

Luty 3rd, 2016

Dominik-W

Dziś kontynuujemy naukę frameworku AngularJS od podstaw, opisując najważniejsze aspekty składowych aplikacji Angular, oraz analizując małe przykłady praktyczne.

Nauka AngularJS – kolejne kroki

Poprzednia część opisuje podstawowe kwestie związane z tym znakomitym rozwiązaniem.

Wiemy że AngularJS jest frameworkiem języka JavaScript i rozszerza HTML poprzez dyrektywy ng. Poprzednia część pokazuje także prosty przykład z data-binding. Mamy także świadomość wielu przydatnych dyrektyw, np. ng-init:

<div ng-app="" ng-init="firstName='Joe'">
  <p>The name is <span ng-bind="firstName"></span></p>
</div>

Dodajmy do tego wyrażenia (AngularJS expressions). Egzystują one w podwójnych nawiasach klamrowych np. {{ expression }} i na nich AngularJS może wykonywać swoją magię. Wyrażenia mogą być także zapisane w dyrektywie ng-bind=”expression”.

Czytaj dalej »

Nauka AngularJS od podstaw – część I

Styczeń 16th, 2016

Dominik-W

AngularJS – otwarta biblioteka języka JavaScript, rozwijana przez firmę Google. Znakomicie wspomaga tworzenie aplikacji na pojedynczej stronie (Single Page Application, SPA). Rozszerza HTML o własne, specjalne tagi. Biblioteka implementuje wzorce Model-View-Controller (MVC) oraz Model-View-ViewModel (MVVM), ułatwiając programowanie i testowanie aplikacji Web.

Nauka AngularJS – wstęp. Jak to działa?

AngularJS został stworzony z założeniem, że programowanie deklaratywne powinno być używane do budowy interfejsów i łączenia komponentów oprogramowania, natomiast programowanie imperatywne znajduje zastosowanie w logice biznesowej.

Biblioteka Angular wczytuje HTML zawierający dodatkowe, specyficzne dla tej biblioteki tagi. Obsługując owe tagi, AngularJS przypisuje wejściowe i wyjściowe elementy strony do modelu, zapisanego jako zestaw zmiennych JS.

Wartości tych zmiennych mogą być ustawiane zarówno ręcznie, jak i pobrane ze źródła w postaci JSON.

Framework przystosowuje i rozszerza możliwości zwykłego HTML do lepszej obsługi dynamicznych treści, umożliwiając automatyczną synchronizację pomiędzy modelem i widokiem. Mówiąc najprościej zdejmuje z programisty naprawdę sporo żmudnej pracy.

Znakomitą i bardzo silną cechą AngularJS jest wiązanie danych (data binding) oraz dwukierunkowe wiązanie danych (two-way binding). Dwukierunkowe wiązanie danych w AngularJS jest uważane za jego najważniejszą funkcję.

Czytaj dalej »

No skill – no deal! Umiejętności front-end developera lub full-stack developera

Grudzień 17th, 2015

Dominik-W

Jak to mówią no skill – no deal! Bez odpowiednich umiejętności nie zdziałamy za wiele. Ważny jest też ciągły rozwój naszych skillz.

To już nie te czasy, gdy wystarczała znajomość DHTML i PHP, obecnie developer obok języków programowania musi znać także masę narzędzi i frameworków.

Umiejętności front-end developera / full-stack developera kontra rynek

Dziś postaramy się rzucić okiem na to, co warto umieć chcąc być dobrym front-end lub full-stack developerem. Jakie są trendy, a przede wszystkim czego wymaga rynek – zleceniodawcy i pracodawcy.

Jakie są dziś pożądane umiejętności front-end developera lub full-stack developera? Branża rozwija się niezwykle dynamicznie w tym kierunku, a wiele osób rozważa zostanie front-end developerem, którzy są dziś rozchwytywani.

Czytaj dalej »

Mustache JS na przykładzie aplikacji Express. Część 2/2.

Grudzień 12th, 2015

Dominik-W

Witamy w II części tutoriala o Mustache JS i Express. Dziś dokończymy dzieło rozpoczęte w części I.

Mustache JS i jQuery w akcji

Dotąd omówiliśmy podstawy pracy z biblioteką Mustache, przygotowaliśmy dane testowe oraz serwer w node.js. Teraz pora na oprogramowanie warstwy front-end.

W naszym przypadku użyjemy:

Bootstrap v3.3.5

jQuery v1.11.3

jQuery Easing v1.3 plugin

Ionicons

mustache JS

Kolejny zatem krok to strona html5, stworzona w oparciu o Bootstrap.

Szczególnie zwróćmy uwagę na 2 elementy – nawigację oraz szablony Mustache.

Czytaj dalej »