Marcado del grupo VKontakte. Cómo hacer un menú VKontakte. Guía completa. ¿Qué deben hacer aquellos que no saben trabajar en Photoshop?

Creo que todos los que usan activamente red social En VKontakte, ya me encontré con grupos y páginas públicas bellamente diseñadas. Muchos de ellos, además del menú, también tienen muchas subpáginas estilizadas, catálogos, etc., lo que esencialmente crea un pequeño sitio web dentro de la red social.

A continuación se muestran algunos ejemplos para que todos entiendan de qué estamos hablando.




Estos grupos le permiten destacarse entre sus competidores y atraer más usuarios. Especialmente si el contenido también es interesante :)
En este artículo hablaremos sobre cómo se hace todo esto. Para analizar todo con más detalle y profundizar en todas las sutilezas, tomemos ejemplo concreto. Habrá una pequeña clase magistral sobre diseño de grupos.

La primera etapa de nuestro trabajo es la idea. Necesitamos entender qué queremos contar y a quién. Hay varios formatos de comunidad en VKontakte y debes elegir según tus objetivos. Aunque en el futuro el grupo podrá trasladarse a un formato público y viceversa.

Le explico con los dedos. Público- Esto es algo así como un blog. Servicio de noticias. Es decir, les contamos a nuestros suscriptores ciertas cosas y no podrán escribir en el muro de nuestra comunidad. Lo máximo es comentar.

Grupo le permite crear una comunidad más abierta a la conversación y el debate, donde las personas pueden realizar publicaciones en el feed en su propio nombre. También puedes agregarle amigos de tu lista. No existe tal opción en público. Además, hay pocos en el grupo. más posibilidades sobre la integración del marcado wiki (hay una sección de "Noticias" en la que puede integrar un menú).

Globalmente, podemos pensar así: si necesitamos crear una comunidad para una tienda, entonces elegiría el formato "público". Si estamos hablando de, por ejemplo, sobre los amantes de la pesca, es mejor llevar un “grupo”. Aunque, cada uno es libre de hacer lo que crea conveniente. Después de todo, el formato se puede cambiar en cualquier momento. Sin embargo, tenga en cuenta que VKontakte introduce una restricción para cambiar el formato de la comunidad nuevamente y después de la primera vez deberá esperar varios días hasta que pueda devolver todo si es necesario. Por lo tanto, es mejor probar la funcionalidad antes de que el grupo comience a llenarse de contenido.

En esta master class tomaré el juego como punto de partida. loco max basado en la película del mismo nombre, que salió hace apenas un par de semanas y creará una comunidad para jugadores con varios materiales para este juego. El objetivo principal es atraer tráfico a su sitio de juegos.

El formato será “Grupal”, ya que es necesario crear una afluencia natural de audiencia y maximizar la comunicación dentro de la comunidad. Permítanme aclarar de inmediato que utilizaré una técnica universal que se puede utilizar tanto en formato grupal como en público. Esto funciona en todas partes.

Hay mucho contenido, ¡comencemos a darle vida a la idea!

Crear un grupo

Para crear un grupo, vaya a "Mis grupos" en el menú derecho de su cuenta VKontakte y haga clic en el botón azul en la parte superior "Crear una comunidad".

Debería aparecer una ventana como esta, donde ingresamos el nombre de nuestro grupo y seleccionamos el formato.

Al entrar información necesaria El panel de control de nuestra comunidad se abre frente a nosotros. En mi caso se ve así.

Como puede ver, agregué algunos parámetros: incluí video, grabaciones de audio, discusiones y una serie de otras funciones que me serán útiles en trabajo adicional al recopilar contenidos. Todo esto se puede cambiar en el futuro sin restricciones. También anoté la dirección de mi sitio web. Si no tienes un sitio web, o su temática no se corresponde con el formato de la comunidad (son sobre cosas diferentes y no están relacionados entre sí de ninguna manera), entonces esta línea se puede dejar en blanco.

Establecí restricciones de edad en en este caso a partir de 18, similares a los que los desarrolladores establecieron para el juego. Aunque tengo pocas dudas de que los niños también juegan.

Todo. ¡El grupo ha sido creado!

Ahora puedes empezar a diseñarlo.

Formatear un grupo VKontakte

Esta etapa se puede dividir en 2 componentes: gráfica y técnica. Para trabajar, necesitamos una plantilla para crear un avatar y un menú grupal, así como un poco de imaginación y conocimientos basicos Photoshop (también conocido como Adobe Photoshop).

Plantilla de marcado

¿Qué es una plantilla y qué es? Una plantilla es una especie de espacio en blanco. En este caso, en *. formato psd Hemos marcado áreas para la imagen debajo del menú y el avatar del grupo.

Como puedes ver en el segundo ejemplo al principio de este artículo, podemos hacer el diseño en estilo uniforme para avatar e imagen de menú. Al mismo tiempo, se corta visualmente en 2 partes. Entonces, la plantilla le permite formar una imagen de tal manera que se elimine el desplazamiento de los gráficos y ajuste las imágenes al mismo nivel tanto como sea posible.

Para que quede más claro, aquí tienes un ejemplo.

Vemos que en ambas partes de la imagen hay una franja que da a una zona residencial. Sin utilizar una plantilla, es casi imposible hacerlo exactamente la primera vez. Deberá ajustar las imágenes, midiendo discrepancias de hasta 1 px. Mientras que cuando usamos una plantilla, simplemente le agregamos gráficos dentro del marcado e inmediatamente obtenemos el resultado deseado.

Me gustaría señalar que esta plantilla diseñado para 1 línea en la explicación. En la captura de pantalla de ejemplo hay teléfonos. Si aparece una segunda línea, deberá utilizar una plantilla diferente o corregir el diseño manualmente.

Mientras tanto, procedemos directamente a diseño grafico su nuevo grupo. Aquí elijo el camino de menor resistencia y voy al Imágenes de Google. También puedes utilizar Yandex. ¿A quién le gusta qué más?

No tengo estudios de diseño, por lo que no nos detendremos en detalles sobre la elección de fuentes y otros detalles. Después de hacer un poco de magia en Photoshop, obtuve este resultado.

En el fragmento de la izquierda (donde dice “Menú”) también puedes agregar varios activadores. En este caso decidí prescindir de ellos. Todo. El diseño del avatar está listo. En Photoshop, presione la combinación de teclas de acceso rápido Shift+Ctrl+Alt+S y guarde nuestros fragmentos en una carpeta en su disco duro.

Se completa la primera etapa de trabajo con gráficos. Volvamos a estar en contacto.

Configurar un avatar y un menú para un grupo

Hacemos clic en los dos tipos en lugar del ava de nuestro grupo y cargamos nuestra imagen allí. Estos muchachos, debajo de ellos también dice "Subir una foto".

Añade una imagen. Especifique los campos y seleccione una miniatura. Aquí todo es sencillo y no debería haber problemas.

Como podemos ver, es necesario conocer la identificación de la comunidad. Es muy fácil reconocerlo. Busque el menú en su grupo (inmediatamente debajo del avatar) y abra "Estadísticas de la comunidad". En este caso aparecerá algo similar en la barra de direcciones del navegador (los números serán diferentes).

Estos números después de “?gid=" son la identificación del grupo deseado. Pegamos el valor resultante en el formulario del script y escribimos el nombre de la página que queremos crear. En este caso, escribo "Menú".

Vale la pena señalar que la página solo se creará si la ventana con el grupo está abierta en la pestaña adyacente. En pocas palabras, debe iniciar sesión en VK en el mismo navegador. Al fin y al cabo, sólo el administrador del grupo y las personas designadas por él tienen acceso a dichas manipulaciones. Un transeúnte aleatorio no podrá cambiar fácilmente la configuración de un grupo al que no tiene acceso al panel de administración.

Si todo se hace correctamente se abrirá una página como esta.

Esta es la misma ventana donde haremos marcado wiki un poco más tarde y crearemos menú interno para tu grupo. Por ahora, todo lo que tenemos que hacer es escribir algo aquí. Luego haga clic en el botón azul "Guardar página" y haga clic en el enlace Volver a la página en la parte superior.

Escribí "Menú" y mi página después de guardar comenzó a verse así.

Aún no hay diseño, pero ahora sólo necesitamos un enlace a esta página. Lo tomamos en la barra de direcciones del navegador y volvemos a pagina de inicio nuestro grupo. A la alimentación.

Aquí creamos una publicación con el siguiente contenido: inserte una imagen y un enlace a la página del menú del grupo.

Haga clic en enviar. Luego haga clic en la hora en que se envió el mensaje y seleccione “Fijar” entre todas las opciones. Actualizamos la página (tecla F5 del teclado) y, si todo se hace correctamente, obtenemos el primer resultado: el grupo ha encontrado un avatar y un enlace para ir a la sección del menú.

Marcado Wiki para el menú del grupo VKontakte

Ahora comencemos a diseñar el menú en sí. Vayamos nuevamente a Photoshop y creemos un diseño para nuestro menú. Al diseñar la interfaz, debe recordar a aquellas personas que accederán a VK a través de la aplicación con teléfonos móviles. Es decir, no debemos tener elementos pequeños y, además, debemos intentar que todo sea lo más claro posible. Para que no tengamos que adivinar cómo funciona todo aquí y dónde debemos hacer clic... sino simplemente señalar artículo deseado y estudia la información que buscas.

No entraré en detalles ahora sobre cómo preparé exactamente el menú. Esto es lo que tengo.

Campos mínimos. Diseño vertical. Formato ideal para menú adaptativo. Es decir, nada irá a ninguna parte en los teléfonos móviles. Todo será exactamente como en las pantallas de ordenadores y tablets. Tomo el ancho a 500 px, para que luego nada se encoja y no pierda la calidad de la imagen dos veces. La altura no es importante.

Cortamos la imagen en fragmentos y los guardamos.

Todo. Ha llegado el momento del acorde final: estamos recopilando el menú en el propio grupo.

Para hacer esto, volvemos a la página principal del grupo (donde está el feed y nuestro enlace de imagen que conduce al menú). Hacemos clic en la imagen del menú y llegamos a la misma página que creamos previamente para el menú.

Si es administrador o creador de un grupo (en nuestro caso, este es el caso), en la parte superior de la página habrá un enlace "Editar". Hagamos clic en él.

Luego vamos al modo de marcado wiki (debajo del botón de cerrar en la esquina superior derecha de la página hay un marco con<>adentro). Cuando modo deseado activado, este botón delineado en gris.

Luego hacemos clic en el icono de la cámara y agregamos todos los fragmentos de nuestro menú a la vez. En modo wiki, no veremos las imágenes en sí, solo el código de estas imágenes con dimensiones y parámetros.

Quiero colocar el menú en el centro y que no queden espacios entre los fragmentos. Por lo tanto, envolvemos cada uno de los elementos en una etiqueta.

y al parámetro ya anidado “noborder” le agrego el segundo parámetro “nopadding”. El primero desactiva el contorno de los fragmentos y los bordes de las celdas de la tabla. El segundo elimina los márgenes del borde.

primero y últimos elementos Los menús no deberían ser botones; en mi imagen son solo elemento grafico sin un enlace a la página interna, por lo que les agregamos el parámetro “nolink”. Esto eliminará la opción de hacer clic en este elemento abrir en ventana separada pedazo de la imagen. Ahora no pasará nada con un clic del mouse. Este fondo normal páginas. Inactivo.

En mi caso, el código del menú se ve así.

Por otra parte, me gustaría señalar el hecho de que después de importar imágenes a VK, el sistema integrado a veces indica incorrectamente los tamaños de las imágenes. Por lo tanto, debemos controlar esto cuidadosamente y mostrar exactamente lo que planeamos en la etapa de diseño. De lo contrario, todo puede desmoronarse y el rompecabezas no se resolverá al final.

Cuando hayamos escrito el código y alineado todos los elementos, guardamos la página y vemos lo mismo que había en Photoshop.

Queda el toque final: necesitamos crear las mismas páginas a las que nuestro menú enviará a las personas. Para hacer esto, volvamos al script para generar páginas wiki y esta vez ordenemos tres páginas a la vez. En este caso, también es necesario escribir algo en cada uno y no olvidar guardar sus direcciones en algún lugar de barra de direcciones navegador.

Luego insertamos enlaces a páginas nuevas en el código wiki del menú en el formulario página-102302049_51013384, donde el primer número es la identificación del grupo y el segundo es el número de página. Aunque, en general, esto no es importante. Después de todo, sólo necesitamos copiar este fragmento de URL y pegarlo en el marcado.

Como resultado, el código del menú toma la siguiente forma.

Exteriormente nada ha cambiado. Pero cuando hacemos clic en los elementos del menú, ¡podemos ver que ahora funciona!

En cuanto al marcado en sí y las reglas según las cuales se escribe el código, le aconsejo que lea el grupo VKontakte dedicado específicamente a este tema. Los chicos describieron todo. puntos clave y en su catálogo podrás encontrar fácilmente elemento necesario y descubre cómo agregarlo a tu página wiki.

Cada usuario red social VKontakte conoce la posibilidad de crear grupos, pero pocas personas saben cómo pasar de un grupo de este tipo a la creación de un sitio web. De hecho, todo lo que se requiere de usted es comprender el marcado wiki de VKontakte y, por supuesto, la capacidad de usarlo.

¿Qué es el marcado wiki en VKontakte?

El marcado Wiki es lenguaje especial para el registro paginas web de informacion en el grupo que creaste. El marcado Wiki se considera una herramienta valiosa porque con su ayuda puede crear menús, etiquetas, tablas, además organizar la estructura de los elementos de navegación para mover objetos en un grupo y generar texto.

¿Por qué necesitas el marcado wiki?

Este marcado wiki juega un papel importante en el diseño del grupo, porque cualquier edición se realiza con su ayuda. Por ejemplo, decidiste crear un grupo para ganar dinero programas de afiliados, que ahora son muy populares.

Y aquí se abren ante el usuario. posibilidades ilimitadas, pero lo más pregunta principal Lo que a la gente le parece atractivo y correctamente diseñado para atraer clientes.

Diseñar un grupo usando el marcado wiki

Me gustaría señalar de inmediato que el sistema de edición de marcado wiki es muy similar al diseño HTML.

La principal ventaja marcado wiki es que cualquiera, incluso un usuario de red no muy “avanzado”, puede estudiarlo.

Además, una de las ventajas de este marcado wiki es que tiene en cuenta todos los cambios de página, por lo que puedes comparar 2 ediciones diferentes, lo que te permite elegir una mejor opción. Todas las páginas afectadas por cambios los muestran inmediatamente.

¿Cómo aprender el lenguaje de marcado wiki y aprender sobre todas las pequeñas cosas?

En Internet encontré muy instrucciones detalladas en el que se describen todos los detalles de la creación páginas wiki, desde insertar video y audio, hasta trabajar con enlaces y tablas. esta instrucción en formato Ayuda de Windows, lo que significa que cualquier computadora lo abrirá.

Cómo crear páginas

Una página es un elemento de Internet que contiene información para la visualización general de los usuarios.

La página se genera automáticamente cuando especifica el texto:
[[Título del artículo]] o [[Título del artículo|texto del enlace]]

Los textos se presentan en páginas mediante etiquetas.

Si este artículo te ayudó o te gustó, no lo olvides dale tu me gusta, esto ayudará a que otros usuarios lo encuentren más rápido. ¡Y puedo descubrir qué es lo que más te interesa para preparar y escribir artículos aún más interesantes y útiles! Saludos cordiales, Viacheslav.




Arriba