Embed Size (px)
Citation preview
Bartek DziamskiPoznań, 16.01.2014
KawasKryptyDom
marchewKi
proDuct Designer
FooDloveWcześniej:
User exPerience LeaDUser exPerience Designer
creative DirectorgraPhic Designer
BacK-enDFront-enD
[Poznań]
Poluję na senior frontend deve-lopera do mojego zespołu UI (12K - 16K PLN miesięcznie [update : kwota netto przy kontrakcie])
Wymagania:- znajomość jednego z wiodących frameworków JS (najlepiej Back-bone’a)- doświadczenie w pracy z single page apps w architekturze MV* + REST- praca w zautomatyzowanym śro-dowisku (Grunt + Jasmine + SASS ...)
Bonusy:- praca w zespole UI zorientowa-nym na osiąganie celów, nie na siedzenie w biurze 9-17- wyjazdy do głównej siedziby w Mountain View, sponsorowane kon-ferencje, wsparcie przy projek-tach i inicjatywach związanych z branżą
mvcvieW
controLLerMoDeL
ModelReguły przechowywania danych (struktura)
WidokWarstwa interacji z użytkownikiem
KontrolerZmienia stan modeluOdświeża widokPrzełącza sterowanie na inny kontroler
Bootstrap 3html5 / css3
responsive Design
<!DOCTYPE html> // Typu dokumentu
<head> // Ładuje się przed body
<link … .css”> <style … .js”>
// inne
</head>
<body>
// zawartość
</body> </html>
Dom
WikiMeDia coMMons
rest api
<div class=”post-list <% if (article) { %>post-article<% } %>”> <div class=”post-img-holder”> <img class=”post-img lazy” src=”<%= image %>?w=369&h=369)” width=”369” he-ight=”369” onload=”imgLoaded(this)” /> <div class=”post-text”> <div class=”post-title-bg” style=”background-image: url(<%= image %>?w=1&f=3,-20)”></div> <div class=”post-title”><div class=”post-table”><div class=”title-mid-dle”><%= content %><span class=”post-date”><%= created_at %></span></div></div></div> <div class=”actions col-lg-12”> <% } else { %> <a class=”js-like pull-right”> <span class=”js-label-like”><i class=”icon-heart”></i></span> <% if (likes != 0) { %> <span class=”js-amount-likes”><%= likes %></span> <% } %> </a> <% } %> <a class=”comment pull-right”> <i class=”icon-comment”></i> <% if (comments != 0) { %> <span class=”js-amount-comments”><%= comments %></span> <% } %> </a> </div> </div> </div> <% if (badges != 0) { %> <div class=”badges-container”> <% _.each(badges, function(badge) { %> <img src=”<%= badge.image %>” alt=”<%= badge.name %>” class=”badge-img--list js-badge-name” title=”<%= badge.name %>” /> <% }); %> </div> <% } %> <div class=”ps-header”> <div class=”js-avatar-container ps-avatar-container”> <a href=”/profiles/<%= username %>” class=”js-profile ps-avatar”><img src=”<%= avatar %>?w=80&h=80” title=”<%= username %>”></a> </div> </div> </div> </script>
[ { „id”:2480, „username”:”sandmanowie”, „user_id”:1019, „avatar”:”\/uploads\/avatars\/6a631d469346c03832d5882987f9e-e94f8636fd1.png”, „blog”:”https:\/\/www.facebook.com\/MrMrsSandman”, „created_at”:”2014-01-16 11:45:04”, „visibility”:6, „editors_choice”:”2014-01-16 12:00:20”, „content”:”Dobry dzie\u0144 zaczyna si\u0119 od dobrego \u015bniada-nia...”, „image”:”\/uploads\/posts\/0873bfa8049156d5a41af332aa97cf3cb015d554.JPG”, „article”:null, „url”:null, „hashtags”:”#\u015bniadania #tosty #mi\u00f3d #daktyle”, „mentions”:[
], „liked”:false, „likes”:3, „comments”:0, „reposts”:0, „reposted”:false, „is_repost”:false, „reposter_user_id”:null, „reposter_username”:null, „can_be_reposted”:true, „badges”:[ { „id”:1, „name”:”Foodlove poleca”, „description”:”Post rekomendowany przez Foodlove”, „image”:”\/assets\/img\/badges\/editors.png”, „amount”:null } ] }]
mv*
BacKBone.jsmarionette.js
javascriptsingle page apps
Xmljson
weBsocKet
real time weB
chatsystem Komentarzy
messengerpowiaDomienia
auDioviDeo
live streaming
gry i interFejsy 3DWeBgL
canvasthree.jsUnitY3D
• Chrome
• Firefox
• Safari
• Internet Explorer
• Opera
• ...
• Android
• iOS
• Windows Mobile
• ...
• Rozszeżenia przeglądarki
• Chromebook
• Node.js & spinoffs
noDe.js
learn to coDe!
