Gabay para sa layout ng nilalaman

Kapag nais naming mag-mount ng isang nilalaman sa web ang isa sa mga malaking problema na nahanap namin na ang mga panukalang natanggap ko ay hindi napakahusay na naisip na maging kasiya-siyang isinama sa web. Karaniwan ang problema ay na kung walang isang sapat na istraktura ang disenyo at layout ay hindi karaniwang mukhang napakahusay, na nagbibigay ng hindi kasiya-siyang resulta.

Iyon ang dahilan kung bakit ako ay magbibigay ng ilang mga pangunahing paliwanag tungkol sa kung paano dapat isaalang-alang ang isang layout ng mga nilalaman sa mga kondisyon upang gawing simple ang gawaing at ang resulta ay pinakamainam.

Ang layunin ng patnubay na ito ay ang sinumang walang kaalaman sa pagprograma o pag-unlad ng web ay maaaring magbigay sa akin ng isang kalidad na layout at na hindi ko kailangang gumastos ng masyadong maraming oras na sinusubukang kunin ang ideya sa pamamagitan ng maraming mga pag-uusap hanggang sa maabot ang isang konklusyon.

Hakbang 1: Ang template

Upang magkaroon ng template kung saan maaari nating "iguhit" ang ating proposal, ang gagawin natin ay kumuha ng A4 sheet ng papel at itiklop natin ito ng ONE THIRD sa haba.

Hakbang 2: Ang mga bloke ng nilalaman

Isipin natin na mayroon kaming ilang mga uri ng nilalaman: video, imahe, teksto. Ang bawat nilalaman ay isang hugis-parihaba o parisukat na bloke. Kailangan nating magkasya ang mga bloke mula sa itaas hanggang sa ibaba ng template na napili namin. Ilalarawan namin ang tatlong uri ng nilalaman.

Block ng video

Ipagpalagay namin na ang video ay sa pangkalahatan ay isang video sa YouTube, kinatawan namin ito sa template tulad ng sumusunod:

I-block ang larawan

Ito ay depende sa kung ang imahe ay tanawin o larawan, tulad ng sasang-ayon kami.

I-block ang Text

Ang parehong bilang ng bloke ng imahe, depende sa kung paano namin nais ang teksto ay maglalagay kami ng isang bloke o iba pa. Kinatawan namin ito ng mga kahanay na linya.

Ang mga bloke ng teksto ay maaaring maging mga bloke ng teksto na may kasamang mga talata at kahit na listahan ng mga tekstong elemento

Maglalagay ako ng dalawang halimbawa: isang bloke ng teksto sa tabi ng isang imahe ng landscape, at isa pa sa tabi ng isang larawan ng larawan:

Bloke ng pamagat

Ang mga titulo ay nasa magkahiwalay na mga bloke ay mga pinahabang bloke na sa pangkalahatan ay sumasakop sa buong linya.

Bloke ng pindutan

Kung nais naming maglagay ng isang pindutan para i-click at dalhin ang mga ito sa ibang bahagi ng web o isang window lamang na may ilang impormasyon (o isang form)

Iba pang mga bloke

Ang ideya ay magkatulad. Kung naiintindihan namin kung paano gumagana ang mga bloke, sa palagay ko malinaw naming mailalagay ang isa pang uri ng bloke na, katulad ng mga nauna, ay magkasya sa parisukat o hugis-parihaba. Halimbawa, kung nais naming maglagay ng isang form na isinama sa nilalaman. Bagaman ito ay karaniwang hindi bababa sa karaniwan, mas mahusay na magtanong bago gamitin ang mga bagong bloke na hindi sa mga uri na nabanggit sa itaas. Susubukan kong i-update ang listahang ito dahil lumabas ang mga bagong ideya sa block na maaaring maging interesado sa lahat.

Sa wakas, narito ang isang halimbawa ng isang template na may lahat ng mga uri ng mga bloke na nabanggit sa itaas:

Pagpapalawak ng mga bloke

Kung kailangan namin ng mas maraming espasyo, kailangan lang nating magdagdag ng higit pang mga pahina sa disenyo ng block sa ibaba. Hindi kinakailangang punan ang lahat, ngunit mahalaga na huwag mag-iwan ng mga walang laman na gaps mula sa itaas hanggang sa ibaba sa pagitan ng gitna ng bawat bloke. Sa ganitong paraan maaari naming mapalawak ang pahina:

Hakbang 3: Paglikha ng nilalaman

Ngayon na mayroon kaming layout ng nilalaman sa pamamagitan ng mga bloke at uri ng mga bloke kinakailangan upang lumikha ng nilalaman na pupunta sa mga bloke na iyon. Ang hakbang na 3 ay maaaring palitan ng hakbang na 2. Sa madaling salita, maaari naming lumikha ng nilalaman bago, at pagkatapos ay i-layout ang pag-alam ng dami ng nilalaman na nais naming isama. Ito ay hindi natatanging gawin ito sa isang paraan o sa iba pa, ngunit dapat nating malaman na ang nilalaman ay dapat magkasya sa loob ng aming layout nang eksakto

Susundin natin ang nakaraang halimbawa. Sa imahe ng 4 maaari nating makita ang mga sumusunod na bloke:

• Mga Bloke ng Pamagat ng 2
• 4 Text Blocks
• 1 Video Block
• 2 Bloke ng Imahe
• 1 Button Block
• total: 10 Blocks

Samakatuwid kailangan nating ayusin ang aming nilalaman upang ganap na magkasya ito sa mga bloke na hindi umaalis at na ang laki ng font ay eksaktong pareho sa lahat ng mga ito. Para dun posible sulit lumikha muna ng nilalaman at pagkatapos ay i-block ito. Malaki na ang nakasalalay sa tao.

Hakbang 4: Pagsukat ng nilalaman gamit ang mga bloke

Ipagpalagay natin na mayroon na kaming disenyo na iginuhit sa papel at lahat ng mga bloke ng nilalaman na nilikha. Ngayon ang huling hakbang ay pagsamahin ito. Para sa mga ito gagamitin namin ang ilang mga tool upang pagsamahin ang lahat at ipadala ito sa taga-disenyo ng web.

Mga Bloke ng Video

Maaaring maipasa ang mga video sa dalawang paraan:

1. Sa format na MP4 video sa pamamagitan ng isang tool tulad ng WeTransfer.
2. PREFERRED OPTION: Pag-upload ng mga ito sa channel ng YouTube Marso at pagpasa sa link sa YouTube sa video.

Kung sakaling may isang video lamang sa layout ay walang magiging problema. Ngunit kung maraming mga video ay kakailanganin nating iugnay ang mga ito sa layout na nagawa namin sa papel.

Halimbawa. Isipin na mayroong tatlong mga video. Sa layout ay iguguhit namin ang isang 1 number sa unang video, isang numero ng 2 sa pangalawang video at isang 3 number sa ikatlong video. At pagkatapos kapag ipinapadala ang lahat ng babasahin maglagay kami ng isang bagay tulad nito:

• Video 1: Video na tumatalakay sa mga parirala ng walang karahasan na may pamagat na: "Ang pinakamahalagang parirala ng walang karahasan"
• Video 2: Video na tumatalakay sa mga kulay ng bandila na may pamagat na: «The flag of nonviolence»
• Video 3: Video na tumatalakay sa grupong pupunta sa Argentina na may pamagat na: “The base team of Argentina”

Madali itong malaman kung aling video ang tumutugma sa bawat seksyon.

Mga Bloke ng Imahe

Sa kasong ito, ang lahat ng mga imahe ay dapat na mai-upload sa platform ng IMGUR: https://imgur.com/upload

At pagkatapos ay ipasa ang mga link sa mga larawang iyon. Ang mainam ay ilagay ang mga larawan na pareho sa mga video, na minarkahan ng 1, a 2, a 3 at iba pa. Halimbawa, isipin natin na mayroon tayong 4 na larawan sa mabilisang paglipad sa South Africa. Ang apat ay may parehong pangalan: "sudafrica.jpg". Buweno, naglalagay kami ng sunud-sunod na mga pangalan sa punto kung saan sila ay nasa layout at pinipinta namin ang numero sa papel kung saan sila tumutugma. Halimbawa:

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

Button, Pamagat at Teknolohiya Blocks

Sa wakas, ang mga bloke na ito ay dapat isulat sa isang Word Document, o sa isang Google Docs na mas mabuti.

Ang format ay napaka-simple: Sa dokumento ng Salita na inilalagay namin ang uri ng I-block (Pamagat, Button, o Teksto) na sinusundan ng numero kung saan ito ay tumutugma sa layout.

Ejemplos:

• Pamagat 1:….
• Pamagat 2: ...
• Teksto 1:…
• Teksto 2:…
• Button 1:…
• Button 2:…

Pagkatapos ay naglalagay ako ng isang halimbawa ng dokumento na may ganap na random na teksto upang makita kung paano ito ay nakaayos, na sumusunod sa halimbawa ng imahe ng 4:

Ito ay kung paano dapat tumingin ang layout sa sandaling inilagay namin ang mga numero na tumutugma sa bawat seksyon:

4 hakbang: Ipadala ang lahat

Kapag nagawa na natin ang lahat, kakailanganin mong ipadala lamang ito sa taong namamahala sa layout

Dadalhin lang ito

1. Mga Sketch sa papel na may layout
2. Ang mga nilalaman
   • Mga link sa video sa YouTube o WeTransfer
   • Mga link ng IMGUR ng mga imahe
   • Ang link sa dokumento sa Google Docs o ang Word file

Notaryo Mahalagang Pangwakas

Ang mainam ay sa wakas ay isasama ang isang natitirang imahe na siyang sasamahan ng pamagat ng 1 header ng pahina. Iyon ang dahilan kung bakit ang Titulo 1 ay dapat palaging lumitaw sa simula.

Ang imahe ng header ay dapat magkaroon ng isang laki ng 960 x 540 pixels. Ang imaheng ito ay maaaring maipadala tulad ng natitirang mga imahe, sa pamamagitan ng IMGUR

Huling resulta

At sa wakas sa lahat ng impormasyong ito, mai-set up ang pahina. Sumusunod at matapos sa halimbawang ito, ang pahina na may pangwakas na resulta ng pagsunod sa lahat ng mga parameter na aming nakataas dati ay ganito:

Pangwakas na pahina