Fampivoarana ny FrontEnd: CodePen sa Lahatsoratra ambony?

CodePen sa soratra ambony?
CodePen sa Lahatsoratra ambony? Raha miresaka momba ny fandrindrana tranonkala isika dia tonga amintsika avy hatrany ny anaran'ny HTML, CSS ary JavaScript. Misy fomba maromaro hahatongavana any. Na dia raha manokatra takelaka isika dia afaka miasa manoratra "html". Marina fa raha mahita ny valin'ny programanao avy amin'ny pad ianao dia mila fomba fiasa miasa mafy hahamarika ny fandrosoana.

Ireo tranonkala ireo no kianja filalaovana lehibe ho an'ny mpamorona fampiharana ho an'ireo mpampiasa ny andro. Raha te hahalala bebe kokoa momba ny tombony sy fatiantoka ananan'ireo programa ireo dia hodinihinay lalina amin'ity lahatsoratra ity (farafaharatsiny, izay rehetra fantatsika). Araka ny nolazaiko hatrany dia azo antoka fa ny sasany aminareo eto dia mahalala bebe kokoa ny lohahevitra. Raha izany dia lazao izay rehetra tsy hitantsika eto. Faly izahay hiady hevitra!

Androany isika dia hamakafaka ny CodePen, JSBin, Plunkr, ambony, CSSDeck, Dabblet, ary LiveWeave. Iza no fitaovana malaza indrindra sy fitaovana fampiasa indrindra eto amin'ity tontolo ity. Betsaka kokoa, mazava ho azy.

Fa ho anao rehetra izay tsy mahalala ny momba ny FrontEnd na BackEnd dia andao hazavaina kely. Ny Front-End na ny interface dia ny ampahany hita maso izay ho hitan'ny mpampiasa fitetezana amin'ny Internet. Ny BackEnd dia ho ampahany voafehin'ny mpitantana ny tranokala. Amin'ny fandaharana, raha mampiditra kaody amin'ny alàlan'ny fitaovana iray mampiseho ny valiny miaraka ianao, dia hantsoina hoe front-end io.

CodePen

Ho an'ny ankamaroan'ny fitaovana feno indrindra amin'izay rehetra resahintsika. Natao fitaovana web izay zavatra akaiky indrindra amin'ny vondrom-piarahamonina iray hanehoana ny asanao. Karazana Youtube avy amin'ny programmer. Amin'izany dia azonao atao ny mahita ny asan'ireo mpandahatra fandaharana mifandray amin'ny tranonkala ary mifandraisa amin'izy ireo raha toa ka liana ianao, jereo ny mombamomba azy ireo, araho izy ireo amin'ny tambajotra ary misoratra anarana amin'ny fantson'izy ireo aza hijerena ireo tetik'asa ho avy rehetra.

Fampisehoana ny atiny, fanohanana ary hitsin-dàlana fitendry

Ny fampisehoana CodePen no tena mahalianaSatria amin'ny tsindry vitsivitsy monja dia azonao atao ny manamboatra ny fizotrany eo noho eo. Miaraka amin'ny tsipika html, css ary javascript tena misaraka tsara. Ho fanampin'ny ampahany hita maso, izay azonao anelanelana ambony sy midina hahitana mazava ny fivoaranao. Manampy amin'ny fanavahana tsara ny fiteny tsirairay avy. Zavatra iray izay mora ampiasaina ho an'ireo mpandahatra programa vaovao.

Fanohanana ny tranokalanao, mahatonga azy ho zaka kokoa rehefa te-hampiasa zavatra tsy tena fantatray ianao. Tsy midika izany fa tsara kokoa ho anao izy io, miankina amin'ny filàna ananantsika izany. Fa eny, mba hahafantaranao tsara kokoa ny tontolo iainana alohan'ny hanoloranao tena hametraka na inona na inona amin'ny solosaina fiaviana "tsy fantatra".

Raha iray amin'ireo efa zatra mampiasa ianao efa ho fitendry tanteraka rehefa miasa dia ho tsara ho anao ny CodePen. Mila fitaovana hafa Plugins afaka mampiasa hitsin-dàlana fitendry mba hamenoana ny tontolo iainana. Izany dia mahatonga ny asa somary mahazo aina kokoa (na dia mandaitra toy ny indray mandeha aza). CP. Izy io dia mitambatra ho rafitra mahazatra iray izay hahatonga anao hameno ireo tsipika kaody miverimberina, satria mety anaty lisitra iray izany. Manoratra ny fomba tianao hisehoan'ny lisitra ianao ary tsindrio Tab.

Ny kinova Pro dia mamela safidy maro hafa ihany koa amin'ny vidin'ny € 9,00 ho an'ny fonosana fototra ho 29,25 € ho an'ny fonosana "Super". Afaka manavao amin'ny fitaovana maromaro miaraka amin'izay ataontsika ao anaty iray. Modely fiaraha-miasa ihany koa, "mode d'une mpampianatra", sns. Soa tombony raha tianao eto.

JSBin

JSBin dia fitaovana ahafahantsika mahafeno fepetra mivantana. Hatramin'ny nandehananao tany amin'ny fonenany web dia ho vonona ny hanomboka ny famolavolana ny tetikasanao manaraka izy io, tsy misy hatak'andro. Ary na dia tsy dia manintona aza ny fijanonany voalohany dia mahazo aina izy.

Tsotra ny JSBin, miaraka amina rafitra fototra noforonina tao amin'ny html mba tsy handany fotoana, dia hidiranao eo anelanelan'ireo fiteny samihafa hamita ny asa. Voalohany misy HTML, avy eo CSS, Javascript ary farany ny asanao maso. Ary na dia toa sarotra kokoa aza izany dia hanana karazana hitsin-dàlana mitovy ianao nefa tsy mametraka na inona na inona. Avy amin'ny navigateur mivantana.

Na izany aza, hitako fa tsy mahazo aina kokoa ny mijery ny kaody tsara, raha vao miafina izy noho ny tsanganana manaraka. Satria, amin'ny solosaina findainao dia tsy maintsy milavo lefona ianao amin'ny trackpad ary tsy dia be ranoka izy io.

Tsy manana fizarana roa fotsiny izy io, maimaimpoana na karama. Ity dia somary lafo kokoa noho ny CodePen, na dia andoavanao isan-taona aza dia mahasoa kokoa izany, raha afaka mandoa € 120 ianao.

CSSDeck

CSSDeck
Ny tontolon'ny asa an'ny CSSDeck tsy mitovy amin'ilay hita etsy ambony. Nozaraina ho tsanganana roa fotsiny, kaody-maso, CSSDeck dia miasa miaraka amina laharana 3 izay mizara ny karazana fiteny samihafa. Miaraka amin'ny fampisehoana amin'ny endrika tambajotra sosialy sy tontolon'ny asa madio kokoa amin'ny loko maivana. Toa fitaovana tsotra io. Na dia indraindray aza tsy midika hoe ratsy izany.

Miaraka amin'ireo mpampiasa voasoratra anarana maherin'ny enina alina ary misy tetikasa dimam-polo sy roanjato mahery noforonina, tsy ho sarotra ny mitady sy mitady izay tadiavinao. Ny fiteny toy ny mahazatra, raha mety ho fanelingelenana ho an'ireo tsy mahay anglisy, fa amin'ity tambajotra sosialy Tena zava-dehibe ny sary, noho izany dia heveriko fa tsy fanamby lehibe izany.

Plunkr

Plunkr io no fitaovana tsy dia manintona indrindra hitako hatreto. Ny fampisehoana dia atambatra amin'ny hafatra sy ny tsy fisian'ny sary. Ny famoahana atiny dia miadana ary tsy dia ilaina loatra raha vao jerena. Ho fanampin'izay, ny fandefasana arakaraka ny daty dia mahatonga ny fandaharam-potoana rehetra, na toy inona tsotra aza, dia mety amin'ny toerana voalohany. Raha te hahita zavatra mahaliana kokoa ianao dia tokony handeha amin'ny kiheba izay milaza hoe: «Most Viewed«. Izany hoe raha mbola tsy nandika izany tamin'ny Google ianao taloha.

Lazao ihany koa fa araka ny tranonkala dia ao amin'ny kinova 1.0.0 izy ireo. Ka io dia manazava kely momba ny famolavolana, ny fampisehoana ary ny lesoka mety ho hitanao rehefa mizaha tranonkala.

Amin'ny maha tombony anao, raha lany hevitra ianao, tsy mila miala na manokatra kiheba hafa ianao ao Plunkr, satria avy eo amin'ny sisiny ankavanana dia afaka mandeha miaraka amin'ireo tetikasa hafa ianao ary hijery azy ireo eo noho eo. Amin'izay dia ho mora aminao ny manangona hevitra haingana ary mampihatra azy ireo amin'ny tetikasanao amin'ny fotoana iray.

Dabblet

Dabblet fitaovana tsotra io, miditra ianao ary mamorona. Na dia afaka misoratra anarana sy manana ny anaranao amin'ny alàlan'ny GitHub aza ianao dia tsy zavatra misongadina be eo amin'ny tranonkala izany. Miaraka amina ambadika gradient mavo sy mena, ao amin'ny faritra hita maso sy fotsy ao amin'ilay faritra kaody (toy ny mahazatra), aseho ny tetikasa Dabblet, na dia azonao atao aza ny manova azy amin'ny tabilao CSS. Ho ahy dia tsara kokoa ny manafoana azy io, satria kely fotsiny izany grady izany rehetra izany fiainana a

Rehefa manitsy ianao dia azonao atao ny manefy ireo takelaka hitanao mora foana. Na dia te hifamadika amin'ny tsanganana na andalana aza ianao hijerena aina dia miankina amin'ny olona manitsy. Ny fanovana ny haben'ny endri-tsoratra, ny fitehirizana tsy fantatra anarana raha tsy misoratra anarana na manamarina ny kaody HTML dia mety kokoa omen'i Dabblet raha vao jerena. Na dia tsy safidy voalohany hofidiko aza izany, dia mety hikajiana amin'ny kinova ho avy raha havaozina izy ireo.

Ny iray amin'ireo zavatra izay tiako indrindra ny kely indrindra, fa mety ho tian'ireo mpandahatra programa lehibe dia izany tsy manan-tsafidy ianao handrakitra marika ary asaivo manoratra ny tenany. Izany hoe, asio HTML ary kitiho ny kiheba ary soraty ho azy ny "html" sy "/ html". Zavatra iray amin'ny fampiharana hafa raha vita.

LiveWeave

liveweave
LiveWeave Tena mitovy amin'ny an'ny hafa izy io, tsy manana na inona na inona izay tsy azon'ny hafa omena raha ilaina. Ny zavatra asongadinay momba ity tetikasa ity dia ny endriny, loko mainty mitovy amin'ny CodePen nefa misy fizarana toradroa. Afaka manova ny habeny manandrana. Misy ihany koa ny maody mazava sy ny «ivelan'ny tsipika« izay ny kaody izay amboarinao dia tsy ho hita taratra amin'ny sary, mandra-panaovanao azy. Tsy endri-javatra hitanao fa tena ilaina izy io, amin'ny maha-mpamorona anao, zava-dehibe ny fahitana foana ny zavatra amboarinao amin'ny fotoana tena izy, fa misy olona mahita anao mampiasa azo antoka. Ary na dia, toy ny mahazatra aza, afaka misoratra anarana ianao, ny mpampiasa dia tsy manana andraikitra lehibe. Satria, na dia tsy misoratra anarana aza ianao dia afaka mamonjy ny tetikasanao.

Lahatsoratra anio

Fitaovana ity tsy mitovy amin'ny hitanao hatreto tamin'ny fanadihadiana. Ny Sublime Text dia tsy toy ny loharano an-tranonkala fa ho fampiharana. Amin'ny lafiny iray, azo antoka fa ilaina kokoa ny manana azy amin'ny birao. Indrindra fa noho ny mety fianjerana amin'ny Internet na fanala noho ny fihoaram-pefy sy ny fatiantoka asa. Etsy ankilany, tsy fitaovana hita maso toy ny teo aloha izy io. Ho fanampin'ny tsy fananana fahafahan'ny vondrom-piarahamonina hizara tetikasa.

Eto dia avy am-boalohany ny zavatra rehetra. Tsy maintsy mamorona kiheba ianao hametrahana ireo tsipika kaody ary hanonitra anarana azy ireo hahafantarana hoe iza izany. Raha HTML ny voalohany, ny CSS faharoa .. na ny mifamadika amin'izany. Izy io koa dia tsy manana hitsin-dàlana hahitana izay ho izy manual tanteraka, afa-tsy ireo teny nalaina.

famaranana

Ny programa rehetra dia mitovy amin'ny fikitikitihana manokana an'ny orinasa tsirairay izay mitarika amin'ny fananana tombony sy maharatsy azy ireo. Ny tsirairay avy dia hisafidy izay mety indrindra amin'izy ireo, ny tolo-kevitro dia ny hampiasa CodePen na CSSDeck ho an'ny tontolo iainana sy ny tambajotra sosialy tantaniny. Saingy, raha tianao ny iray hafa, mamela hevitra ary hazavao ny antony, azo antoka fa mahasoa izy ireo.


Ny atin'ny lahatsoratra dia manaraka ny fitsipiky ny etika fanonta. Raha hitatitra tsindry diso eto.

Aoka ho voalohany ny fanehoan-kevitra

Avelao ny hevitrao

Ny adiresy email dia tsy ho namoaka. Mitaky saha dia marika amin'ny *

*

*

  1. Tompon'andraikitra amin'ny data: Miguel Ángel Gatón
  2. Tanjon'ny angona: Control SPAM, fitantanana hevitra.
  3. Legitimation: Ny fanekenao
  4. Fifandraisana momba ny angona: Tsy hampitaina amin'ny antoko fahatelo ny angona raha tsy amin'ny adidy ara-dalàna.
  5. Fitehirizana angona: Database nomen'ny Occentus Networks (EU)
  6. Zo: Amin'ny fotoana rehetra, azonao atao ny mametra, mamerina ary mamafa ny mombamomba anao.