Blog

Conoce las últimas novedades sobre todo lo relacionado con el mundo online.

Información útil sobre todo lo que te interesa, desde las mejores herramientas de desarrollo a las últimas tendencias en redes sociales. Si no te enteras es porque no quieres.

Campos personalizados en formularios de edición para Prestashop 1.7

Prestashop

En este artículo vamos a hablar sobre la creación de módulos en Prestashop 1.7 y más concretamente hablaremos sobre la creación de campos personalizados en formularios de edición. Cuando estamos creando módulos en Prestashop, la creación de formularios de edición es fundamental, ya que mediante esta edición podemos interactuar con los datos que guardamos: leerlos, actualizarlos… Para la creación de formularios de edición en Prestashop, necesitamos utilizar la clase HelperForm. Esta clase nos ofrece unos tipos de campos concretos: ‘text’, ‘select’, ‘textarea’, ‘radio’, ‘checkbox’, ‘file’, ‘shop’, ‘asso_shop’, ‘free’, ‘color’. Esta sería una declaración de campo básico, campo de texto, para un formulario de edición: [crayon-673ef2b35dc2a554060107/] Pero además de crear campos básicos, puede que necesitemos crear algún tipo de campo especial, que podamos personalizar, para que trabaje de una forma concreta… distinto a los que Prestashop nos ofrece por defecto. Esto se realizaría de la siguiente forma para módulos creados utilizando “Modelo – Vista – Controlador”. La estructura MVC se encarga de separar la lógica de negocio de la interfaz de usuario, para seguir esta estructura en la creación de módulos, tendremos que crear las siguientes carpetas dentro del módulo: mimodulo/models mimodulo/views/templates/admin/_configure/helpers/form mimodulo/controllers/admin El ejemplo que vamos a mostrar, crea un campo personalizado, que nos servirá para seleccionar artículos con un ‘autocomplete’ y retornarlos en el mismo campo personalizado, para posteriormente excluirlos en un proceso concreto. Sigue estos sencillos pasos: 1.- Dentro de la carpeta del controlador (mimodulo/controllers/admin/AdminAvanzaTestController.php), donde creamos el formulario de edición, introducimos el siguiente código: [crayon-673ef2b35dc31672343921/] Este código nos crea un campo llamado AVANZA_TEST_PERSONALIZADO, el cual vamos a personalizar en el siguiente paso. 2.- Dentro de la carpeta de vista (mimodulo/views/templates/admin/_configure/helpers/form/form.tpl) introducimos el siguiente código, que será el que nos dé los datos a mostrar y la funcionalidad autocomplete del campo. [crayon-673ef2b35dc34226971989/] 3º.- El tratamiento de estos datos se realizaría de nuevo en la carpeta del controlador (mimodulo/controllers/admin/AdminAvanzaTestController.php). Introducimos el siguiente código: [crayon-673ef2b35dc37552020638/] De esta forma hemos conseguido crear un campo de una forma y características concretas… y de forma relativamente sencilla. Al igual que hemos creado este campo, podemos crear cualquier otro campo que necesitemos dándole las características y funcionamiento necesarios.

Más info

Tamaño de las imágenes para Redes Sociales en 2018

tamaños redes sociales

El modo en el que se publican las imágenes en Redes Sociales es muy importante. Además de utilizar imágenes que llamen la atención de los seguidores, que a su vez son clientes potenciales, se debe utilizar un formato adecuado para que las imágenes no se muestren ni deformadas, ni pixeladas. También es primordial saber que cada red social tiene sus propios parámetros a la hora de instaurar los tamaños de las imágenes. ¿Quieres saber con qué medidas puedes publicar en cada red social? Te lo cuento aquí abajo. Conoce como debes publicar las imágenes en las principales redes sociales Facebook Facebook es una de las redes sociales más popular en el mundo. Hay que saber diferenciar entre un perfil personal y una fan page. El perfil personal se utilizada de forma individual y el usuario agrega a los contactos que considera adecuados. Sin embargo la fan page tiene un uso profesional. En ella se consiguen seguidores y se crean comunidades para dar a conocer tu marca, producto o negocio. Tamaños de las imágenes en un perfil personal: – Fotografía de perfil: 180 x 180 px. – Fotografía de portada: 851 x 315 px. Tamaños de las imágenes en una fan page: – Fotografía de perfil: 180 x 180 px. – Fotografía de portada: 851 x 315 px. – Video de portada: 820 x 462 px. – Publicaciones cuadradas: 1200 x 1200 px. – Publicaciones horizontales: 1200 x 630 px. – Fotografías con enlace compartido: 1200 x 628 px. Imágenes para Facebook Ads: – Secuencia: 1080 x 1080 px – Interacción con la publicación: 1200 x 444 px. – Me gustas de la página: 1200 x 628 px. Versión móvil: – Imagen de perfil: 32 x 32 px. – Imagen de portada: 560 x 315 px. Instagram Instagram es la red visual por excelencia. A través de ella los usuarios suben fotos inspiradoras de su día a día. Existe la posibilidad de crear un perfil de empresa en el que poder publicar los productos o servicios que vendes y en el que, a diferencia del perfil personal, puedes consultar estadísticas sobre visitas, segmentación demográfica o impresiones. Los tamaños de las imágenes en esta red son los siguientes: – Imagen de perfil: 180 x 180 px. – Foto cuadrada: 1080 x 1080 px. – Imagen vertical: 1080 x 1350 px. – Fotos horizontales: 1080 x 566 px. – Tamaño videos: 640 x 640 y una duración máxima de un minuto. – Instagram Stories: 1080 x 1920 px. – Instagram Ads (secuencia de imágenes): 1080 x 1080 px. Twitter En Twitter existe mucha menos variedad de tamaños que en Facebook o Instagram a la hora de publicar imágenes con el tamaño adecuado. A continuación te doy algunas medidas para que tu perfil quede visualmente perfecto.- Tamaño imagen de perfil: 400×400 px. – Tamaño imagen de portada: 1500 x 500 px. – Tweet con imagen: 1024 x 512 o 600 x 225 px. – Tweet con enlace: 440 x 220 o 400 x 400 px. LinkedIn Es una red social profesional muy útil para hacer networking con personas que se dedican a tu mismo sector y también con perfiles profesionales de los que necesitas servicios. En el Blog de Isidro Pérez podrás conocer mucho más sobre LinkedIn. Tamaños imágenes perfil personal: – Foto de perfil: 400 x 400 px – Foto de portada: 1584 X 396 px Tamaños imágenes perfil de empresa: – Tamaño logotipo: 300 x 300 px – Tamaño portada: 1536×768 px – Post imágenes: 520 x 320 px – Post con enlace: 520 x 272 px YouTube A través de YouTube se pueden subir videos. Dentro de la red social se pueden ver clips y vídeos sobre una gran variedad de temáticas. Las empresas utilizan la red social para publicar videos tutoriales, con el funcionamiento de los productos, explicando servicios y otras muchas cosas. A continuación te cuento cuáles son los tamaños que se deben utilizar en las imágenes para YouTube. El tamaño de foto de perfil y de portada es el mismo que en Google+.- Tamaño foto de perfil: 800 x 800 px – Foto de portada: 2560×1440 px – Imagen miniatura:1280×760 px

Más info

Claves para construir una marca a través de la comunicación

Claves para cerar una marca con la comunicación

Uno de los errores más frecuentes que suelen cometer los ecommerce y los negocios online es pensar que la comunicación en el mundo digital sirve para poco. La página posiciona bien, hay visitas suficientes y los precios están lo más ajustados posible. ¡No necesito nada más! Puede ser, pero depende mucho de los objetivos que te hayas fijado y de cuál es tu modelo de negocio. Hace poco, un cliente nos planteaba la siguiente pregunta: ¿qué diferencia hay entre una tienda online común y una marca que vende en Internet? La respuesta está en cómo comunica cada una. La marca es un concepto integral que engloba la comunicación en todos los niveles: desde el copywriting, hasta el Social Media y la propia plataforma online, y cómo no, la imagen corporativa (logos, manual de identidad corporativa). En este artículo resumimos las principales claves para construir una marca con la comunicación y cómo este cambio puede hacer que su empresa suba un escalón en el mercado. Precio vs Marca Muchos modelos de negocio digitales comienzan con una simple tienda online donde vender productos, compitiendo principalmente por precio. En poco tiempo, el fabricante se da cuenta de la enorme presión sobre los precios que existe en el canal digital, y la alta competencia que hay en el segmento de mercado más “low-cost”. Llega un momento en que empieza a plantearse la posibilidad de cambiar de modelo, de captar a un cliente con más poder adquisitivo y de comercializar un producto con más calidad. En definitiva, quiere buscar un modelo de negocio en el que el precio no sea la principal propuesta de valor. ¿Cómo se hace este cambio? La respuesta es creando una marca. ¿Y cómo se crea una marca? Se hace cambiando la comunicación global del negocio. Los conceptos “precio más bajo” , “oferta”, o “gratis” desaparecen y en su lugar empezamos a trabajar con otros como “calidad”, “atención al cliente”, “confianza” y “servicio”. Plan de Marketing y Comunicación Para construir una marca, se debe trabajar con una estrategia integral basada en un benchamark (análisis completo) de la competencia y unos objetivos claros de comunicación. Todo esto se plasma en un documento que será la clave de todo el trabajo: el Plan de Marketing Digital y Comunicación. En este plan se analiza el mercado y la competencia, se estudia y se describe a los clientes potenciales de la nueva marca, y se establecen los objetivos concretos y los canales de comunicación digital donde ésta tendrá presencia. No lo dudes: una estrategia de marketing digital y comunicación perfectamente planificada y bien ejecutada es lo que diferencia a una marca de un simple tienda online. Estrategia de comunicación a largo plazo Muchos negocios online de los que vemos aparecer hoy en día, tienen poco recorrido. Están pensados para copar un nicho de mercado concreto y generar ventas y beneficios en poco tiempo. La marca tiene una visión más “largoplacista” de su negocio, y también de la comunicación. Sus planes de marketing suelen plantearse a dos años vista, y las acciones comunicativas van dirigidas no sólo a vender, sino también a fidelizar al cliente y a consolidar su posición en el mercado. La marca tiene paciencia, y sabe que los resultados requieren de tiempo. Esto se refleja en todo lo que comunica y en cómo plantea su estrategia de inversión publicitaria, que es más prolongada en el tiempo y se basa no sólo en las ventas, sino también en el branding. El cliente como centro de todo Otra gran diferencia entre una marca y un ecommerce que no trabaja la comunicación es la posición en la ponen al cliente dentro de su estrategia. La marca siempre tiene al consumidor en el centro de su visión de negocio. Todo su trabajo, su comunicación y sus objetivos, están pensados para satisfacer al cliente y cubrir sus necesidades. La marca cuida al máximo la atención al cliente, tanto en la web como en las plataformas sociales; no le habla sólo de sus productos, sino también de temas que la interesan y de información que puede serle de utilidad; muestra sensibilidad y tiene una RSC muy fuerte; y le pide opinión y le hace partícipe de sus decisiones. En definitiva: le convierte en un prescriptor de marca. Las marcas más consolidadas del mercado estudian a su cliente en profundidad, conocen sus necesidades, sus intereses, sus motivaciones y por qué les compra. Por eso, todas las acciones comunicativas son mucho más efectivas. ¡El conocimiento es poder! Creatividad y Copywriting Para construir una marca es esencial el aspecto creativo de la comunicación. El departamento de Diseño Gráfico y los redactores de content marketing -los copywriters-, trabajan conjuntamente para crear unos contenidos coherentes con la personalidad y la imagen de la marca, y que además sean atractivos para el consumidor. Como la marca tiene un conocimiento tan completo de su target, sabe perfectamente qué tono de comunicación es el más adecuado, qué imágenes le impactan más y cómo utilizar el marketing emocional con él -hablaremos en otro post sobre esta rama del marketing-. Todos los textos y recursos gráficos que utiliza la marca están pensados para establecer una relación de confianza con su target. Desde los los artículos del Blog, hasta los posts en las redes sociales, los anuncios publicitarios y los textos de la propia tienda online. Descubre aquí por qué la marca sí importa ¿Quieres saber más sobre cómo construir una marca a través de la comunicación? ¿Quieres crear una marca para tu negocio online o mejorar la que ya tienes? Avanza Soluciones de Comunicación somos una agencia de marketing digital y desarrollo web especialista en comunicación para negocios digitales y en la creación de marcas. Descubre todo lo que el marketing online y la comunicación digital puede hacer por tu empresa.

Más info

Bootstrap 4 o cómo maquetar una web fácilmente

modal bootstrap

¡Por fin! Ya está disponible  Bootstrap 4. El 18 de Enero fue el día de lanzamiento, no más alphas (versiones de prueba). ¿Qué es Bootstrap 4?: Es un framework para web o conjunto de herramientas de código abierto para poder maquetar y diseñar páginas y aplicaciones web adaptadas a cualquier dispositivo (sobremesa, portátil, tablet y móvil). Entre otros muchos elementos dispone de menús de navegación, formularios, botones, modals, barras de progreso…. y otros componentes basados en HTML y CSS que incorporan JavaScript para realizar todas las funcionalidades. Algo de Historia: Bootstrap «nació» en las instalaciones de Twitter en el año 2011 y rápidamente se extendió su uso dada su simplicidad, gran utilidad y coste 0. Ya es uno de los frameworks más utilizados por los desarrolladores web y todo indica que seguirá siéndolo. Fue a partir de la versión 2.0 cuando se incorporó el diseño responsivo a Bootstrap, y en agosto del 2013 se lanzó Bootstrap 3, muy vigente a día de hoy. Características principales: Código abierto: es una política que mantienen desde la versión 1, Bootstrap es una herramienta gratuita y accesible para todo el mundo. Documentación y aprendizaje: dispone de una documentación amplia, bien organizada y con multitud de ejemplos. La curva de aprendizaje es moderada, en poco tiempo se podrá sacar partido a todo lo que ofrece. HTML5 y CSS3: incorpora las últimas versiones de HTML y CSS. Optimización: todo el código que usa está optimizado para que la web que lo usa cargue rápidamente. Sistema de Grid: Divide la página en una rejilla de 12 columnas, permitiendo adaptar el contenido a cualquier tipo de diseño. Componentes: añade una gran cantidad de elementos de fácil instalación que permiten ampliar los diseños fácilmente: menús desplegables, botones, iconos, ventanas emergentes, cards… Compatibilidad: Bootstrap es compatible con los principales navegadores actuales: Google Chrome Safari Mozilla Firefox Microsoft Edge. No soporta Internet Explorer 9 o anteriores (¡ya era hora!) Opera Sass (o Syntactically Awesome Style Sheets): SASS es un preprocesador de CSS, permitiendo convertir las hojas de estilo en algo dinámico. Podemos crear funciones con código matemático y reutilizar código a través de los mixins, variables que guardan determinados valores que repetiremos en todo nuestro código.   Principales diferencias entre la versión 3 y la 4: https://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm

Más info

Contáctanos
966 27 81 05 info@avanzaeninternet.com
O si lo prefieres
Visítanos
C/ Gabriel Miró 45, 3º I 03420 Castalla (Alicante)
de lunes a jueves de 9:30 a 14:00 h. de 15:00 a 18:00 h.
viernes de 9:00 a 14:00 h.
Nuestras Redes Sociales