Robíme WordPress #4 - Widgety a Sidebary

napísal , 11 Jun 2012

Nekončíme s vylepšovaním témy (neveeeeer!) - naučíme ju vypľúvať na stránku JavaScripty a iné veci, skášlime ju (pozor: CSS kúra trvá skoro pol videa), naučíme ju používať sidebary a do nich narveme widgety. A vysvetlíme si captain hooks. Čo nie sú háky.

Ešte raz a v odrážkach:

Ak ma chceš podporiť v tvorbe seriálov, behni na yablko.sk. Dík! Prípadne ma sleduj skrz @yablko.

Čítaj ďalej pre kusy kódu, za hrsť muziky a tému k stiahnutiu.

Robíme WordPress #3 - WordPress Loop

napísal , 17 May 2012

Vylepšíme tému, rozložíme ju na viac template files a tie rozhýbeme WordPress Loop-om.
WordPress Loop je akýsi základný stavebný kameň WordPressu.

Keď si vyžiadame vo stránku, WP sa pozrie do nastavení v dashboarde, podľa nich vytiahne príspevky z databázy a uloží si ich. WordPress Loop je funkcia, ktorá k týmto uloženým informáciám pristupuje a po jednej nám ich všetky dovolí vypísať a robiť s nimi veci.

A to si ukážeme.
A ukážeme si aj HTML5 a veci okolo.
Pretože v našej téme budeme používať nové HTML5 elementy.

A to všetko do ľúbezných rytmov kráľa fontány, Vasha P.

Ostatné seriály nájdeš na yablko.sk, kde ma môžeš aj finančne podporiť, ak chceš viac videí častejšie:) Dík! Prípadne ma sleduj skrz @yablko.


Stiahnite si vyrábanú tému: amazeballs_v023.zip

Robíme WordPress #2 - Úvod do tvorby tém

napísal , 8 May 2012

Dnes si vytvoríme prvú vlastnú tému, yay!
Bude veľmo veľmo jednoduchá, žiadne zázraky nečakajte. Ale bude.

Témy:

  • sa starajú nielen o výzor ale aj o funkcionalitu
  • sú kolekcia súborov, ktoré spoločnými silami dajú stránku do pohybu
  • potrebujú minimálne 2 súbory - style.css a index.php (napríklad)
  • môžu okrem Template Files obsahovať súbor functions.php
  • existujú

A tak ďalej. Pozri si video, dozvieš sa viac:)
Ospravedlňujem sa za kvalitu zvuku, je menej než ideálna. Snažil som sa odfiltrovať kopu okolitého rámusu, z čoho mi vychádza, že by mi niekto z vás mal kúpiť RØDE Podcaster ;)

Ostatné seriály nájdeš na yablko.sk, kde ma môžeš aj podporiť. Dík!
Prípadne ma sleduj skrz @yablko.

Hudba je od Neural Corrosion a dá sa stiahnuť (zadarmo, bitches!) na neuralcorrosion.com. Ak poznáš Stevena Wilsona, prípadne ak sa ti páči psychedelicko-divný rock, budeš tam ako doma.

Robíme WordPress #1 - inštalácia, prehľad features

napísal , 26 Apr 2012

Čo robíme:

  • stiahneme a nainštalujeme wordpress
  • prebehneme jeho administrátorské rozhranie (dashboard)
  • zbehneme základné features
  • ukážem ako cez DB resetnúť administrátorské heslo
  • ukážem trik, ako WP nakopnúť do debug módu
  • metal

Ak s WP pracuješ, ak ho poznáš, ak ho máš nainštalovaný.. preskoč toto video. Nepozeraj ho. Skapeš od nudy. A nehovor, že som ťa nevaroval;) But there IS metal, so.. je to na tebe.

Ostatné seriály nájdeš na yablko.sk, kde ma môžeš aj podporiť. Dík:)
Prípadne ma sleduj skrz @yablko.

Hudba od @tscorbeaux, k stiahnutiu cez bandcamp. Enjoy!

Robíme WordPress - nový seriál!

napísal , 23 Apr 2012

Hej! Nauč sa jQuery a Nauč sa CodeIgniter majú nového súrodenca! Začal som seriál, nultá epizóda:

Je o WordPresse.
Budeme v ňom robiť stránky a témy a pluginy a widgety a podobné srandy. Bude developersko-dizajnérsky. Nebudem vás teda učiť "písať články vo wordpresse" alebo iný trapas.

Seriál predpokladá základné vedomosti HTML a CSS a PHP a tak vôbec. Ak ich nemáte, počkajte na ďalšie seriály, aj na to príde:)

Volá sa "Robíme WordPress". Predbežne. Asi aj finálne.
"Dizajnovanie pre WordPress" sa mi nepáčilo a "I R WURDPRSS AND SO CAN U" by prešlo, len keby ste všetci šlahnutí jak ja. Takže "Robíme WordPress", lebo je to krátke a výstižné.

So have fun & stay tuned! (It's Bieberific!)

Btw hudba je od @tscorbeaux a dá sa stiahnuť tu. Šikovný chlapec. And ladies? He's totally single.

Iné prostredie

napísal , 17 Apr 2012

Nainštaloval som Chrome Canary.

Canary je dev build prehliadača, updatovaný takmer denne. V praxi to znamená, že dostaneš prístup k experimentálnym fičúram hneď, ako je to možné. Chrome ich má dosť, väčšinou sú skryté v about:flags (napíš about:flags do adresového riadku).

Pre programátora je najužitočnejšie asi to, že má vždy prístup k najnovšej verzii developer tools (ctrl+shift+i / F12), ale dôvod prečo som to nahodil je, že Canary vie šlapať súčasne s obyčajným Chrómom. Čo som využil na vytvorenie dvoch prostredí - developerského a browsovacieho.

V našej branži k robote stačí internet a počítač a schopnosť potlačiť slzu a sadnúť k nemu ráno zas. A aj napriek tomu, že nemusíme, kopa z nás uteká do kanclov a coworking officov a tak. Preč z domu. Chceme vybudovať odlišný rytmus pre prácu a civil a chceme jasne cítiť, kedy skončilo jedno a začalo druhé. Keď vypadnem officu, chcem cítiť, že robota skončila a s tými paddingami sa budem jebkať zajtra, aj keď by to trvalo len 5 minút.

Rozhodnúť sa prestať sa dá aj doma, ale odolať je ťažké a ľudia sú slabučkí.

I can resist everything except temptation. - Oscar Wilde

Ok thanks, now back to your grave Oscar.

Iný prehliadač je virtuálny odvar kancelárie.

Ako svetový šampión paniky a prokrastinácie, vždy keď sa v robote objaví čelindž, otváram nový tab a klikám na všetky bookmarky. To samozrejme môžem aj Canary, keďže väčšina bookmarkov a nastavení sa synchronizuje, ale tam nie som na stránkach prihlásený;)

A keďže ľudia sú nielen slabučkí ale aj leniví (a keď hovorím "ľudia", myslím "ja"), ono to stačí. Hádam to nebudem manuálne vypĺňať? Sa na to vyprdnem a vrátim sa k robote.

A keď Canary zavriem, viem, že robota skončila. Že má inú ikonku a že v ňom mám iné Extensions a vôbec fakt, že vyzerá inak, je tiež bonus. A že mi v ňom nikde nesvieti počet neprečítaných mailov je ešte lepší bonus;)

Pred časom som písal o prechode z Opery na Chrome. Je tam zoznam extensions, ktorý sa odvtedy zmenil. Navyše sa rozdelil, pretože developerské v browsovacom prostredí nepotrebujem a naopak. Takto nejak to vyzerá teraz:

Ako na responsive design

napísal , 10 Apr 2012

Responsive design je v poslednej dobe je tak omieľaný trend, že o ňom hovorí pomaly aj moja babka. V zásade ide o fajn koncept. Namiesto kódenia a udržiavania niekoľkých samostatných verzií stránky (normálnej desktopovej verzie a mobilnej verzie) sa spraví jedna s pár dodatočnými informáciami, vďaka ktorým sa stránka prispôsobí akémukoľvek (rozumnému) rozlíšeniu. Od mobilu až po FullHD display.

Otvorte si demo, pohrajte sa so šírkou prehliadača a hneď pochopíte.

Skôr, ako prejdem ku konkrétnemu kódu, by bolo vhodné povedať, prečo uprednostniť responsive design pred starším trendom mobilných verzií.

Nuž. V ideálnom prípade stačí responsive design vytvoriť pridaním pár riadkov CSSka, v horšom aj pár riadkami JavaScriptu (tj. robota na pár hodín). Mobilná verzia je proste iná verzia generovaná serverom. Čiže má samostatné HTML, CSS a zrejme aj JavaScripty. Ak chcete niečo pridať, musíte prepisovať obe verzie.