{"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
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 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 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 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>\nCo v ebooku najdete?<\/strong><\/h2>\n
\u010c\u00e1st pro v\u00fdvoj frontendu<\/strong><\/h2>\n
\u010c\u00e1st s informacemi o vlastnostech CSS3<\/strong><\/h2>\n