{"id":2550,"date":"2015-08-23T05:47:49","date_gmt":"2015-08-23T05:47:49","guid":{"rendered":"http:\/\/musilda.cz\/?p=2550"},"modified":"2015-08-23T05:47:49","modified_gmt":"2015-08-23T05:47:49","slug":"ebook-vzhuru-do-css3-od-martina-michalka","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/ebook-vzhuru-do-css3-od-martina-michalka\/","title":{"rendered":"Ebook Vzh\u016fru do CSS3 od Martina Mich\u00e1lka"},"content":{"rendered":"

Sv\u011bt WordPressu nen\u00ed jen o tom, st\u00e1hnout plugin, nebo \u0161ablonu, naklikat options a hotovo. I kdy\u017e se v\u00e1m to tv\u016frci pr\u00e9miov\u00fdch \u0161ablon sna\u017e\u00ed nakukat.<\/p>\n

Je to hlavn\u011b b\u011b\u017en\u00e1 pr\u00e1ce a pokud chcete web vyv\u00edjet a neb\u00fdt z\u00e1visl\u00ed na tom, co dostanete od dodavatele \u0161ablon a plugin\u016f, k\u00f3dov\u00e1n\u00ed a programov\u00e1n\u00ed se nevyhnete. Nebo na to n\u011bkoho mus\u00edte m\u00edt.<\/p>\n

A pr\u00e1v\u011b o frontendu (to je ta \u010d\u00e1st, co jsem zahrnul pro v\u00fdraz „k\u00f3dov\u00e1n\u00ed“), je ebook od Martina Mich\u00e1lka – Vzh\u016fru do CSS3.<\/p>\n

Pokud jste ji\u017e m\u011bli \u010dest s n\u011bjak\u00fdm \u010desk\u00fdm ebookem, v\u00edte, \u017ee jejich kvalita je n\u011bkdy \u0161\u00edlen\u00e1. Koup\u00edte, p\u0159e\u010dtete a v \u00fastech m\u00e1te takovou pachu\u0165, jako po n\u011bjak\u00e9 n\u00e1hra\u017ece. Spousta kec\u016f a minimum hodnotn\u00fdch informac\u00ed.<\/p>\n

Pr\u00e1v\u011b informace jsou to, \u010d\u00edm je ebook doslova nacpan\u00fd. Je vid\u011bt, \u017ee autor \u010derp\u00e1 p\u0159edev\u0161\u00edm z praxe a „om\u00e1\u010dky“ je naprost\u00e9 minimum.<\/p>\n

Pro koho je ebook ur\u010den\u00fd?<\/strong><\/h2>\n

Proto\u017ee ka\u017ed\u00e1 recenze je subjetivn\u00ed, tak mohu poslou\u017eit pouze sv\u00fdm n\u00e1zorem.<\/p>\n

Pro ka\u017ed\u00e9ho samouka\u00a0<\/strong><\/p>\n

Samouk zn\u00ed mo\u017en\u00e1 trochu o\u0161kliv\u011b, ale pokud nesed\u00edte ve firm\u011b, nebo v kancel\u00e1\u0159i s dal\u0161\u00edmi v\u00fdvoj\u00e1\u0159i, nem\u00e1te moc \u0161anc\u00ed pochytit takov\u00e9 ty praktick\u00e9 v\u011bci. Samoz\u0159ejm\u011b, \u017ee se nau\u010d\u00edte spoustu v\u011bc\u00ed z anglicky psan\u00fdch tutori\u00e1l\u016f, ale ty jsou \u010dasto jen stroh\u00fdm soupisem informac\u00ed.<\/p>\n

A pak pro v\u0161echny ostatn\u00ed<\/strong><\/p>\n

V p\u0159\u00edpad\u011b, \u017ee d\u011bl\u00e1te\/vlastn\u00edte weby, nebo je jen spravujete, tak m\u00edt po ruce takov\u00fd p\u011bkn\u00fd souhrn, se v\u017edy hod\u00ed. Samoz\u0159ejm\u011b, kdy\u017e si p\u00ed\u0161ete tasky pro Grunt, nebo k\u00f3dujete v Sass, tak u\u017e jej asi nepot\u0159ebujete, ale pro\u00a0v\u011bt\u0161inu\u00a0v\u00fdvoj\u00e1\u0159\u016f web\u016f se jedn\u00e1 o nov\u00e9 v\u011bci.<\/p>\n

Co v ebooku najdete?<\/strong><\/h2>\n

Krom\u011b \u00favodu, bych ebook rozd\u011blil na dv\u011b \u010d\u00e1sti a to na \u010d\u00e1st popisuj\u00edc\u00ed n\u00e1stroje pro rutinn\u00ed produkci a na \u010d\u00e1st s „manu\u00e1lem“ vlastnost\u00ed CSS3.<\/p>\n

\u010c\u00e1st pro v\u00fdvoj frontendu<\/strong><\/h2>\n

V prvn\u00edch kapitol\u00e1ch se dozv\u00edte, co je responsivn\u00ed design, pro\u010d se pou\u017e\u00edv\u00e1 a jak\u00e9 jsou n\u00e1roky na m\u00e9dia v responsivn\u00edch webech.<\/p>\n

Zjist\u00edte, \u017ee existuje mobiln\u00ed peklo, kdy jsou r\u016fzn\u00e1 rozli\u0161en\u00ed displej\u016f a prohl\u00ed\u017ee\u010de pro tato za\u0159\u00edzen\u00ed se od sebe \u010dasto velmi li\u0161\u00ed.<\/p>\n

N\u00e1sleduje \u010d\u00e1st s n\u00e1stroji pro vlastn\u00ed produkci frontendu, od preprocesor\u016f p\u0159es\u00a0bal\u00ed\u010dkovac\u00ed managery a\u017e t\u0159eba po Avocode.<\/p>\n

M\u016fj n\u00e1zor:<\/strong> tato \u010d\u00e1st promne byla p\u0159\u00ednosn\u00e1 p\u0159edev\u0161\u00edm d\u00edky informac\u00edm o responzivn\u00edch obr\u00e1zc\u00edch a \u010d\u00e1sti o OOCSS.<\/p>\n

Tady si mus\u00edm malinko post\u011b\u017eovat. Docela mne \u0161tve, \u017ee auto\u0159i n\u00e1vod\u016f a postup\u016f, po\u010d\u00edtaj\u00ed s t\u00edm, \u017ee ten kdo \u010dte podobn\u00fd text, m\u00e1 ur\u010dit\u00e9 z\u00e1kladn\u00ed znalosti. K \u010demu je popis, jak vytvo\u0159it n\u011bjak\u00fd task, nebo nastavit dependency pro projekt, kdy\u017e naprosto pro jednodu\u0161e ne\u0159eknou jak a kde si projekt vytvo\u0159it. Nev\u00edm jak jsou na tom linux\u00e1ci, ale j\u00e1 jsem celkem dlouho bojoval s t\u00edm, jak pou\u017e\u00edt Grunt ve slo\u017ece, kde m\u00e1m ulo\u017een\u00e9 weby na localhostu. Ale to jen na okraj.<\/p>\n

 <\/p>\n

\u010c\u00e1st s informacemi o vlastnostech CSS3<\/strong><\/h2>\n

Nikdo si nem\u016f\u017ee pamatovat v\u0161echno a m\u00edt po ruce ucelen\u00fd p\u0159ehled vlastnost\u00ed CSS3 se hod\u00ed. Nav\u00edc, kdy\u017e je dopln\u011bn o re\u00e1ln\u00e9 uk\u00e1zky, jako je tato\u00a0http:\/\/codepen.io\/machal\/pen\/pKodf<\/a>.<\/p>\n

Naprosto jasn\u011b je zde op\u011bt vid\u011bt praxe a z\u00edsk\u00e1te i informace, jen\u017e z dokumentace nevy\u010dtete. Vysv\u011btleny jsou zde media queries, animace, box model a dal\u0161\u00ed CSS3 prvky.<\/p>\n

Pokud jste pou\u017e\u00edvali border radius a background image jen pro zakulacen\u00e9 rohy a vlo\u017een\u00ed obr\u00e1zku na pozad\u00ed, budete koukat, co v\u0161echno se d\u00e1 t\u0159eba s r\u00e1me\u010dkem d\u011blat.<\/p>\n

Na konec si nechal autor nov\u00e9 jednotky rozm\u011br\u016f, jako je t\u0159eba REM a flexbox.<\/p>\n

A flexbox mne zaujal asi nejv\u00edc. Na prvn\u00ed pohled naprosto super z\u00e1le\u017eitost. Bohu\u017eel pouze od IE10+. Ale pokud na star\u0161\u00ed IE ka\u0161lete, tak par\u00e1da.<\/p>\n

M\u016fj n\u00e1zor:<\/strong> d\u00edky flexboxu a p\u0159edev\u0161\u00edm \u017eiv\u00fdm uk\u00e1zk\u00e1m je tato \u010d\u00e1st ebooku super \u010dten\u00edm pro v\u0161echny kod\u00e9ry. L\u00edbilo se mi tak\u00e9, \u017ee autor zmi\u0148uje podporu v prohl\u00ed\u017ee\u010d\u00edch a p\u0159\u00edpadn\u011b js knihovny, kter\u00e9 dodaj\u00ed podporu a\u017e pro IE8.<\/p>\n

Proto\u017ee se na ka\u017edou v\u011bc d\u00e1 d\u00edvat z r\u016fzn\u00fdch stran, odkaz na super \u010dl\u00e1nek o k\u00f3dov\u00e1n\u00ed\u00a0http:\/\/blog.r4ms3s.cz\/kdyz-na-to-koder-sere\/<\/a><\/p>\n

 <\/p>\n

Z\u00e1v\u011br<\/strong><\/h2>\n

Pro ka\u017ed\u00e9ho, kdo d\u011bl\u00e1 weby a c\u00edt\u00ed, \u017ee jsou v\u011bci, kter\u00e9 se mus\u00ed nau\u010dit, aby udr\u017eel krok s kvalitn\u00edmi v\u00fdvoj\u00e1\u0159i, mohu tento ebook jen doporu\u010dit. Mo\u017en\u00e1 v\u00e1m p\u0159ijdou tyto postupy dnes p\u0159\u00edli\u0161 nov\u00e9, ale d\u0159\u00edve, nebo pozd\u011bji budou vy\u017eadov\u00e1ny jako standart.\u00a0A proto\u017ee se jedn\u00e1 o \u010desky psan\u00fd ebook, tak nen\u00ed probl\u00e9m s jazykovou bari\u00e9rou. I kdy\u017e si nedovedu p\u0159edstavit, jak se dne\u0161n\u00ed v\u00fdvoj\u00e1\u0159 obejde bez angli\u010dtiny.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Sv\u011bt WordPressu nen\u00ed jen o tom, st\u00e1hnout plugin, nebo \u0161ablonu, naklikat options a hotovo. I kdy\u017e se v\u00e1m to tv\u016frci pr\u00e9miov\u00fdch \u0161ablon sna\u017e\u00ed nakukat. Je to hlavn\u011b b\u011b\u017en\u00e1 pr\u00e1ce a pokud chcete web vyv\u00edjet a neb\u00fdt z\u00e1visl\u00ed na tom, co dostanete od dodavatele \u0161ablon a plugin\u016f, k\u00f3dov\u00e1n\u00ed a programov\u00e1n\u00ed se nevyhnete. Nebo na to n\u011bkoho<\/p>\n","protected":false},"author":1,"featured_media":2552,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"footnotes":""},"categories":[16],"tags":[90,106,142,186],"class_list":["post-2550","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-recenze","tag-bower","tag-css3","tag-flexbox","tag-grunt"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/2550"}],"collection":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/comments?post=2550"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/2550\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/2552"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=2550"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=2550"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=2550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}