Infobox: 2 Coloane — Format, Reguli și Exemple

Un infobox cu două coloane împarte o idee în exact două puncte paralele, astfel încât cititorul să poată înțelege relația dintr-o privire. Folosește-l atunci când perechea este mai utilă una lângă alta decât îngropată într-un paragraf: două responsabilități, două etape, două perspective sau două părți complementare ale unui singur răspuns.

Exemplul redat mai sus este un singur infobox, un titlu comun și exact două elemente. Ambele elemente răspund la același tip de întrebare cu o profunzime comparabilă. Elementul nu susține că cele două nevoi sunt opuse; arată că un brief util trebuie să țină cont de ambele.

De ce contează acest element

Proza densă îi obligă pe cititori să reconstruiască relațiile. Într-o frază precum „Un brief de conținut trebuie să servească cititorul prin rezolvarea unei sarcini și să servească afacerea prin susținerea unei acțiuni calificate”, cele două responsabilități există, dar limitele lor sunt slabe. Un infobox cu două coloane face subiectul comun vizibil o singură dată și oferă fiecărei responsabilități o regiune denumită. Cititorii pot scana ambele titluri, pot alege de unde să înceapă și pot compara cantitatea și tipul de detalii fără a reciti o frază compusă.

Beneficiul psihologic provine din grupare: gruparea informațiilor conexe în unități delimitate. Titlul comun îi spune cititorului ce rămâne constant, în timp ce titlurile elementelor arată ce se schimbă. Această ierarhie este deosebit de utilă atunci când niciun punct nu ar trebui să domine. Proza obișnuită oferă în mod natural mai multă proeminență primului punct și îl poate face pe cel de-al doilea să pară o idee adăugată ulterior; coloanele echivalente semnalează o pondere editorială egală.

Extractibilitatea mecanică este capacitatea software-ului de a izola o unitate de conținut păstrându-i sensul. Un infobox tipizat expune un subiect părinte și două elemente copil explicite. Un sistem de regăsire poate păstra titlul comun, titlurile elementelor, textul corpului și ordinea sursei, în loc să ghicească unde se termină o propoziție și unde începe alta. Fiecare element trebuie totuși să fie autonom: „Cerința de afaceri este dovada care susține o acțiune calificată” supraviețuiește extracției, în timp ce „Cealaltă parte” nu.

Structura nu salvează gândirea slabă. Dacă sursa conține un punct dezvoltat și o frază adăugată pentru simetrie, redarea face dezechilibrul și mai evident. Aplică regulile de redactare a elementelor : scrie mai întâi raționamentul complet, apoi alege acest element doar atunci când ideea finalizată are într-adevăr două părți paralele. Regulile specifice elementului de pe această pagină au prioritate acolo unde definesc maparea exactă a elementelor și limitele acestuia.

Când să îl folosești

Folosește un infobox cu două coloane atunci când toate cele patru condiții sunt îndeplinite:

1. Există o idee părinte clară care poate intitula întregul chenar.
2. Ideea părinte se împarte în mod natural în exact două elemente.
3. Ambele elemente îndeplinesc același tip de sarcină informațională, cum ar fi explicarea unei responsabilități, a unei etape, a unei perspective a publicului sau a unei dimensiuni.
4. Fiecare element poate fi înțeles în aproximativ 30–90 de cuvinte, fără o structură imbricată.

Exemple bune includ „Înainte de lansare / După lansare”, „Semnal al cititorului / Semnal al afacerii”, „Ce se schimbă / Ce rămâne la fel” și „Responsabilitatea proprietarului / Responsabilitatea revizorului”. Etichetele trebuie să dezvăluie o relație reală. Dacă cititorul nu poate completa fraza „Acestea aparțin împreună pentru că…”, gruparea este probabil decorativă.

Cazurile apropiate contează deoarece un aspect cu două coloane poate face aproape orice pereche să pară intenționată. Nu îl folosi pentru o singură idee împărțită la o întrerupere arbitrară de frază. Nu transforma o listă de patru elemente în două coloane lungi doar pentru a economisi spațiu vertical; ordinea sursei și scanarea devin ambigue. Nu îl folosi pentru o comparație detaliată de produs cu criterii multiple, deoarece un tabel comparativ oferă fiecărui criteriu un rând explicit. Nu îl folosi pentru argumente pro și contra atunci când numărul de puncte diferă sau când cititorii trebuie să cântărească mai multe compromisuri. Nu asocia o definiție cu un call to action promoțional: aceste blocuri îndeplinesc funcții diferite și nu merită un tratament egal.

Cel mai puternic semn de avertizare este o etichetă precum „Altele”, „Mai multe” sau „Informații suplimentare”. Aceste etichete dezvăluie că împărțirea urmează spațiul disponibil, nu sensul. Readu conținutul în proză sau găsește distincția reală înainte de a utiliza elementul.

Unde să îl plasezi

Plasează infoboxul imediat după paragraful care introduce ideea comună. Cititorul are nevoie de o frază de context înainte de a întâlni împărțirea, dar nu ar trebui să traverseze dovezi nerelevante sau o altă subsecțiune pentru a ajunge la el. După chenar, continuă cu analize, exemple sau instrucțiuni care se aplică ambelor elemente.

Se poate afla direct sub un H2 atunci când H2-ul însuși furnizează ideea părinte, iar infoboxul are propriul său titlu mai specific. Poate urma, de asemenea, unei definiții scurte atunci când cele două elemente explică dimensiuni ale acelei definiții. Nu trebuie să apară între o afirmație și citarea sa, între un pas și condiția necesară pentru a finaliza acel pas, sau în interiorul unui element de listă ordonată. Aceste poziții întrerup relații care ar trebui să rămână contigue.

Nu îl plasa lângă un alt infobox cu două coloane, un tabel comparativ, un set de fileuri sau un bloc de argumente pro și contra. Structurile paralele adiacente îl obligă pe cititor să decidă ce relație vizuală contează și pot crea patru coloane aparente pe ecrane late. Inserează proză explicativă între structuri distincte sau combină materialul într-un singur tabel sau secțiune mai potrivită. Evită plasarea imediat înainte sau după un call to action cu două coloane; geometria identică poate face ca explicația editorială să pară promoțională.

Nu folosi mai mult de un infobox cu două coloane într-o secțiune scurtă. Repetarea transformă un contrast util în mobilier de pagină. Când un articol lung conține mai multe perechi autentice, separă-le sub titluri diferite și confirmă că fiecare pereche are o idee părinte distinctă.

Anatomie

Anatomia conține o regiune părinte și două regiuni copil repetate. Captura de ecran ar trebui să eticheteze părțile semantice, nu paddingul sau tokenurile de culoare, astfel încât specificația să rămână utilă dacă sistemul vizual se schimbă.

1. Limită exterioară: Grupează titlul părinte și ambele elemente ca o singură unitate editorială.
2. Titlu comun: Denumește ideea pe care o explică ambele elemente. Nu este un al treilea punct.
3. Titlul și corpul primului element: Enunță primul membru al perechii într-un limbaj complet și extractibil.
4. Titlul și corpul celui de-al doilea element: Răspunde la același tip de întrebare cu o profunzime echivalentă.
5. Relația de layout: Folosește coloane de lățime egală atunci când spațiul permite și îngrămădește elementul unu înaintea elementului doi pe ecrane înguste.

Bordurile, fundalul, spațierea, raza, scara tipografică și punctul de întrerupere aparțin sistemului de randare. Autorii controlează ierarhia și ordinea conținutului, nu tokenurile vizuale.

Exemple de design

Există un singur element semantic cu patru variante suportate de conținut și dimensiune a ferestrei. Variantele modifică modul de gestionare a titlului sau prezentarea responsive; nu modifică niciodată cerința de exact două elemente.

Varianta implicită cu titlu: Preferată pentru utilizare independentă. Un titlu comun denumește ideea părinte, iar ambele elemente copil au titluri concise.

Varianta cu titlu contextual: H2-ul imediat precedent poate acționa ca titlu comun. Acest lucru este permis doar atunci când niciun paragraf sau componentă nu separă H2-ul de chenar, iar infoboxul are un nume accesibil derivat din acea rubrică.

Varianta compactă: Folosește-o pentru două definiții sau responsabilități scurte. Fiecare corp formează în continuare o frază completă; aspectul nu devine o pereche de sloganuri.

Varianta pentru ecran îngust: Elementele se îngrămădesc vertical. Ordinea rămâne semnificativă fără referințe la „stânga”, „dreapta”, „deasupra” sau „alături”.

Icoanele nu sunt o variantă de conținut. Dacă sistemul de design adaugă icoane decorative, acestea folosesc text alternativ gol și nu înlocuiesc titlurile elementelor. Dacă fiecare element are nevoie de o imagine informativă, folosește un element orientat pe imagine în loc să extinzi acest contract de infobox.

Parametri

Contractul de parametri împiedică elementul să devină un grid generic. Valorile care descriu sensul aparțin conținutului creat de autor; layoutul responsive rămâne în sistemul de randare.

Titlul este obligatoriu, cu excepția cazului în care rubrica de pagină imediat precedentă furnizează același subiect părinte și poate eticheta containerul programatic. Corpurile elementelor permit accentuarea, cod inline și un link util. Nu permit rubrici imbricate, tabele, media, acordeoane, formulare, calluri la acțiune sau un alt infobox.

Sintaxă și exemple de cod

Toate cele trei notații păstrează același titlu părinte, două elemente ordonate, titlurile elementelor și corpurile elementelor. Directiva Markdown portabilă este sursa canonică. Formele Hugo și WordPress sunt contracte de adaptare; sistemele lor de randare trebuie să producă HTML semantic echivalent și ordine responsive.

Directivă Markdown portabilă

:::infobox-2-columns
## Un brief de conținut util răspunde la două întrebări

::item
### De ce are nevoie cititorul?

Precizează întrebarea, decizia sau sarcina pe care pagina trebuie să o rezolve, inclusiv contextul care schimbă răspunsul.
::

::item
### De ce are nevoie afacerea?

Precizează acțiunea calificată pe care pagina trebuie să o susțină, împreună cu dovezile necesare pentru a câștiga acea acțiune.
::
:::

Prima rubrică părinte se mapază la title. Fiecare ::item își mapează prima rubrică la item.title, iar corpul rămas la item.content. Această mapare exactă cu două elemente prevalează asupra permisiunii generale de elemente repetabile din regulile de bază.

Shortcode Hugo

{{< infobox-2-columns title="Un brief de conținut util răspunde la două întrebări" >}}
  {{< infobox-item title="De ce are nevoie cititorul?" >}}
  Precizează întrebarea, decizia sau sarcina pe care pagina trebuie să o rezolve, inclusiv contextul care schimbă răspunsul.
  {{< /infobox-item >}}
  {{< infobox-item title="De ce are nevoie afacerea?" >}}
  Precizează acțiunea calificată pe care pagina trebuie să o susțină, împreună cu dovezile necesare pentru a câștiga acea acțiune.
  {{< /infobox-item >}}
{{< /infobox-2-columns >}}

Adaptorul folosește doar parametri numiți. Trebuie să respingă un al treilea element în loc să îl înfășoare în tăcere și trebuie să păstreze ordinea elementelor creată de autor atunci când layoutul se îngrămădește.

Bloc WordPress

<!-- wp:amicited/infobox-2-columns {"title":"Un brief de conținut util răspunde la două întrebări"} -->
  <!-- wp:amicited/infobox-item {"title":"De ce are nevoie cititorul?"} -->
  <p>Precizează întrebarea, decizia sau sarcina pe care pagina trebuie să o rezolve, inclusiv contextul care schimbă răspunsul.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"De ce are nevoie afacerea?"} -->
  <p>Precizează acțiunea calificată pe care pagina trebuie să o susțină, împreună cu dovezile necesare pentru a câștiga acea acțiune.</p>
  <!-- /wp:amicited/infobox-item -->
<!-- /wp:amicited/infobox-2-columns -->

WordPress ar trebui să expună două sloturi fixe de elemente, nu o zonă „adaugă bloc” fără restricții. Editorii pot reordona cele două elemente, dar nu pot insera un bloc nelegat între ele sau adăuga o a treia coloană.

Exemple

Exemplu bun

Acest exemplu funcționează deoarece titlul comun stabilește o singură idee, limita temporală creează o pereche autentică, iar ambele coloane specifică o muncă de măsurare comparabilă. Fiecare element rămâne semnificativ atunci când este îngrămădit sau extras independent.

Exemplu prost

Îmbunătățește-ți conținutul

Scrie bine: Creează conținut util, autoritar și captivant pe care publicul tău îl va îndrăgi și motoarele de căutare îl vor recompensa.

Alte lucruri: SEO include, de asemenea, munca tehnică, linkurile, designul de conversie, analitica, construirea mărcii, distribuția, întreținerea și multe alte activități importante.

Acest exemplu eșuează deoarece perechea este artificială. „Scrie bine” este o instrucțiune vagă, „Alte lucruri” este o categorie diversă, iar cel de-al doilea element conține un domeniu mult mai vast decât primul. Chenarul sugerează concepte egale și paralele acolo unde nu există. Înlocuiește-l cu proză care definește obiectivul real al conținutului, apoi folosește o listă sau secțiuni separate pentru fluxurile de lucru distincte.

Markup de schemă și accesibilitate

Un infobox cu două coloane nu are un tip Schema.org dedicat și nu creează date structurate independente. Textul său rămâne parte din Article, TechArticle sau WebPage în care este încorporat, atunci când pagina se califică pentru acel markup. Nu marca cele două elemente ca ItemList doar pentru că sunt două; elementul reprezintă o relație, nu neapărat o listă ierarhică sau completă. Dacă un element conține în mod independent un fapt folosit în altă parte în date structurate, politica la nivel de pagină pentru schemă guvernează acel fapt.

HTML-ul semantic ar trebui să exprime un container etichetat cu două secțiuni copil. Folosește un aside doar atunci când perechea este complementară narațiunii înconjurătoare; folosește o section atunci când face parte din argumentul principal. Oferă containerului un nume accesibil prin titlul său vizibil și aria-labelledby. Fiecare titlu copil trebuie să fie o rubrică reală la nivelul corect, nu text îngroșat ales pentru aspect estetic.

Ordinea sursei este ordinea de accesibilitate. Navigarea cu tastatura, cititoarele de ecran, copierea-și-lipirea și ecranele înguste trebuie să întâlnească elementul unu înaintea elementului doi. CSS-ul poate crea coloane, dar nu trebuie să le inverseze vizual. Nu te referi niciodată la „chenarul din stânga” sau „chenarul din dreapta”, deoarece acele poziții dispar atunci când sunt îngrămădite. Culoarea, forma icoanei și fundalul nu pot fi singurul mod de a distinge elementele. Designul trebuie să suporte mărirea textului fără tăiere, derulare orizontală sau coloane suprapuse.

Reguli de redactare

Începe prin a scrie fraza părinte: „Această idee are două părți: X și Y.” Dacă această frază este inexactă, nu folosi elementul. Oferă ambelor titluri ale elementelor aceeași formă gramaticală — două substantive, două întrebări sau două expresii temporale — deoarece limbajul paralel face relația imediat lizibilă.

Folosește exact două elemente. Păstrează fiecare titlu la 2–7 cuvinte și fiecare corp la 30–90 de cuvinte acolo unde este posibil, cu un maxim absolut de 120 de cuvinte. O diferență de o frază este acceptabilă; un element de 35 de cuvinte lângă unul de 110 cuvinte necesită editare sau o structură diferită. Fiecare corp ar trebui să răspundă la aceeași întrebare implicită și să folosească o profunzime comparabilă a dovezilor. Profunzime echivalentă nu înseamnă umplerea unui răspuns scurt cu text de umplutură.

Folosește un limbaj direct și neutru. Enunță distincția în titluri și explică consecința în corpuri. Preferă „Înainte de lansare / După lansare” în loc de „Primul / Al doilea”, deoarece etichetele semnificative supraviețuiesc extracției. Evită „fie…fie” cu excepția cazului în care opțiunile sunt cu adevărat exclusive și evită „versus” atunci când elementele sunt complementare.

Nu pune niciodată următoarele în interiorul elementului:

• Un al treilea element, chiar dacă sistemul de randare l-ar putea înfășura.
• O procedură cu mai mulți pași, o listă lungă cu puncte, un tabel de date, un grid de prețuri, un formular, o testimonială sau un banner promoțional.
• Secțiuni H2 independente, infoboxuri imbricate, fileuri, acordeoane, video sau galerii de imagini.
• Text juridic obligatoriu, avertismente de siguranță, liste de surse sau calificări care se aplică doar unei singure fraze din afara chenarului.
• Două linkuri fără legătură concepute să semene cu calluri la acțiune concurente.

Dacă oricare dintre elemente are nevoie de subtitluri sau mai mult de două paragrafe, promovează ambele elemente în secțiuni obișnuite ale paginii. Dacă cititorii trebuie să aleagă între elemente, adaugă criterii de decizie în proză sau folosește un element de comparație sau decizie; simetria vizuală singură nu explică o alegere.

Tipuri de postări care îl folosesc

Câmpul postTypes din front matter este sursa pentru acest set de utilizări. Fiecare format listat are o relație naturală în două părți, dar niciunul nu ar trebui să includă elementul implicit atunci când conținutul nu formează o pereche autentică.

Listă de verificare QA

• O singură idee părinte: Chenarul are un subiect comun clar care explică de ce ambele elemente aparțin împreună.
• Exact două elemente: Sursa și rezultatul redat conțin două elemente copil — niciodată unu, trei sau un spațiu gol.
• Paralelism real: Ambele elemente răspund la același tip de întrebare și folosesc titluri cu gramatică paralelă.
• Profunzime echivalentă: Niciun element nu este un contragreutate simbolic sau o categorie diversă; detaliile și dovezile sunt comparabile.
• Amplasare utilă: Chenarul urmează contextului său introductiv și nu separă o afirmație de dovezi sau un pas de cerința sa.
• Vecini siguri: Nu este adiacent unui alt grid paralel, componentă de comparație sau CTA cu două coloane.
• Formulare extractibilă: Titlurile părinte și ale elementelor își denumesc subiectele, iar corpurile nu depind de „stânga”, „dreapta” sau pronume din apropiere.
• Ordine responsive: Layouturile înguste îngrămădesc elementul unu înaintea elementului doi fără tăiere, derulare orizontală sau reordonare vizuală.
• Structură accesibilă: Containerul are o etichetă programatică vizibilă, titlurile copil sunt rubrici reale, iar culoarea sau icoanele nu transmit sensul singure.
• Limite de conținut: Fiecare corp rămâne în limita a două paragrafe și nu conține nicio componentă complexă imbricată, procedură sau element promoțional.
• Paritate a notațiilor: Markdown portabil, Hugo și WordPress păstrează același titlu, două elemente, corpuri și ordine.
• Reținere a schemei: Nu se adaugă markup de listă sau comparație, cu excepția cazului în care conținutul paginii se califică independent pentru acesta.

Un revizor ar trebui să respingă elementul atunci când oricare dintre primele patru verificări eșuează. Aceste eșecuri indică o problemă conceptuală, nu un defect de stilizare, iar modificarea lățimii sau a decorului nu le poate remedia.

FAQ

Înregistrările FAQ din front matter răspund la întrebările recurente de implementare: numărul de elemente este fixat la două, profunzimea contează mai mult decât numărul identic de cuvinte, comparațiile detaliate necesită un tabel, mobilul păstrează ordinea sursei, iar elementul nu generează markup de schemă. Păstrarea acestor răspunsuri în front matter structurat permite șablonului academiei să redea tratamentul FAQ aprobat fără a duplica conținutul în corp.