HTML/CSS kodavimas

Sveiki, koduoju HTML/CSS dizainus (pats kodavimo būdas - tusčias notepad++ lapas ir rašomas kodas), tačiau neteko susidurti su RESPONSIVE, skaitinėjausi straipsnius, pamokas, tačiau iki galo niekaip nedašunta. Gal atsirastų žmonių kurie galėtų paskelbti konkretesnių pamokų, straipsnių linkų arba parodyti pavyzdo, o gal atsirastų tokių, kurie mokosi ar jau moka ir nori padėti?

kažkaip, nebe naujiena tas responsive, ir pilnas internetas tų tavo taip norimų 'konkretesnių' pamokų, netingėk pagooglinti

Sveiki, koduoju HTML/CSS dizainus (pats kodavimo būdas - tusčias notepad++ lapas ir rašomas kodas), tačiau neteko susidurti su RESPONSIVE, skaitinėjausi straipsnius, pamokas, tačiau iki galo niekaip nedašunta. Gal atsirastų žmonių kurie galėtų paskelbti konkretesnių pamokų, straipsnių linkų arba parodyti pavyzdo, o gal atsirastų tokių, kurie mokosi ar jau moka ir nori padėti?

Jei nori, galiu atsiųsti code school "Journey into mobile" kursą. Pats dar nežiūrėjau, bet idomių dalykų moko ten. Pvz. kaip padaryt responsive font'us. Šiaip, pasiimk bootstrap'ą ir nesuk galvos kolkas.

--- Edit

Va, jie ir patys pashare'ino.

https://www.youtube.com/watch?v=i9PdDsZ57cY&list=PLFvzBwXlguwyWm6oXRQeEIIA3Pjk6HdG2

Ištikro, tai twitter bootstrap`as vienas populiariausių github`o projektų ir manau superinis dalykas. http://getbootstrap.com/ absoliučiai viską rasi čia.

Išsami dokumentacija, jau parašyti pavyzdžiai: http://getbootstrap.com/css/#overview , visi įmanomi pavyzdžiai ko gali prireikti - formos, lentelės, navigacijos, buttonai ir t.t http://getbootstrap.com/components/#nav .

Šiai dienai vienas populiariausių variantų - one page responsive su scroolingu - http://startbootstrap.com/template-overviews/scrolling-nav/

Ir aiškus įdomiausia dalis, tai gyvi pavyzdžiai: http://ironsummitmedia.github.io/startbootstrap-freelancer/ , o visus rasi -> http://startbootstrap.com/template-categories/popular/

Ir, jeigu jau tikrai tai įdomu, vertėtu ir apie Sass ir Compass domėtis ir mokintis. Ištikro įdomus reikalas, gali rašyti ciklus, kintamieji, žodžiu - css linksmai. Beja, jeigu jau sass žiūrėsi, tai padės programa - Scout.

O kaip kolega aukščiau sako, tai tikrai nereikėtu išradinėti savo dviračio ir mėginti pačiam kodinti viską. Kad ir tas pats php, jeigu kažką kuriam, tigi naudojam vieną ar kitą karkasą, tai ir čia neišimtis :)

:)

Ištikro, tai twitter bootstrap`as vienas populiariausių github`o projektų ir manau superinis dalykas. http://getbootstrap.com/ absoliučiai viską rasi čia.

 

Išsami dokumentacija, jau parašyti pavyzdžiai: http://getbootstrap.com/css/#overview , visi įmanomi pavyzdžiai ko gali prireikti - formos, lentelės, navigacijos, buttonai ir t.t http://getbootstrap.com/components/#nav .

 

Šiai dienai vienas populiariausių variantų - one page responsive su scroolingu - http://startbootstrap.com/template-overviews/scrolling-nav/

 

Ir aiškus įdomiausia dalis, tai gyvi pavyzdžiai: http://ironsummitmedia.github.io/startbootstrap-freelancer/ , o visus rasi -> http://startbootstrap.com/template-categories/popular/

 

Ir, jeigu jau tikrai tai įdomu, vertėtu ir apie Sass ir Compass domėtis ir mokintis. Ištikro įdomus reikalas, gali rašyti ciklus, kintamieji, žodžiu - css linksmai. Beja, jeigu jau sass žiūrėsi, tai padės programa - Scout.

 

 

O kaip kolega aukščiau sako, tai tikrai nereikėtu išradinėti savo dviračio ir mėginti pačiam kodinti viską. Kad ir tas pats php, jeigu kažką kuriam, tigi naudojam vieną ar kitą karkasą, tai ir čia neišimtis :)

:)

Nepamirštam ir less!

O kaip kolega aukščiau sako, tai tikrai nereikėtu išradinėti savo dviračio ir mėginti pačiam kodinti viską. Kad ir tas pats php, jeigu kažką kuriam, tigi naudojam vieną ar kitą karkasą, tai ir čia neišimtis :)

:)

Neužtenka žinoti vien tik css karkasą kaip naudoti, jei nori dirbti kokybiškai. Pvz, būna, kad reikia video elementą padaryt responsive, reikia padaryti, kad svg būtų responsive ir panašiai. Taip pat ir su php, gali dirbti su framework'u, bet nepamiršk, kaip viskas veikia.

O šiaip, aš pats neišvengiu bootstrap'o ir naudoju bower, grunt, npm, tą patį preprocesorių - sass, šnekant apie front-end'ą.

Ir temos autoriui - nenaudok notepad++, atsisiųsk normalų IDE. Pats naudoju PhpStorm'ą, bet front-end'ui kokį paprastesni išsirinkt gali, pasidomėk.

Bootstrapo naudoti niekam nerekomenduočiau.

O šiaip, aš pats neišvengiu bootstrap'o ir naudoju bower, grunt, npm, tą patį preprocesorių - sass, šnekant apie front-end'ą.

Tell me more about this, please. Frontende naudoji npm? Kiek žinau, npm yra tik packet manageris, kuris nieko bendro su frontendu neturi. Žinoma, tarkim grunt'o be npm nepanaudosi, bet, jei tu parašai 'npm install' ir supūti grunto lib'us, tai čia... vadinasi, kad naudoji npm? :)

Bootstrapo naudoti niekam nerekomenduočiau.

 

 

 

Tell me more about this, please. Frontende naudoji npm? Kiek žinau, npm yra tik packet manageris, kuris nieko bendro su frontendu neturi. Žinoma, tarkim grunt'o be npm nepanaudosi, bet, jei tu parašai 'npm install' ir supūti grunto lib'us, tai čia... vadinasi, kad naudoji npm? :)

Package manageris. Naudojų susirašyt grunt dependencies, kaip kad compass'ą, uglify ir kt. Šiaip ir patį grunt'ą taip pat sintiesi per managerį. NPM labiau naudojamas tų, kas dirba su Node.js . Taip pat, kaip composer'is php surašo įvairius third-party libus, taip ten tai atlieka npm.

Boweris irgi package manageris(front-end), kaip ir composeris(php) ar gem'ai(ruby). Tad nežinau, kodėl tau būtent NPM užstrigo :) o prie front-end'o priskiriu, nes visi mano grunt task'ai atlieka front-end'o darbus. Here you go.

--Edit

:D dar kart perskaičiau ir prajuokino tavo komentaras. Taip, naudoju npm, lygiai taip pat, kaip kad tu padarai composer install, tai aš dar padarau bower install ir npm install. Būtent tai ir yra atliekama, surašomi dependencies. Idomu kaip tu naudoji, kad skaitosi :) vargu, ar pagal paskirtį tuomet.

Vieni sako naudok boostrap, kiti nenaudok, gal galima su argumentais apie tai?

Ačiū Steeler ir emck už naudingus pranešimus.

Iš populiarių CSS karkasų aš renkuosi Foundation (http://foundation.zurb.com/). Žinoma skonio reikalas. Štai čia palyginimas su Bootstrap: http://responsive.vermilion.com/compare.php

Vieni sako naudok boostrap, kiti nenaudok, gal galima su argumentais apie tai?

 

Ačiū Steeler ir emck už naudingus pranešimus.

Naudoti frameworką ar ne priklauso nuo svetainės, kurią darai, kartais mažiau darbo viską sukoduoti pačiam, kartais frameworkas sutaupo laiko.

Responsive pagrinde daromas su @media css faile nurodant maksimalų ar minimalų plotį @media (max-width: ***).

Tada šitam media bloke surašai taisykles, kurios įsigalioja raiškai pasiekus/esant minimalią ar maksimalią reikšmę.

Čia kaip paprasčiausias if/else. Jei plotis daugiau nei 1200px daryk taip, jei mažiau anaip.

Package manageris. Naudojų susirašyt grunt dependencies, kaip kad compass'ą, uglify ir kt. Šiaip ir patį grunt'ą taip pat sintiesi per managerį. NPM labiau naudojamas tų, kas dirba su Node.js . Taip pat, kaip composer'is php surašo įvairius third-party libus, taip ten tai atlieka npm.

 

Boweris irgi package manageris(front-end), kaip ir composeris(php) ar gem'ai(ruby). Tad nežinau, kodėl tau būtent NPM užstrigo :) o prie front-end'o priskiriu, nes visi mano grunt task'ai atlieka front-end'o darbus. Here you go.

 

--Edit

 

:D dar kart perskaičiau ir prajuokino tavo komentaras. Taip, naudoju npm, lygiai taip pat, kaip kad tu padarai composer install, tai aš dar padarau bower install ir npm install. Būtent tai ir yra atliekama, surašomi dependencies. Idomu kaip tu naudoji, kad skaitosi :) vargu, ar pagal paskirtį tuomet.

na, jei tu nesupranti, ką aš turėjau omeny, tai paklausiu dar vieno klausimo - tu Windows ar Mac OS frontendui naudoji? Laptopą ar stacionarų kompą?

na, jei tu nesupranti, ką aš turėjau omeny, tai paklausiu dar vieno klausimo - tu Windows ar Mac OS frontendui naudoji? Laptopą ar stacionarų kompą?

Aš negaliu savęs įvardint front-end'eriu, daugiau back-end'u užsiimu, o naudoju linux'us ir laptop'ą, bet pakankamai galingą ir man jo užtenka.

Vieni sako naudok boostrap, kiti nenaudok, gal galima su argumentais apie tai?

 

Ačiū Steeler ir emck už naudingus pranešimus.

Framework'o pliusas, kad sutaupo laiko, būna apie viską pagalvota už tave. Jei esi front-end'eris, turi daugiau žinoti, gal ateity kažkada savo framework'ą kurt sugalvosi. Bet susipažinti ir juos išbandyti, yra gera praktika, tikrai turi žinoti, kas tai yra. Mano galva, būdamas front-end'eriu turi mokėti dirbti bent su vienu CSS karkasu, bet tuo pačiu ir žinoti, kokiu principu jie veikia.

Kuo dar gali pasidomėti - JS frameworkai. Pala, ne. :) tau iš pradžiu reik javascript'o išmokti tiek, kad galėtum praktikoj taikyti. Tai čia būtų 1st step. 2nd step - Jquery lib'as. Aišku čia pasirinktinis dalykas, bet aš manau, kad šiuo metu nepabėgsi nuo jo, nes plačiai visur naudojamas. 3rd step - įvairūs JS framework'ai, kūriems ir pats nerandu laiko mokytis, nors ir norėčiau. Tai, pvz.: AngularJs(Nesimokyk dabar, atrodo išeis šiais metai antra versija, kuri bus visai kitokia, nei pirma), ReactJs(šiuo metu geriausias JS framework'as, jei neklystu), BackboneJs, UnderscoreJS(įvardina kaip library, atrodo, o ne framework'ą). Daug lib'ų galima vardinti, bet užtenka mokėti kokius du. N(th) step - įvairių canvas lib'ų naudojimai, WebGL naudojimas, bet čia jau advance, prie viso to, puikiai priliptų ir Node.js (server side javascript), tai nėra framework'as ar biblioteka, taip pat gal ir netinka prie front-end'o, bet mokėti dirbt su juo ir front-end'eriui būtų puiku.

Žinoma, front-end'eris turi mokėti dirbti su grafikos redaktoriais ir žinoti back-end'o pagrindus.

Pasidalinsiu dar vienu resursu su tavimi, nors jau buvau šitam forume skelbęs - http://www.ugnis.com/modernjs

Viską suapibendrinus, JS gali būti pain for your brains, bet neturi alternatyvų.

Framework'o pliusas, kad sutaupo laiko, būna apie viską pagalvota už tave. Jei esi front-end'eris, turi daugiau žinoti, gal ateity kažkada savo framework'ą kurt sugalvosi. Bet susipažinti ir juos išbandyti, yra gera praktika, tikrai turi žinoti, kas tai yra. Mano galva, būdamas front-end'eriu turi mokėti dirbti bent su vienu CSS karkasu, bet tuo pačiu ir žinoti, kokiu principu jie veikia.

 

Kuo dar gali pasidomėti - JS frameworkai. Pala, ne. :) tau iš pradžiu reik javascript'o išmokti tiek, kad galėtum praktikoj taikyti. Tai čia būtų 1st step. 2nd step - Jquery lib'as. Aišku čia pasirinktinis dalykas, bet aš manau, kad šiuo metu nepabėgsi nuo jo, nes plačiai visur naudojamas. 3rd step - įvairūs JS framework'ai, kūriems ir pats nerandu laiko mokytis, nors ir norėčiau. Tai, pvz.: AngularJs(Nesimokyk dabar, atrodo išeis šiais metai antra versija, kuri bus visai kitokia, nei pirma), ReactJs(šiuo metu geriausias JS framework'as, jei neklystu), BackboneJs, UnderscoreJS(įvardina kaip library, atrodo, o ne framework'ą). Daug lib'ų galima vardinti, bet užtenka mokėti kokius du. N(th) step - įvairių canvas lib'ų naudojimai, WebGL naudojimas, bet čia jau advance, prie viso to, puikiai priliptų ir Node.js (server side javascript), tai nėra framework'as ar biblioteka, taip pat gal ir netinka prie front-end'o, bet mokėti dirbt su juo ir front-end'eriui būtų puiku.

 

Žinoma, front-end'eris turi mokėti dirbti su grafikos redaktoriais ir žinoti back-end'o pagrindus.

 

Pasidalinsiu dar vienu resursu su tavimi, nors jau buvau šitam forume skelbęs - http://www.ugnis.com/modernjs

 

Viską suapibendrinus, JS gali būti pain for your brains, bet neturi alternatyvų.

Patariu pristabdyti komentarus pilnus buzzword'ų, apie kuriuos esate tik nugirdęs. Nenoriu įžeisti, tačiau vadinamas resursas yra visiškai useless, kadangi "things I had no time to talk about" sąrašas yra ilgesnis už dalykus, kurie aptarti.

Vienintelis patarimas front-ender'iui - bendrai domėtis front-end technologijomis bei atsakingai rinktis naudojamus įrankius.

Patariu pristabdyti komentarus pilnus buzzword'ų, apie kuriuos esate tik nugirdęs. Nenoriu įžeisti, tačiau vadinamas resursas yra visiškai useless, kadangi "things I had no time to talk about" sąrašas yra ilgesnis už dalykus, kurie aptarti.

Vienintelis patarimas front-ender'iui - bendrai domėtis front-end technologijomis bei atsakingai rinktis naudojamus įrankius.

Visų pirma, žmogus mokosi. Jam yra visiškai neaišku, ką aš čia rašau ir aš tai suprantu. Bet, nepaisant to, jis susidaro vaizdą, kad front-end nėra tik HTML ir CSS. Ir priedo, forume yra žmonių, kurių patirtis nevienoda, tad visi gali rasti kažko naudingo.

Temos autoriui - CSS ir HTML tai kaip matematikoj paprasti veiksmai. 1 žingsinis - lygtis. 2 žingsnis visokios nelygybės. Na ir taip toliau, vėliau prasideda funkcijos, trigonometrija ir visi kiti sudėtingesni dalykai.

Su šia paralele bus lengviau suprasti mano anksčiau išsakytas mintis. Terminų, pavadinimų šioj srity apstu, išgirsi, pažiūrėsi kartą, kitą kart bus lengviau, galvosi, prisiminsi, jog apie tai girdėjai. Tai prisideda prie mokymosi proceso.

Ir niekada nešneku apie tai, ko nesuprantu ir nežinau, gal nenaudoju kai kurių technologijų, bet žinau kam jos skirtos ir kas tai yra. Kad ir tas pats ReactJs - facebook developer'ių komandos sukurtas javascript frameworkas. Panašaus lygio kaip ir AngularJs(google framework'as), bet žinau, jog turi daugiau pranašumų, kokių jau neaktualu. O AngularJs buvau pradėjęs mokytis, žinau veikimo principus. Kad ir su tuo pačiu Node.js turiu šiek tiek ir praktinės patirties, labai patiko, bet negaliu visko mokytis, kad ir kaip norėtųsi.

Negi jus tikrai piktina išgirsti kažką naujo. Taip, aš visko nežinau, bet geranoriškai dalinuosi tuo, kuo galiu. Mielai išklausyčiau ir jus, priešingai, jei pasakytumėt kokį terminą, nueičiau ir pažiūrėčiau, kas tai yra. Juk XXI amžius, todėl ir resurse duotos tik nuorodos, pavadinimai. Žinoma jis skirtas pažengusiems, bet gal atsiras ir tokių, kuriem bus naudinga.

Nepamirškit, kad kalbam apie front-end'ą, o aš jau minėjau, kad linkstu į back-end kryptį, tad laiko mokytis front-end naujovių nelabai lieka. Žinau, jog mielai ateityje išmoksiu dirbti su Node.js, nes nežinau kito įrankio for real time web. Bet prima reikia geriau išmokti dirbti su kitomis, užsibrėžtomis išmokti, back-end technologijomis ir kalbu jau nebe apie PHP.

O ką jūs naudingo galite pasakyti? Papasakokit kažką iš savo patirties.

Vat mane kas labiausiai knisa mokantis kažko, kad dafiga skirtingų nuomonių ir skirtingų argumentų (pvz julykaz-steeler ginčas). Ir spėliok kuris čia dabar teisingas. <_<

Vat mane kas labiausiai knisa mokantis kažko, kad dafiga skirtingų nuomonių ir skirtingų argumentų (pvz julykaz-steeler ginčas). Ir spėliok kuris čia dabar teisingas. <_<

Žinok mes abu teisingai sakom, bet tikrai :) čia ne mokantis, čia pats gyvenimas toks. Niekada nėra vienos tiesos. Ir kai manai kąnors, visada reikia apsvarstyti, kad gali būti ir kitaip.

Tarp kitko, iš savo nedidelės patirties galiu pasakyti, jog jei nugali save ir sutinki, kad ir kitas gali būti teisus, o nešvaistai laiko ginčydamasis, pasieki geresnių rezultatų. Tai aš dar dirbu ties šiuo aspektu, kaip matai nelabai kartais išeina. Nors, šiuo atveju, tiesiog bandau apgint savo nuomonę. Šiaip kito supratimas svarbus profesionaliam programuotojui, tam kad galėtų dirbti komandoje, ir ne tik - profesionaliam žmogui taip pat.

O ar yra kokių alternatyvų tikrinant dizaino responsive?

O ar yra kokių alternatyvų tikrinant dizaino responsive?

Patikimiausia su Virtualbox'u, įvairiomis OS ir browseriais žiūrėti, gadgetai's irgi. Jei darysi su karkasu, tai nenudegsi, tiesiog, užteks pažiūrėti su skirtingo didžio browserio langu.

Gali pasidaryti print screen'ų su šiuo tools'u nemokamai, mokamai ir live versiją žiūrėt - http://www.browserstack.com

Atsiliepimai atrodo neblogi, bet praktikoje naudoti neteko, kadangi, kaip ir sakiau, naudoju karkasą, tad pats turėsi nuspręsti ar jis tinkamas naudoti. Šiaip gerą tools'ą surasti labai sunku, nes visi internete būna nepatikimi, labai nepatikimi ir atsidarius per telefoną matai visai kitokį vaizdą, nei jie sako, jog turėtum matyti.

Edit ---

Turėtų būt patikimas šis: