Markup Wiki pentru meniul VKontakte. Creați un banner pentru un grup VKontakte gratuit! Informații despre evenimentele viitoare

Cred că toți cei care folosesc în mod activ rețea socială Pe VKontakte, am întâlnit deja grupuri și pagini publice frumos concepute. Multe dintre ele, pe lângă meniu, au și multe subpagini stilizate, cataloage etc., ceea ce creează, în esență, un site mic chiar în interiorul rețelei de socializare.

Iată câteva exemple pentru ca toată lumea să înțeleagă despre ce vorbim.

Astfel de grupuri vă permit să vă remarcați printre concurenți și să atrageți mai mulți utilizatori. Mai ales dacă și conținutul este interesant :)
În acest articol vom vorbi despre cum se face toate acestea. Pentru a analiza totul mai detaliat și a aprofunda în toate subtilitățile, să luăm exemplu concret. Va exista o mică clasă de master despre proiectarea grupului.

Prima etapă a muncii noastre este ideea. Trebuie să înțelegem ce vrem să spunem și cui. Există mai multe formate de comunitate în VKontakte și ar trebui să alegeți în funcție de obiectivele dvs. Deși în viitor grupul poate fi transferat într-un format public și invers.

explic cu degetele. Public- acesta este ceva ca un blog. Fluxuri de stiri. Cu alte cuvinte, le spunem abonaților noștri anumite lucruri și ei nu vor putea scrie pe peretele comunității noastre. Maximul este sa comentezi.

grup vă permite să creați o comunitate mai deschisă la conversații și discuții, în care oamenii pot face postări în feed în numele lor. De asemenea, puteți adăuga prieteni din lista dvs. la el. Nu există o astfel de opțiune în public. În plus, grupul are puțin mai multe opțiuni pentru integrarea marcajului wiki (există o secțiune „Știri” în care puteți integra un meniu).

La nivel global, putem gândi astfel: dacă trebuie să creăm o comunitate pentru un magazin, atunci aș lua formatul „public”. Dacă despre care vorbim, de exemplu, despre iubitorii de pescuit, este mai bine să luați un „grup”. Deși, fiecare este liber să facă ce crede de cuviință. La urma urmei, formatul poate fi schimbat oricând. Cu toate acestea, rețineți că VKontakte introduce o restricție privind schimbarea din nou a formatului comunității și după prima dată va trebui să așteptați câteva zile până când puteți returna totul înapoi, dacă este necesar. Prin urmare, este mai bine să testați funcționalitatea înainte ca grupul să înceapă să se umple de conținut.

În această clasă de master, voi lua jocul ca punct de plecare Mad Max bazat pe filmul cu același nume, care a fost lansat cu doar câteva săptămâni în urmă și voi crea o comunitate pentru jucători cu diverse materiale despre acest joc. obiectivul principal— scurgerea traficului către site-ul dvs. de jocuri.

Formatul va fi „Grup”, deoarece este necesar să se creeze un aflux natural de audiență și să se maximizeze comunicarea în cadrul comunității. Voi clarifica imediat ce voi folosi. tehnică universală, care poate fi folosit atât în format de grup, cât și în public. Acest lucru funcționează peste tot.

Există mult conținut, să începem să dăm viață ideii!

Creați un grup

Pentru a crea un grup, accesați „Grupurile mele” în meniul din dreapta al contului dvs. VKontakte și faceți clic pe butonul albastru din partea de sus „Creați o comunitate”.

Ar trebui să apară o fereastră ca aceasta, unde introducem numele grupului nostru și selectăm formatul.

Prin intrare informatie necesara Panoul de control al comunității noastre se deschide în fața noastră. In cazul meu arata asa.

După cum puteți vedea, am adăugat câțiva parametri: am inclus video, înregistrări audio, discuții și o serie de alte funcții care îmi vor fi utile în munca in continuare la colectarea conținutului. Toate acestea pot fi schimbate în viitor fără nicio restricție. Am notat și adresa site-ului meu. Dacă nu aveți un site web sau subiectul acestuia nu corespunde formatului comunității (sunt despre lucruri diferiteși nu sunt legate între ele în niciun fel), atunci această linie poate fi lăsată necompletată.

Am stabilit restricții de vârstă la în acest caz, de la 18, similare cu cele pe care dezvoltatorii le-au stabilit pentru joc. Deși nu am nicio îndoială că și copiii se joacă.

Toate. Grupul a fost creat!

Acum puteți începe să-l proiectați.

Formatarea unui grup VKontakte

Această etapă poate fi împărțită în 2 componente: grafică și tehnică. Pentru a funcționa, avem nevoie de un șablon pentru a crea un avatar de grup și un meniu, precum și puțină imaginație și cunoștințe de bază despre Photoshop (alias Adobe Photoshop).

Șablon de marcare

Ce este un șablon și ce este chiar? Un șablon este un fel de gol. În acest caz, în format *.psd am marcat zone pentru imagine sub meniu și avatarul grupului.

După cum puteți vedea în al doilea exemplu de la începutul acestui articol, putem realiza designul în stil uniform pentru avatar și imagine de meniu. În același timp, este tăiat vizual în 2 părți. Deci, șablonul vă permite să formați o imagine în așa fel încât să eliminați deplasarea graficelor și să potriviți imaginile la același nivel cât mai mult posibil.

Pentru a fi mai clar, iată un exemplu.

Vedem că în ambele părți ale imaginii există o fâșie cu vedere la o zonă rezidențială. Fără a folosi un șablon, este aproape imposibil să o faci exact prima dată. Va trebui să ajustați imaginile, măsurând discrepanțe de până la 1px. În timp ce, atunci când folosim un șablon, pur și simplu îi adăugăm elemente grafice în cadrul markupului și obținem imediat rezultatul dorit.

Aș dori să notez că acest șablon conceput pentru 1 rând în explicație. În exemplul de captură de ecran există telefoane. Dacă apare oa doua linie, va trebui să utilizați un alt șablon sau să corectați manual designul.

Între timp, trecem direct la design grafic a lui grup nou. Aici aleg calea cu cea mai mică rezistență și merg la imagini Google. De asemenea, puteți utiliza Yandex. Cui îi place ce mai mult?

Nu am o educație în design, așa că nu ne vom opri în detaliu asupra problemelor de alegere a fonturilor și a altor detalii. După ce am făcut puțină magie în Photoshop, am obținut acest rezultat.

Pe fragmentul din stânga (unde scrie „Meniu”) puteți adăuga și mai multe declanșatoare. În acest caz, am decis să mă descurc fără ele. Toate. Designul avatarului este gata. În Photoshop, apăsați combinația de taste rapide Shift+Ctrl+Alt+S și salvați fragmentele noastre într-un folder de pe hard disk.

Prima etapă de lucru cu grafica este finalizată. Să luăm din nou legătura.

Setarea unui avatar și a unui meniu pentru un grup

Facem clic pe cele două tipuri în locul ava grupului nostru și încărcăm imaginea noastră acolo. Iată acești tipi, sub ei scrie și „Încarcă o fotografie”.

Adăugați o imagine. Specificați câmpurile și selectați o miniatură. Totul este simplu aici și nu ar trebui să fie probleme.

După cum putem vedea, trebuie să cunoașteți id-ul comunității. E foarte ușor să-l recunoști. Găsiți meniul în grupul dvs. (imediat sub avatar) și deschideți „Statistici comunitare”. În același timp, în bara de adresa browser va apărea ceva similar (numerele vor fi diferite).

Aceste numere după „?gid=" sunt ID-ul grupului dorit. Lipim valoarea rezultată în formularul de script și scriem numele paginii pe care vrem să o creăm. În acest caz, tastez „Meniu”.

Este de remarcat faptul că pagina va fi creată numai dacă fereastra cu grupul este deschisă în fila alăturată. Pur și simplu, trebuie să fiți conectat la VK în același browser. La urma urmei, doar administratorul grupului și persoanele desemnate de el au acces la astfel de manipulări. Un trecător la întâmplare nu va putea să meargă cu ușurință și să modifice setările unui grup la care nu are acces la panoul de administrare.

Dacă totul este făcut corect, se va deschide o pagină ca aceasta.

Aceasta este aceeași fereastră în care vom face markup wiki puțin mai târziu și vom crea meniul intern pentru grupul dvs. Deocamdată, tot ce trebuie să facem este să scriem ceva aici. Apoi faceți clic pe butonul albastru „Salvați pagina” și faceți clic pe linkul Întoarcere la pagină din partea de sus.

Am scris „Meniu” și pagina mea după salvare a început să arate așa.

Nu există încă un design, dar acum avem nevoie doar de un link către această pagină. O luăm în bara de adrese a browserului și revenim la pagina principala grupul nostru. La feed.

Aici creăm o postare cu următorul conținut: introduceți o imagine și un link către pagina de meniu pentru grup.

Faceți clic pe trimite. Apoi faceți clic pe ora la care a fost trimis mesajul și selectați „Pin” dintre toate opțiunile. Actualizăm pagina (tasta F5 de pe tastatură) și, dacă totul este făcut corect, obținem primul rezultat: grupul a găsit un avatar și un link pentru a merge la secțiunea de meniu.

Markup Wiki pentru meniul grupului VKontakte

Acum să începem să proiectăm meniul în sine. Să mergem din nou la Photoshop și să creăm un design pentru meniul nostru. Când proiectați interfața, trebuie să vă amintiți acele persoane care vor accesa VK prin intermediul aplicației cu telefoane mobile. Cu alte cuvinte, nu ar trebui să avem elemente mici și, în plus, trebuie să încercăm să facem totul cât mai clar. Pentru a nu trebui să ghicim cum funcționează totul aici și unde ar trebui să facem clic... ci trebuie doar să îndreptăm spre elementul potrivit și să studiem informațiile pe care le căutăm.

Nu voi intra în detaliu acum despre cum am alcătuit meniul. Iată ce am primit.

Câmpuri minime. Dispunerea verticală. Format ideal pentru meniu adaptiv. Adică, nimic nu va merge nicăieri pe telefoanele mobile. Totul va fi exact ca pe ecranele computerelor și tabletelor. Iau lățimea la 500 px, astfel încât mai târziu nimic să nu se micșoreze și să nu pierd calitatea imaginii de două ori. Înălțimea nu este importantă.

Tăiem imaginea în fragmente și le salvăm.

Toate. A sosit timpul pentru acordul final - colectăm meniul în grupul propriu-zis.

Pentru a face acest lucru, ne întoarcem la pagina principală a grupului (unde este feedul și linkul nostru cu imaginea care duce la meniu). Facem clic pe imaginea meniului și ajungem la aceeași pagină pe care am creat-o anterior pentru meniu.

Dacă sunteți administrator sau creatorul unui grup (în cazul nostru, acesta este cazul), atunci în partea de sus a paginii va apărea un link „Editați”. Hai să facem clic pe el.

Apoi trecem la modul de marcare wiki (sub butonul de închidere din colțul din dreapta sus al paginii există un cadru cu<>interior). Când modul dorit activat, acest buton conturat cu gri.

Apoi facem clic pe pictograma camerei și adăugăm toate fragmentele meniului nostru simultan. În modul wiki, nu vom vedea imaginile în sine, ci doar codul acestor imagini cu dimensiuni și parametri.

Vreau să poziționez meniul în centru și astfel încât să nu existe goluri între fragmente. Prin urmare, înfășurăm fiecare dintre elemente într-o etichetă

iar la parametrul deja imbricat „noborder” adaug al doilea parametru „nopadding”. Primul dezactivează conturul fragmentelor și marginile celulelor tabelului. Al doilea elimină marginile de la margine.

Primele și ultimele elemente de meniu nu ar trebui să fie butoane - în imaginea mea sunt doar element grafic fără referire la pagina interioara, așa că le adăugăm parametrul „nolink”. Aceasta va elimina opțiunea de a face clic pe acest element Deschideți o bucată din imagine într-o fereastră separată. Acum nu se va întâmpla nimic cu un clic de mouse. Acesta este fundalul normal al paginii. Inactiv.

În cazul meu, codul meniului arată așa.

Separat, aș dori să remarc faptul că, după importarea imaginilor în VK, sistemul încorporat indică uneori incorect dimensiunile imaginii. Prin urmare, trebuie să monitorizăm cu atenție acest lucru și să le afișăm exact pe cele pe care le-am planificat în etapa de proiectare. În caz contrar, totul se poate prăbuși și puzzle-ul nu se va reuni în cele din urmă.

Când am scris codul și am aliniat toate elementele, salvăm pagina și vedem același lucru care era în Photoshop.

Atingerea finală rămâne - trebuie să creăm chiar paginile unde meniul nostru va trimite oameni. Pentru a face acest lucru, să ne întoarcem din nou la scriptul pentru generarea paginilor wiki și de data aceasta să comandăm trei pagini deodată. În acest caz, trebuie să scrieți câte ceva pe fiecare și nu uitați să le salvați undeva adresele bara de adresa browser.

Apoi inserăm link-uri către pagini noi în codul wiki al meniului sub forma pagina-102302049_51013384, unde primul număr este id-ul grupului, iar al doilea este numărul paginii. Deși, în general, acest lucru nu este important. La urma urmei, trebuie doar să copiem acest fragment de adresă URL și să-l lipim în markup.

Ca rezultat, codul meniului ia următoarea formă.

În exterior, nimic nu s-a schimbat. Dar când facem clic pe elementele de meniu, putem vedea că acum funcționează!

În ceea ce privește marcarea în sine și regulile prin care este scris codul, vă sfătuiesc să citiți grupul VKontakte dedicat special acestei probleme. Băieții au descris totul puncte cheie iar în catalogul lor puteți găsi cu ușurință elementul necesar și vă puteți da seama cum să-l adăugați la pagina dvs. wiki.

Înainte de a vă scufunda în marcajul wiki, creați meniu interactiv , unele lucruri trebuie făcute acţiuni pregătitoareÎn primul rând, modificați unele setări din grup. Faceți clic pe „Managementul comunității”, deschideți „Discuții” și conectați „Materiale”.

Acum să trecem la pregătirea imaginilor. Dacă nu lucrezi cu editori grafici, va trebui să apelezi la liber profesioniști. Lucrările suplimentare vor fi afișate folosind Photoshop, dar pot fi făcute și în alte editori.

Noi ne pregatim probă pentru grupul VKontakte conform imaginii.

Dimensiunile ferestrei A, în care va fi plasat meniul, pot diferi de cele indicate. Totul depinde de dimensiunile pe care le setați pentru butoanele de meniu. Opțiunea propusă oferă un buton pe linie. Dacă trebuie să plasați două butoane la rând, atunci lățimea ferestrei A trebuie redusă la maximum 377 px. Înălțimea acestei ferestre în majoritatea cazurilor este selectată empiric. În opțiunea propusă s-a ales o înălțime de 377 px la plasarea fiecărui element de informație pe o singură linie de pe prima pagină a grupului.

În continuare ne pregătim imagine potrivită, notează inscripțiile și decupează întregul desen în secțiuni, ținând cont de faptul că fiecare parcelă separată, cu inscripția corespunzătoare, va servi ca buton de meniu. Nu vom intra în profunzime aici despre cum să facem toate acestea, deoarece acest articol nu este o lecție de Photoshop.

După ce am salvat și șters fragmentele inutile (Photoshop taie și salvează întreaga imagine și câmpurile albe), vom redenumi fragmentele, numerotându-le în ordinea locației lor în meniu.

Acum să trecem direct la grup. După ajustarea setărilor, pe perete au apărut două file: „Ultimele știri” și „Discuții”. Click pe " Subiect nou» în fila discuții și creați prima pagină a meniului nostru.

Trebuie să-l denumești în funcție de numele din meniul grafic și să completezi câmpul de descriere. După ce ați completat toate informațiile necesare, faceți clic pe „Creați subiect”.

Mesajul creat va apărea pe perete. În același mod, creăm numărul de pagini de care avem nevoie (în conformitate cu secțiunile din meniu).

După finalizarea operațiunilor pregătitoare, putem trece la editarea meniului nostru. Pentru a face acest lucru, avem nevoie de fila „Ultime știri”. Plasați cursorul peste el și faceți clic pe „Editare”.

În continuare, ceva deja familiar ne va fi dezvăluit. În modul de editare vizuală, făcând clic pe pictograma camerei din editor, încărcăm toate fragmentele în secvența în care sunt situate în imaginea de ansamblu. De asemenea, schimbăm numele în ceva mai ușor de înțeles pentru vizitatorii noștri. După aceea, treceți la modul de marcare wiki și editați codul.

Exemplu de cod pentru meniul în cauză:

[]
[]
[]
[]

Este important să rețineți că pentru fragmentele care nu servesc drept buton, trebuie să introduceți „nolink” în loc de link către pagină. În caz contrar, fragmentul va putea fi clicat și de fiecare dată când dați clic pe el, fragmentul în sine se va deschide ca imagine separată.

Dacă totul este făcut corect și nu există erori în cod, atunci când reveniți în grupul nostru și după ce faceți clic pe numele filei (Meniul principal al grupului), se va deschide meniul creat de noi, care arată ca unul cu avatarul . Meniul interactiv și designul grafic al grupului reprezintă o singură compoziție. Când faceți clic pe secțiunile de meniu, suntem direcționați către secțiunile corespunzătoare ale grupului.

Dacă meniul nu se potrivește nivel inferior cu un avatar, în codul din fragmentul inferior, schimbând înălțimea în px, realizați alinierea. Dacă acest lucru se reflectă în calitatea imaginii, atunci în șablonul original editor grafic faceți modificări la dimensiunea fragmentului dorit și redesenați aspectul.

Ne-am uitat cum să facem meniu interactiv sau creați un grup în stil wiki. Dacă aveți întrebări despre procesul de pregătire în sine, scrieți în comentarii și vom încerca să le rezolvăm împreună.

Cred că toți cei care utilizează activ rețeaua socială VKontakte au întâlnit deja grupuri și pagini publice frumos concepute. Multe dintre ele, pe lângă meniu, au și multe subpagini stilizate, cataloage etc., ceea ce creează, în esență, un site mic chiar în interiorul rețelei de socializare.

Iată câteva exemple pentru ca toată lumea să înțeleagă despre ce vorbim.

Astfel de grupuri vă permit să vă remarcați printre concurenți și să atrageți mai mulți utilizatori. Mai ales dacă și conținutul este interesant :)
În acest articol vom vorbi despre cum se face toate acestea. Pentru a analiza totul mai detaliat și a aprofunda în toate subtilitățile, să luăm un exemplu specific. Va exista o mică clasă de master despre proiectarea grupului.

La nivel global, putem gândi astfel: dacă trebuie să creăm o comunitate pentru un magazin, atunci aș lua formatul „public”. Dacă vorbim, de exemplu, despre pasionații de pescuit, atunci este mai bine să luați un „grup”. Deși, fiecare este liber să facă ce crede de cuviință. La urma urmei, formatul poate fi schimbat oricând. Cu toate acestea, rețineți că VKontakte introduce o restricție privind schimbarea din nou a formatului comunității și după prima dată va trebui să așteptați câteva zile până când puteți returna totul înapoi, dacă este necesar. Prin urmare, este mai bine să testați funcționalitatea înainte ca grupul să înceapă să se umple de conținut.

Ca parte a acestei clase de master, voi lua ca punct de plecare jocul Mad Max bazat pe filmul cu același nume, care a fost lansat cu doar câteva săptămâni în urmă, și voi crea o comunitate pentru jucători cu diverse materiale despre acest joc. . Scopul principal este de a scurge traficul către site-ul tău de jocuri.

Formatul va fi „Grup”, deoarece este necesar să se creeze un aflux natural de audiență și să se maximizeze comunicarea în cadrul comunității. Permiteți-mi să clarific imediat că voi folosi o tehnică universală care poate fi folosită atât în format de grup, cât și în public. Acest lucru funcționează peste tot.

Există mult conținut, să începem să dăm viață ideii!

Creați un grup

Pentru a crea un grup, accesați „Grupurile mele” în meniul din dreapta al contului dvs. VKontakte și faceți clic pe butonul albastru din partea de sus „Creați o comunitate”.

Ar trebui să apară o fereastră ca aceasta, unde introducem numele grupului nostru și selectăm formatul.

După ce au introdus informațiile necesare, panoul nostru de control al comunității se deschide în fața noastră. In cazul meu arata asa.

După cum puteți vedea, am adăugat câțiva parametri: am inclus video, înregistrări audio, discuții și o serie de alte caracteristici care îmi vor fi utile în munca viitoare când colectez conținut. Toate acestea pot fi schimbate în viitor fără nicio restricție. Am notat și adresa site-ului meu. Dacă nu aveți un site web sau subiectul său nu corespunde formatului comunității (sunt despre lucruri diferite și nu au nicio legătură între ele), atunci acest rând poate fi lăsat necompletat.

În acest caz, am stabilit restricțiile de vârstă de la 18 ani, similare cu cele pe care dezvoltatorii le-au stabilit pentru joc. Deși nu am nicio îndoială că și copiii se joacă.

Toate. Grupul a fost creat!

Acum puteți începe să-l proiectați.

Formatarea unui grup VKontakte

Această etapă poate fi împărțită în 2 componente: grafică și tehnică. Pentru a funcționa, vom avea nevoie de un șablon pentru crearea unui avatar și a unui meniu de grup, precum și de puțină imaginație și cunoștințe de bază despre Photoshop (alias Adobe Photoshop).

Șablon de marcare

Ce este un șablon și ce este chiar? Un șablon este un fel de gol. În acest caz, în format *.psd am marcat zone pentru imagine sub meniu și avatarul grupului.

După cum puteți vedea în al doilea exemplu de la începutul acestui articol, putem proiecta avatarul și imaginea de meniu în același stil. În același timp, este tăiat vizual în 2 părți. Deci, șablonul vă permite să formați o imagine în așa fel încât să eliminați deplasarea graficelor și să potriviți imaginile la același nivel cât mai mult posibil.

Pentru a fi mai clar, iată un exemplu.

Aș dori să remarc că acest șablon este conceput pentru 1 rând de explicație. În exemplul de captură de ecran există telefoane. Dacă apare oa doua linie, va trebui să utilizați un alt șablon sau să corectați manual designul.

Între timp, trecem direct la designul grafic al noului nostru grup. Aici iau calea cu cea mai mică rezistență și mă îndrept către Google Images pentru a găsi părți ale designului. De asemenea, puteți utiliza Yandex. Cui îi place ce mai mult?

Prima etapă de lucru cu grafica este finalizată. Să luăm din nou legătura.

Setarea unui avatar și a unui meniu pentru un grup

Facem clic pe cele două tipuri în locul ava grupului nostru și încărcăm imaginea noastră acolo. Iată acești tipi, sub ei scrie și „Încarcă o fotografie”.

Adăugați o imagine. Specificați câmpurile și selectați o miniatură. Totul este simplu aici și nu ar trebui să fie probleme.

După cum putem vedea, trebuie să cunoașteți id-ul comunității. E foarte ușor să-l recunoști. Găsiți meniul în grupul dvs. (imediat sub avatar) și deschideți „Statistici comunitare”. În acest caz, ceva similar va apărea în bara de adrese a browserului (numerele vor fi diferite).

Aceste numere după „?gid=" sunt ID-ul grupului dorit. Lipim valoarea rezultată în formularul de script și scriem numele paginii pe care vrem să o creăm. În acest caz, tastez „Meniu”.

Dacă totul este făcut corect, se va deschide o pagină ca aceasta.

Aceasta este aceeași fereastră în care vom crea ulterior un marcaj wiki și vom crea un meniu intern pentru grupul nostru. Deocamdată, tot ce trebuie să facem este să scriem ceva aici. Apoi faceți clic pe butonul albastru „Salvați pagina” și faceți clic pe linkul Întoarcere la pagină din partea de sus.

Am scris „Meniu” și pagina mea după salvare a început să arate așa.

Nu există încă un design, dar acum avem nevoie doar de un link către această pagină. Îl selectăm în bara de adrese a browserului și revenim la pagina principală a grupului nostru. La feed.

Aici creăm o postare cu următorul conținut: introduceți o imagine și un link către pagina de meniu pentru grup.

Markup Wiki pentru meniul grupului VKontakte

Acum să începem să proiectăm meniul în sine. Să mergem din nou la Photoshop și să creăm un design pentru meniul nostru. Când proiectați interfața, trebuie să vă amintiți acele persoane care vor accesa VK prin intermediul aplicației de pe telefoanele mobile. Cu alte cuvinte, nu ar trebui să avem elemente mici și, în plus, trebuie să încercăm să facem totul cât mai clar. Pentru a nu trebui să ghicim cum funcționează totul aici și unde ar trebui să facem clic... ci trebuie doar să îndreptăm spre elementul potrivit și să studiem informațiile pe care le căutăm.

Nu voi intra în detaliu acum despre cum am alcătuit meniul. Iată ce am primit.

Câmpuri minime. Dispunerea verticală. Format ideal pentru un meniu receptiv. Adică, nimic nu va merge nicăieri pe telefoanele mobile. Totul va fi exact ca pe ecranele computerelor și tabletelor. Iau lățimea la 500 px, astfel încât mai târziu nimic să nu se micșoreze și să nu pierd calitatea imaginii de două ori. Înălțimea nu este importantă.

Tăiem imaginea în fragmente și le salvăm.

Toate. A sosit timpul pentru acordul final - colectăm meniul în grupul propriu-zis.

Dacă sunteți administrator sau creatorul unui grup (în cazul nostru, acesta este cazul), atunci în partea de sus a paginii va apărea un link „Editați”. Hai să facem clic pe el.

Apoi trecem la modul de marcare wiki (sub butonul de închidere din colțul din dreapta sus al paginii există un cadru cu<>interior). Când modul dorit este activat, acest buton este subliniat cu gri.

Vreau să poziționez meniul în centru și astfel încât să nu existe goluri între fragmente. Prin urmare, înfășurăm fiecare dintre elemente într-o etichetă

Primul și ultimul element de meniu nu ar trebui să fie butoane - în imaginea mea sunt doar un element grafic fără un link către pagina internă, așa că le adăugăm parametrul „nolink”. Acest lucru va elimina posibilitatea de a face clic pe acest element pentru a deschide o parte din imagine într-o fereastră separată. Acum nu se va întâmpla nimic cu un clic de mouse. Acesta este fundalul normal al paginii. Inactiv.

În cazul meu, codul meniului arată așa.

Când am scris codul și am aliniat toate elementele, salvăm pagina și vedem același lucru care era în Photoshop.

Ca rezultat, codul meniului ia următoarea formă.

În exterior, nimic nu s-a schimbat. Dar când facem clic pe elementele de meniu, putem vedea că acum funcționează!

În ceea ce privește marcarea în sine și regulile prin care este scris codul, vă sfătuiesc să citiți grupul VKontakte dedicat special acestei probleme. Băieții au descris toate punctele cheie și în catalogul lor puteți găsi cu ușurință elementul necesar și vă puteți da seama cum să îl adăugați la pagina dvs. wiki.

Folosind marcajul wiki, puteți crea un meniu de grup, articole analitice, cazuri și instrucțiuni. Desigur, va trebui să petreci puțin mai mult timp pe asta decât cu crearea postărilor obișnuite pe perete. Dar cu cât te deranjezi mai mult cu designul de conținut, cu atât publicul tău va fi mai recunoscător.

Cum funcționează Wiki Markup

Markup Wiki este un limbaj care este folosit pentru aranjarea paginilor. În mod convențional, poate fi numit fratele mai mic al HTML. Paginile Wiki facilitează scrierea și formatarea textului, inserarea de ilustrații, videoclipuri, linkuri și tabele. Poate fi inventat articol simplu sau creați un întreg ghid interactiv cu capitole și subtitluri.

Lățimea oricărei pagini wiki este de 607 px. Înălțimea este limitată doar de numărul de caractere; pot fi aproximativ 16.000 în total.

Toate markupurile wiki se bazează pe etichete, la fel ca HTML. Există etichete unice (de exemplu,
- întrerupere de linie) și cele pereche (de exemplu, miniatură).

Cum funcționează etichetele pentru text în markup wiki

În unele cazuri, marcajul wiki utilizează sintaxă simplificată (etichetele sunt înlocuite cu caractere tipografice). De exemplu, pentru a crea listă cu puncte Asteriscurile „*” sunt folosite, iar semnele hash „#” sunt folosite pentru cele numerotate.

Cum funcționează tipografia în markup wiki

Toate etichete existente iar metodele de utilizare a acestora sunt colectate în oficialComunitatea de markup wiki VKontakte . Folosiți materialele acestei comunități ca o foaie de înșelăciune de încredere. În acest articol, vom trece peste principiile de bază ale lucrului cu marcajul wiki și vă vom arăta pas cu pas cum să îl folosiți pentru a crea pagini de grup și meniuri.

ÎN editor standard Paginile Wiki au două moduri: modul de marcare vizual și wiki (butonul de comutare arată astfel:<>).

Așa arată modul activ marcare wiki

Un text simplu cu câteva imagini poate fi alcătuit în modul vizual. Acesta este un editor de text obișnuit și nu necesită cunoștințe de markup wiki. Dar dacă doriți o pagină wiki îngrijită, cu tabele, linkuri și videoclipuri încorporate, o puteți face doar în modul de marcare - folosind cod.

Cum se creează o pagină wiki

Butonul „Creați o pagină nouă” nu există în interfața VKontakte în sine. Prin urmare, vorbim despre două metode, standard și avansată (folosind aplicația).

Standard

Pentru grup.Accesați „Gestionarea comunității” → „Secțiuni” → „Materiale” și selectați „Deschidere” sau „Restricționat”.

Cum să activați „Materiale” într-un grup

Acum secțiunea „Ultimele știri” va apărea pe pagina principală a grupului. Aceasta este locația pentru meniul propus de grup. Pentru a crea o pagină nouă, puteți scrie numele acesteia direct în modul de editare a paginii „Ultimele știri”, includeți-o între paranteze drepte, faceți clic pe „Previzualizare” și obțineți link gata la o pagină nouă.

Cum să creați o pagină nouă prin Ultimele știri

Pentru public.Pentru a crea o pagină nouă, trebuie să aflați id-ul publicului dvs. Pentru a face acest lucru, accesați secțiunea „Statistici comunitare”. În bara de adrese a browserului dvs. veți vedea un cod ca acesta:

https://vk.com/stats?gid= 123456789

ID-ul de grup necesar este toate numerele de după „gid=”.

Acum trebuie să introduceți următorul cod în bara de adrese a browserului dvs.:

https://vk.com/pages?oid=-ХХХ&p=Page_Name

În loc de XXX, înlocuim id-ul publicului și în loc de „Page_Name” - numele cu care ați venit. Numele poate folosi chirilice, latină și numere. Simboluri speciale Nu este interzis să le folosiți, dar este mai bine să nu vă asumați riscuri: din cauza lor, puteți pierde posibilitatea de a edita pagina. Lipim toate datele în locurile potrivite, apăsăm Enter, iar browserul va deschide pagina creată.

Folosind aplicația

Dezvoltatorii VKontakte recomandă utilizarea a trei aplicații pentru a lucra cu marcajul wiki:"Mobivik" , "Sursă"și „Vicky Poster”.

În acest ghid, vom lua ca exemplu aplicația Mobivik. În noiembrie 2017, a primit premiul al doilea în programul VKontakte Start Fellows. Funcționează fără instalare și înregistrare suplimentarăîn versiunea desktop, mobilă a VKontakte și în aplicația pentru telefon (dezvoltatorul recomandă utilizarea versiunilor nu mai devreme decât Android 5.1, iOS 9 și Windows Phone 8.1).

Pentru a crea o pagină nouă, din ecranul principal al aplicației, selectați grupul doritși introduceți un nume pagina noua, apoi faceți clic pe „Obțineți link”.

Cum să creați o pagină nouă folosind aplicația Mobivik

Link-uri către noua pagină wiki din aplicația Mobivik

Iată un truc de viață pentru acele cazuri în care ați făcut o pagină complexă cu o cantitate mare elemente și vă este teamă că aspectul va merge prost ecran mic. Copiați adresa din elementul „Cod pentru pagina wiki”. Intră în modul de editare al paginii tale și inserează-l chiar la începutul codului. Veți obține o imagine ca aceasta:

Când utilizatorul face clic pe el, el va fi dus la aplicația Mobivik, care va afișa o imagine îngrijită versiune mobila Pagina ta.

În stânga este pagina cu meniul comunității LIVE, deschisă pe mobil,
în dreapta - este același, dar deschis prin Mobivik

Cum să obțineți un link către o pagină wiki

Cum să găsiți o pagină care a fost creată mai devreme? Cel mai simplu și metoda de incredere- copiați toate adresele paginilor wiki la dosar separat, de exemplu, în Foi de calcul Google. O altă modalitate este prin orice aplicație de lucru cu pagini wiki. De exemplu, accesați Mobivik, selectați numele comunității și pagina dorită, faceți clic pe „Obțineți link” și copiați adresa din elementul „Link către pagina wiki”.

Cum să obțineți un link către o pagină wiki creată anterior

Cum să faci o postare cu un link către o pagină wiki

Copiați linkul către pagina wiki și inserați-l în intrare nouă pe peretele dvs. sau pe un perete comunitar. Dacă totul este făcut corect, site-ul va genera un bloc de link sub câmp de textînregistrări. Acum eliminați textul linkului, atașați bannerul și faceți clic pe „Trimite”. În versiunea desktop, bannerul va deveni și un link către pagina wiki, iar în versiunea mobilă se va deschide ca o imagine obișnuită.

Imaginea atașată postării va deveni parte a linkului către pagina wiki în versiunea desktop

Text

Posibilitățile de formatare a textului în markup wiki, în general, nu diferă de cele obișnuite editor de text. Când editați textul în sine (faceți-l îngroșat, aliniați la dreapta etc.), folosim etichete de markup wiki, nu uitați să le închideți:

Centrare text .

Pentru a structura textul în markup wiki, sunt furnizate combinații de caractere tipografice. De exemplu, acest cod "—- " va pune o linie de despărțire orizontală în text și aceasta ":: " - dublă indentare înainte de paragraful.

Puteți încadra aproximativ 16 mii de caractere pe o pagină.

Legături

Pentru a face textul vizibil în locul adresei, adăugați numele linkului:

[] - la profilul utilizatorului

[] - la pagina principală a comunității

[] - la o altă pagină wiki

[] - la o întâlnire VKontakte

Imagini

Lățimea maximă a unei imagini care poate fi utilizată în marcarea wiki este de 607 px, care este lățimea paginii wiki în sine. Înălțimea este practic nelimitată (rețineți că înălțimea paginii în sine este de 16.000 de caractere). Imaginile pot fi încărcate în două moduri.

Folosind bootloader-ul în meniul de sus editor.

Utilizarea codului.Încărcarea imaginii în album separat grup, deschide-l, vezi în bara de adrese cod lung ca aceasta

https://vk.com/club12345678?z=foto-12345_12345%2Falbum-12345678_12345678

Copiați id-ul imaginii din ea (evidențiat cu aldine). Apoi îl încadram cu paranteze pătrate duble și îl lipim în locurile potrivite de pe pagină. Se dovedește ceva de genul:

[]

Ce urmeaza? Editați alinierea, împachetarea textului, dimensiunea, linkul. Pentru a face acest lucru, scrieți parametrii necesari după linie verticalași separate prin punct și virgulă. De exemplu, în acest cod setăm dimensiunea imaginii 300x100px și împachetarea textului în dreapta:

Video

Mai întâi, trebuie să încărcați un videoclip în videoclipurile comunității. După descărcare, deschideți videoclipul și copiați-i id-ul (îngroșat) din bara de adrese.

https://vk.com/videos-12345678?z=video-12345_12345%2Fclub12345678%2Fpl_-12345678_-2.

Încadram acest lucru cu paranteze drepte și obținem acest cod:

Obținem o imagine mică cu o pictogramă de redare, care, atunci când faceți clic, deschide un player video cu drepturi depline. Pentru ca videoclipul să fie redat pe pagina în sine, dezvoltatorii VK sugerează utilizarea etichetei jucător.

Dar aici avem o margine neagră disproporționată în jurul videoclipului:

Pentru a-l elimina, trebuie să ajustați dimensiunea playerului la dimensiunea videoclipului în sine. De exemplu, în cazul nostru, următorii parametri erau potriviți:

Am primit videoclipul fără cadre negre, se va reda direct pe pagină

Mese

Dacă doriți să structurați frumos conținutul paginii dvs. wiki și să vă asigurați că este afișat bine dispozitive mobile, nu te poți lipsi de o masă. Aici veți avea nevoie de următoarele semne simple:

Când lucrați cu tabele, puteți utiliza 4 etichete: fara limita (face ramele de masă invizibile), nomargin (face ca tabelul să aibă lățimea completă a paginii wiki), nupadding (elimină indentările din celule) și fix (vă permite să creați un tabel de dimensiuni fixe).Numărul de celule pe care îl specificați într-un rând determină numărul de coloane din tabel.

Iată un exemplu de tabel2x2 fără indentare în partea de sus și de jos a textuluiîn interiorul celulelor:

Lățimea primei coloane este de 200 px, lățimea celei de-a doua este de 300 px.

Iată ce a ieșit din asta:

Puteți plasa text, imagini, înregistrări audio și video în celulele tabelului.

Cum se face un meniu wiki

Meniul de grup VK nu este un fel de funcționalitate separată, ci pur și simplu o pagină wiki cu mai multe imagini, fiecare dintre ele conține un link către pagină specifică. De fapt, totul este simplu aici.

Pregătirea copertei pentru meniu.Puteți face orice fotografie potrivită și puteți pune text pe ea. Sau poți angaja un designer care te va desena blocuri frumoaseși butoane. Vom avea un meniu cu 6 butoane. Pentru a face acest lucru, avem nevoie de o imagine în care vor fi indicate aceste butoane. Să decidem asupra dimensiunii sale.

Când pregătiți o imagine pentru meniu, amintiți-vă că lățimea paginii wiki este de 607 px. Lățimea imaginii nu trebuie să fie mai mare, altfel imaginea se va micșora și își va pierde calitatea. De exemplu, am luat o imagine de 510x300 px.

Tăiați această imagine în 6 părți(o parte pentru fiecare buton). Acest lucru este convenabil de făcut în Adobe instrument Photoshop"Tăiere". Dacă nu vrei să te deranjezi, folosește, de exemplu, un serviciu online IMGonline (taie imaginile în părți egale). Am făcut totul în Photoshop.

Cu instrumentul „Tăiere” activ, faceți clic Click dreapta mouse-ul peste imagine și selectați „Split fragment”, indicați cantitatea necesară fragmente și faceți clic pe „OK”.

Cum să tăiați o imagine în Photoshop

Meniul nostru va fi conceput ca un tabel de 6 celule: trei rânduri și două coloane. Pentru a face acest lucru, tăiem imaginea pentru meniu în 6 părți egale care măsoară 255x100 px. Va trebui introdusă aceeași dimensiune pentru fiecare celulă.

Creați un cadru pentru masă.Intrăm în modul de editare pentru o pagină nouă și creăm un tabel. Îl deschidem cu eticheta (| și setăm imediat trei parametri importanți:

nupadding - va permite imaginilor să se atingă
fara limita - va ascunde marginile vizibile ale tabelului
fix - vă permite să setați dimensiunile exacte ale celulelor.

Specificăm o lățime fixă a celulei - 255px 255px (de două ori, deoarece există și două coloane). Apoi, setăm locurile pentru începutul liniilor noi cu eticheta |- și celule noi (coloane) cu eticheta |. . Închidem tabelul cu eticheta |) și obținem următorul cadru:

Plasați imagini în celule și setați linkuri pentru ele. Una câte una, deschideți părțile necesare ale imaginii în albumul comunității, copiați-le id-ul din linia browserului ( fotografie-12345_12345) , includeți între paranteze pătrate duble, notați dimensiunile 255x100px și etichetă nopadding pentru lipirea pozelor. După bara verticală atribuim un link pentru fiecare buton. Obținem următorul cod.

(|noborder nopadding remediat
|~255px 255px
|-

| []
|-
| []
| []
|-
| []
| []
|}

Gata!Faceți clic pe „Salvați pagina” și obțineți meniu convenabil pentru comunitate.

Meniu de grup gata făcut în versiunea desktop

Meniu de grup gata făcut în versiunea mobilă

Dacă ai făcut un meniupentru un grup, apoi va fi ușor accesibil făcând clic pe „Ultime știri” (apropo, această pagină poate fi redenumită „Meniu” în modul de editare).

Dacă ai făcut un meniupentru public, apoi poate fi plasat într-un loc vizibil sub numele comunității folosind o intrare fixată.

Pentru a fixa un meniuin grup, publicați o postare cu un banner și un link către pagina wiki în numele comunității (dacă publicați în numele dvs., va fi imposibil să fixați pagina).In public nu vor fi probleme de prindere: acolo Puteți fixa o postare a oricărui autor.

Cum să faci o postare cu un link către un meniu în public

Cum să fixați meniul comunității

Noul editor de articole VKontakte și marcare wiki

Administrația VKontakte a anunțat lansarea editorului de articole pe 22 decembrie 2017 și îl poziționează ca instrument pentru publicarea de citiri lungi.

Unii utilizatori au decis că a fost creat pentru a înlocui marcajul wiki. Dar este prea devreme pentru a trage astfel de concluzii, deoarece funcționalitatea editorului este încă destul de slabă. Nu poate edita fișiere media (dimensiune și aliniere) sau nu poate crea tabele, iar hyperlinkurile pot fi atribuite doar textului. Nu există etichete sau coduri, există doar un mod vizual, ca într-un editor de text obișnuit.

Din aceasta, este clar că este încă posibil să se creeze un meniu convenabil pentru comunitate sau o destinație wiki numai folosind marcarea wiki. Ce se va întâmpla în continuare - timpul va spune.

Așa arată interfața noului editor de articole VKontakte

Ce să rețineți despre marcarea wiki

Metoda standard de creare a paginilor wiki este laborioasă și nu foarte convenabilă. Cel mai simplu mod de a crea o pagină este prin intermediul aplicației Mobivik, „ Sursă" sau "Vicky Poster".
Meniul comunității trebuie să fie transformat într-o masă, astfel încât să arate bine pe dispozitivele mobile.
Când editați o pagină wiki în interfața standard, nu trebuie să comutați între modul de editare vizuală și modul de marcare wiki. Din această cauză, aspectul poate fi afectat.

Nu este necesar să vă amintiți toate etichetele, doar să păstrați linkul la îndemână

Pentru a înregistra un grup în rețea socială există un convenabil și simplu marcare wiki pentru grupul VKontakte. Funcționează în mod similar cod html y, dar intuitiv mai ușor și mai ușor de înțeles pentru utilizator simplu, proprietarul grupului. Acest marcaj este folosit în Wikipedia (enciclopedia liberă) și de aici și numele.
Folosind marcajul Wiki, puteți crea un grup într-un mod unic sau tradițional și nu va trebui să intrați în jungla html, unde puteți rămâne blocat săptămâni întregi. Markup Wiki atât de ușor de învățat încât îl vei învăța singur utilizator neexperimentatîn doar o oră. Acest marcaj gestionează, de asemenea, formatarea imaginilor și textului, ancore, spoilere, link-uri, tabele graficeși alte elemente care se pot schimba calitativ aspect orice grup.

Un meniu în contact poate fi creat în mai multe moduri, iar alegerea lor este determinată de focalizarea și tema grupului VK. Pentru grupurile sociale și comerciale, utilizatorii preferă să folosească serios meniuri text, iar pentru divertisment - grafic.

Marcarea Wiki este excelentă pentru a lucra cu fotografii sau orice imagini, dar există câteva trucuri. O imagine inserată folosind marcajul wiki va apărea numai dacă este prezentă în album. Cu o simplă manipulare, o fotografie (de exemplu: photo55775_55775) va apărea imediat pe pagină. Pentru a face acest lucru, trebuie să-i copiați adresa și să adăugați paranteze pătrate duble la ea.

Arată așa - [] - și acest marcaj este aplicabil oricărei imagini din albume. Adăugând un marcaj, puteți insera atât text, cât și un link împreună cu imaginea, modificându-i astfel aspectul.

Pentru a face acest lucru, trebuie să utilizați următorul markup wiki - []. Cuvântul „opțiuni” poate fi înlocuit cu alte valori, fiecare dintre ele va schimba aspectul fotografiei. Și semnificațiile sunt următoarele:

noborder va face un desen fără cadru;
nopadding va uni imaginile împreună prin eliminarea spațiilor dintre ele;
plain va face un link din imagine;
NNNpx vă va permite să redimensionați imaginea;
caseta se va deschide într-o fereastră nouă.

Lucrați cu tabele folosind marcajul Wiki?

Atât meniurile cu grafică, cât și meniurile cu imagini sunt imposibile fără tabele speciale. După ce ați învățat un set simplu de coduri și simboluri, veți învăța cum să creați rapid tabele pentru grupul dvs. VKontakte. Iată cum arată simbolurile:

(| fără acest simbol inițial este imposibil să se creeze un tabel;
|+ caracter opțional pentru a centra tabelul
| - începe cu acest simbol linie nouă;
| acest simbol este responsabil pentru transparența celulelor;
! folosind acest simbol puteți face o celulă de culoare închisă;
|) Acest caracter opțional încheie tabelul.

Acesta este meniul care va ieși din următoarele cod simplu:

{|
|-
|

"Articole noi"'||"'Jocuri"'||„‘Toate genurile’”
|-
![]!![]!![]
|-
|
[[Jocuri online noi|Articole noi]]

[[Puzzle-uri]]

|
[[Baloane]]

[[Misiuni]]

[[Arcadă]]

[[Discuții despre jocuri]]

|-
|}

Generarea de linkuri folosind un wiki - marcaje?

Într-o persoană de contact, puteți utiliza trei tipuri de link-uri pentru a crea un grup folosind marcajul wiki.

Legătura tradițională:

Link obișnuit + text:

Link ca imagine: []

Lucrezi cu meniul grafic?

Pentru a-l crea, se folosește un algoritm simplu de acțiuni. Dar trebuie să știți, cel puțin superficial, cum funcționează Photoshop și să studiați marcajul wiki. Dar meniul graficîn grupul de divertisment VKontakte arată foarte atractiv și, prin urmare, ia-ți timp pentru a-l crea. Algoritmul este astfel:

Tăiați grafica necesară în editor și „salvați pentru web”;
Descărcați grafica ca poze obisnuite, fără folosind blițul pentru a nu le degrada calitatea;
Asamblați meniul folosind o etichetă specială „nopadding”;
Notați cu atenție toate linkurile;
Meniu frumos pentru dvs grup de divertisment gata.

Câteva secrete ale marcajului wiki

Acest marcaj nu este similar cu codul html și unele dintre caracteristicile sale pot fi încercate doar experimental. Dar dacă experimentarea nu este treaba ta, explorează următoarele caracteristici, pentru a evita greșelile și pentru a ghici de ce acest sau acel element nu respectă marcajul wiki. Trucuri de marcare:

Lățimea permisă a imaginii nu este mai mare de 610px;
Schimbarea lățimii schimbă automat înălțimea imaginii;
Imaginile mai mici de 134px schimbă calitatea în rău;
Doar 7 elemente de listă pot fi prezente într-o linie de marcare;
Mai mult de 18 etichete neînchise pe o pagină vor duce la distorsiunea și erorile acesteia.

Aplicațiile programatorilor pentru marcarea wiki

Dacă vi se pare că marcajul este prea complicat, utilizați aplicații simple, pe care autorii înșiși le numesc lecții de pregătire. Asta dacă vrei să înveți secretele markupului. Dacă știința nu este ușoară pentru dvs., creați grupuri VK folosind un simplu editor vizual, care ea însăși scrie codul corect.