Giya alang sa layout sa sulod

Kung gusto namon nga ma-mount ang usa ka sulud sa web usa sa mga dagkong problema nga among nahibal-an nga ang mga panukiduki nga akong nadawat dili gyud gihunahuna nga malampuson nga isagol sa web. Kasagaran ang problema mao nga kung wala’y igong istruktura ang laraw ug layout dili kasagaran tan-awon nga maayo kaayo, nga naghatag usa ka dili makatagbaw nga sangputanan.

Mao nga maghatag ako pipila ka mga sukaranang mga pagpasabut kung giunsa ang paghunahuna sa usa ka layout sa sulud sa mga kondisyon aron mapagaan ang trabaho hangtod sa labing taas ug nga ang sangputanan ang kamalaumon.

Ang katuyoan sa kini nga giya mao nga bisan kinsa nga walay kahibalo sa pagprograma o pagpalambo sa web makahatag sa akon nga kalidad nga layout ug nga dili na kinahanglan nga mogahin ako daghang oras sa pagsulay sa pagkuha sa ideya pinaagi sa daghang mga pag-istoryahanay hangtod nga matapos ang usa ka konklusyon.

Lakang 1: Ang template

Aron adunay usa ka template diin mahimo natong "madrowing" ang atong proposal, ang atong buhaton mao ang pagkuha sa usa ka A4 nga papel ug atong pil-on kini sa ONE THIRD ang gitas-on.

Lakang 2: Ang sulud sa sulud

Hunahunaon nga kita adunay daghang mga matang sa sulud: video, imahe, teksto. Ang matag sulud usa ka rectangular o square block. Kinahanglan namon nga ipahiangay ang mga bloke gikan sa taas hangtod sa ilawom sa template nga among gusto. Atong ihulagway ang tulo nga mga sulud.

Video block

Kami maghunahuna nga ang video sa kinatibuk-an mahimong usa ka video sa YouTube, girepresentar namon kini sa template sama sa mosunod:

Image block

Nagdepende kini kung ang imahe ba tan-awon o hulagway, ingon nga kita mouyon.

Pag-block sa Text

Pareho sa us aka block image, depende kung giunsa naton gusto ang teksto magbutang kita usa ka bloke o uban pa. Girepresentahan namon kini uban ang managsama nga linya.

Ang mga block block sa teksto mahimong mga bloke sa teksto nga adunay mga parapo ug bisan mga lista sa sulud sa teksto

Igabutang ko ang duha nga mga pananglitan: usa ka bloke sa teksto nga sunod sa usa ka imahe sa talan-awon, ug lain pa sunod sa usa ka hulagway nga hulagway:

Pamaagi sa ulohan

Ang mga titulo sa lainlaing mga bloke mao ang mga pinahigpit nga mga bloke nga sa kasagaran nagsakop sa tibuuk nga linya.

Butang block

Kung gusto namon magbutang usa ka butones alang sa mga tawo nga i-klik ug dad-on kini sa laing bahin sa web o usa ka bintana nga adunay pipila nga kasayuran (o usa ka porma) makita

Uban pang mga bloke

Ang ideya parehas. Kung nahibal-an naton kung giunsa ang paglihok sa mga bloke, gihunahuna ko nga mahimo namon nga klaro nga ibutang ang lain nga klase sa bloke nga, susama sa nangagi, naa sa square o rectangular. Pananglitan, kung gusto namon magbutang usa ka porma nga gilakip sa sulud. Bisan kung kini kasagaran ang labing dili kasagaran, mas maayo nga mangutana sa wala pa gamiton ang bag-ong mga bloke nga dili mga lahi nga gihisgutan sa ibabaw. Akong sulayan nga ma-update kini nga lista sa paggawas sa bag-ong mga ideya sa block nga mahimo’g makapaikag sa tanan.

Sa katapusan, aniay usa ka pananglitan sa usa ka template nga adunay tanan nga mga matang sa mga bloke nga gihisgutan sa ibabaw:

Ang pagpalapad sa mga bloke

Kung kinahanglan namon ang daghang wanang, kinahanglan namon nga dugangan pa ang daghang mga panid sa disenyo sa block sa ilawom. Dili kinahanglan nga pun-on ang tanan, apan hinungdanon nga dili ibilin ang mga walay sulod nga gaps gikan sa taas hangtod sa taliwala sa tunga sa tunga sa matag bloke. Niining paagiha mapalapad naton ang panid:

Lakang 3: Paghimo sa sulud

Karon nga kami adunay layout sa sulud pinaagi sa mga bloke ug mga tipo nga mga bloke kinahanglan ang paghimo sa sulud nga moadto sa kana nga mga bloke. Ang lakang 3 mabalhin sa lakang 2. Sa ato pa, mahimo naton ang paghimo sa sulud sa wala pa, ug dayon i-layout ang pagkahibalo sa gidaghanon sa sulud nga gusto naton iapil. Kini dili klaro nga buhaton kini sa usa ka paagi o sa lain, apan kinahanglan nga kita nahibalo nga ang sulud kinahanglan nga ipahiangay sa sulud sa atong layout

Mosunod kita sa miaging ehemplo. Sa imahen nga 4 makita naton ang mga mosunud:

• 2 Pamagat Bloke
• Ang 4 Text Blocks
• Ang 1 Video Block
• Ang 2 Image Blocks
• Ang 1 Button Block
• total: Mga Bloke sa 10

Tungod niini kinahanglan naton nga ayohon ang among sulud aron kini hingpit nga nahiangay sa kini nga mga bloke nga dili mobiya ug nga ang gidak-on sa font parehas nga parehas sa tanan niini. Alang niana posible balor kini paghimo una sa sulud ug pagkahuman pag-block. Nagsalig na kini karon sa tawo.

Lakang 4: Pagsulud sa sulud gamit ang mga bloke

Hunahunaon nga kita adunay laraw nga gilaraw sa papel ug tanan nga mga sulud sa sulud nga gihimo. Karon ang katapusan nga lakang mao ang paghiusa niini. Alang niini mogamit kami daghang mga himan aron makombinar ang tanan ug ipadala kini sa tigdisenyo sa web.

Mga Video Bloke

Ang mga video mahimong maipasa sa duha ka paagi:

1. Sa format nga MP4 video pinaagi sa usa ka himan sama WeTransfer.
2. GIPANGHUMANG OPTION: Pag-upload sa kini sa channel sa YouTube Marso ug pagpasa sa link sa YouTube sa video.

Sa kaso adunay usa ra ka video sa layout nga wala’y problema. Apan kung adunay daghang mga video kinahanglan naton nga iupod kini sa pila ka paagi sa layout nga atong nahimo sa papel.

Pananglitan. Hunahunaa nga adunay tulo nga mga video. Sa layout ibutang namon ang usa ka numero sa 1 sa una nga video, usa ka numero sa 2 sa ikaduha nga video ug usa ka numero sa 3 sa ikatulo nga video. Ug unya kung ipadala ang tanan nga dokumentasyon ibutang namon ang usa ka butang nga sama niini:

• Video 1: Video nga naghisgot sa mga prase sa nonviolence nga adunay titulo: "The most important phrases of nonviolence"
• Video 2: Video nga naghisgot sa mga kolor sa bandila nga adunay titulo: "Ang bandila sa walay pagpanlupig"
• Video 3: Video nga naghisgot sa grupo nga magmartsa sa Argentina nga adunay titulo: "Ang base nga team sa Argentina"

Mas dali kining mahibal-an kung unsang video ang nahiangay sa matag seksyon.

Image Blocks

Sa kini nga kaso, ang tanan nga mga imahe kinahanglan i-upload sa IMGUR platform: https://imgur.com/upload

Ug dayon ipasa ang mga link sa mga imahe. Ang sulundon mao ang pagbutang sa mga imahe nga parehas sa mga video, gimarkahan og 1, 2, 3 ug uban pa. Pananglitan, atong hunahunaon nga kita adunay 4 ka mga larawan sa langaw sa South Africa. Ang upat adunay parehas nga ngalan: "sudafrica.jpg". Aw, among gibutang ang sunodsunod nga mga ngalan sa punto diin sila anaa sa layout ug among gipintalan ang numero sa papel diin sila katumbas. Pananglitan:

• sudafrica-1.jpg
• sudafrica-2.jpg
• sudafrica-3.jpg
• sudafrica-4.jpg

Button, Pamagat ug Teknolohiya nga Blocks

Sa katapusan, kini nga mga bloke kinahanglan isulat sa usa ka Word Document, o sa usa ka Google Docs labing maayo.

Ang format yano ra kaayo: Sa dokumento sa Pulong gibutang namon ang tipo sa Bloke (Pamagat, Button, o Text) nga gisundan sa numero diin kini katumbas sa layout.

Mga pananglitan:

• Ulohan 1:….
• Ulohan 2:…
• Teksto 1:…
• Teksto 2:…
• Butang 1:…
• Butang 2:…

Unya nagbutang ako usa ka ehemplo nga dokumento nga adunay bug-os nga random nga mga teksto aron makita kung giunsa kini ma-istruktura, pagsunod sa panig-ingnan sa imahe sa 4:

Ingon niini ang pagtan-aw sa layout sa higayon nga gibutang namon ang mga numero nga katumbas sa matag seksyon:

4 lakang: Ipadala ang tanan

Kung nahuman na naton ang tanan, kinahanglan nga ipadala ra kini sa tawo nga magdumala sa layout

Kinahanglan ra kini

1. Mga Sketch sa papel nga adunay layout
2. Ang sulud
   • Ang mga link sa video sa YouTube o WeTransfer
   • Mga link sa IMGUR sa mga imahe
   • Ang link sa dokumento sa Google Docs o sa Word file

Pasiuna nga Hinungdan nga Katapusan

Ang sulundon nga sa katapusan maglakip sa usa ka maayo nga imahe nga mao ang usa nga nag-uban sa ulohan nga 1 header sa panid. Mao kana ang hinungdan nga ang Titulo 1 kinahanglan kanunay nga magpakita sa sinugdanan.

Ang imahe sa header kinahanglan adunay usa ka gidak-on nga 960 x 540 mga pixel. Ang kini nga imahen mahimong ipadala sama sa nahabilin sa mga imahe, pinaagi sa IMGUR

Katapusan nga resulta

Ug sa katapusan sa tanan nga kini nga kasayuran, ang panid ma-set up. Pagkahuman ug pagtapos sa kini nga panig-ingnan, ang panid nga adunay katapusan nga sangputanan sa pagsunod sa tanan nga mga parameter nga gipataas namon kaniadto mao kini:

Katapusan nga panid