<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>Brandpetram</title>
        <description>Blog sobre Desarrollo de Marcas y Negocios, Marketing Digital y Tecnología Web</description>
        <link>https://brandpetram.com/blog/</link>
        <atom:link href="https://brandpetram.com/blog/feed.xml" rel="self" type="application/rss+xml"/>
        <pubDate>Tue, 08 Aug 2017 22:33:12 -0500</pubDate>
        <lastBuildDate>Tue, 08 Aug 2017 22:33:12 -0500</lastBuildDate>
        <generator>Jekyll v3.3.1</generator>
        
            <item>
                <title>Un logo para conquistar el mercado del arte en México</title>
                <description>&lt;p&gt;Las empresas más exitosas poseen algo en común: una sútil relación matemática que se expresa visualmente en su logo.  Apple, Pepsi, Mercedez-Benz lo tienen. Hoy registramos ante el IMPI un logo  basado en una relación matemática para uno de nuestros clientes.&lt;/p&gt;

&lt;!--more--&gt;

&lt;p&gt;Para que tu nicho de mercado logre identificarse con tu marca, debe existir una relación matemática armónica en tu logo, porque el subconsciente humano tiende a sentirse atraído por dicha armonía. El logo de Apple, Twitter, e incluso formas naturales como las flores siguen un patrón llamada propoción áurea. En la oficina creamos un logo para una nueva marca basándonos en dicha relación.&lt;/p&gt;

&lt;h3&gt;Desentrañando el problema y haciendo la lista de criterios.&lt;/h3&gt;

&lt;p&gt;El problema a resolver era como crear un logo que atrajera a las personas que aprecian las obras de arte en México, especialmente los cuadros. Desde el principio nos planteamos que lo lógico era que el logo mismo fuera una especie de obra de arte. De esta forma el nicho de mercado se sentirá identificado.&lt;/p&gt;

&lt;p&gt;Por su uso de colores vivos y diseños simples, decidimos inspirarnos en el éstilo del famoso artista Ellsworth Kelly -recien fallecido el año antepasado-. Así fuimos creando nuestra lista de criterios.&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;Nos gusta ir más allá, por eso decidimos crear un logo simple, colorido, memorable, original, que utilizara la armonía de la proporción aurea y por si fuera poco que fuera una obra de arte.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;Construyendo el logo con la proporción áurea&lt;/h3&gt;

&lt;p&gt;Para el emblema utilizamos figuras geométricas que representan obras de arte colgadas en una pared. Sin embargo al mismo tiempo este asemeja una obra de arte en sí. De esta forma las personas que aman el arte pictórico pueden admirar este logo por su original diseño, mientras se sienten identificados, tanto por su belleza y simpleza como por su relación armónica.&lt;/p&gt;

&lt;h5&gt;En esta imagen podemos ver como fuimos construyendo el logo según la proporción áurea.&lt;/h5&gt;

&lt;p&gt;&lt;img src=&quot;/blog/images/posts/just-art-grid.png&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Una vez alcanzadas las formas deseadas, los colores elegidos para el logo debían ser colores vivos que representaran la libertad de expresión que tiene un artista al pintar un cuadro. Debían ser brillantes y llamativos para captar la atención del público e invitarles a verlo como si se tratara de una obra de arte, de las que aprecián en las galerías.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/images/posts/just-art-emblema.png&quot; /&gt;&lt;/p&gt;

&lt;p&gt;La tipografía que utilizamos para el logo es una tipografía serif moderna que se relaciona con lo tradicional y con un estilo más antiguo. La intención es crear un balance con el modernismo expresado en el emblema, logrando un equilibrio entre lo tradicional y ese eterna actualidad del ser, expresada
en la belleza del arte.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/images/posts/just-art-tipografia.png&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Estamos orgullosos de este logo. Estamos convencidos que logrará su objetivo, esto es situarse memorablemente en la mente de las personas que pertenecen a este nicho de mercado, por su originalidad, belleza y simpleza, y porque utiliza proporciones matemáticas para crear una armonía visual.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/images/just-art-fast.gif&quot; /&gt;&lt;/p&gt;
</description>
                <pubDate>Thu, 30 Mar 2017 00:00:00 -0600</pubDate>
                <link>https://brandpetram.com/blog/2017/03/30/un-logo-para-conquistar-el-mercado-del-arte-en-mexico/</link>
                <guid isPermaLink="true">https://brandpetram.com/blog/2017/03/30/un-logo-para-conquistar-el-mercado-del-arte-en-mexico/</guid>
                
                <category>branding</category>
                
                <category>logos</category>
                
                <category>IMPI</category>
                
                
            </item>
        
            <item>
                <title>Emprendiendo y manteniendo un negocio rentable</title>
                <description>&lt;p&gt;Necesitas crear un gran y exitoso negocio que domine el mundo - perdón, el mercado -
porque tu -mexicano del siglo XXI-, naciste para triunfar. Si no te ha tocado aprender
la experiencia de otros a través del ejemplo o de los libros, (porque eres muy floj@ para leer) poco después de que comienzes tu negocio te darás cuenta que no solo necesitas una buena idea y las competencias técnicas que se necesitan para producir un buen producto o servicio, sino que también necesitaras -todos los días- una combinación de habilidades como: diciplina; trabajo duro; perseverancia; paciencia, saber como contratar y manejar personal y mucho apoyo de las personas cercanas a tí.&lt;/p&gt;

&lt;p&gt;Pero hay otra cosa importante (en realidad hay bastantes cosas importantes, pero no te asustes, y enfocate solo en lo siguiente).&lt;/p&gt;

&lt;p&gt;Considera los siguientes negocios:&lt;/p&gt;

&lt;!--more--&gt;

&lt;ul&gt;
  &lt;li&gt;Amazon&lt;/li&gt;
  &lt;li&gt;Apple&lt;/li&gt;
  &lt;li&gt;Disney&lt;/li&gt;
  &lt;li&gt;Nike&lt;/li&gt;
  &lt;li&gt;Mattel&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;¿Qué tienen en común? Que todas comenzaron en un garage. Esto obviamente no significa que tu tengas que hacer lo mismo. Ese no es el punto. El punto es que comenzaron en un garage evitando altos costos de oficinas sofisticadas.&lt;/p&gt;

&lt;p&gt;Los negocios exitosos que comienzan pequeños reducen sus costos al máximo y gastan únicamente en lo necesario. Gastan dinero solo en las cosas que importan realmente.
¿Importa más una campaña de marketing digital que tener sillas Herman Miller? ¿Importa más un sitio web bien hecho y posicionado que una oficina en un edificio prestigioso?
Estas son el tipo de preguntas que fundadores como Jeff Bezos fundador de Amazón ni siquiera tenían que hacerse porque de antemano sabían la respuesta.&lt;/p&gt;

&lt;h2&gt;Me da pena mi nueva empresa pequeña. Quiero un monstruo que pueda presumir&lt;/h2&gt;

&lt;p&gt;Que no te dé verguenza comenzar pequeño. Y tampoco debería darte verguenza querer tener una compañía con sólo 15 o 30 empleados. ¿En donde dice que tienes que tener una empresa del tamaño de Amazon para ser exitoso o féliz? Bueno ya nos estamos saliendo
un poco del tema. ¿Cual era? Ah si, comenzar pequeño enfocandose solo en lo esencial para reducir costos.&lt;/p&gt;

&lt;p&gt;Los fundadores que saben soñar pero al mismo timepo tienen los pies en la tierra valoran más la inovación y el desarrollo tecnológico que las “trampas del éxito”.
Viven frugalmente y toman muy poco de la empresa para sostener su estilo de vida.
Los ferraris y las villas en Miami Beach llegan bastante después. Generalmente después de haber sudado, sufrido y gozado un día si y otro día también en la mejora continua y construcción de tu empresa.&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;Comenzar pequeño no significa ser un conformista, significa comprender que
para crecer muchas veces es mejor hacerlo desde una posición sólida.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Dificilmente tendras éxito si para ti es más importante la apariencia de tu estilo de vida que la sustancia de los servicios y productos de tu negocio. Un fundador no
tiene horario no porque quiera trabajar menos, sino al revés, porque quiere y tendrá
que trabajar más duro que todos sus empleados, por lo menos un buen número de años.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://brandpetram.com/contacto.html&quot;&gt;&lt;img src=&quot;/blog/images/ads/ecommerce-desarrollo-tiendas-en-linea-todo-mexico.png&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Lo cual nos lleva a considerar lo siguiente: Enfocate en tu empresa en lo que tu eres mejor y deja a otros ocuparse de lo demás. Esto implica que debes conocerte a ti mismo. No todo mundo se conoce a si mismo. Lleva tiempo. Debes conocer no sólo para que eres bueno en tu negocio, sino para que eres MALO, y también, en que cosas eres excelente.&lt;/p&gt;

&lt;p&gt;Obviamente debes rodearte de gente que sea bueno en lo que tu eres malo pero lo más dificil va a ser que entiendas que debes permitir que otra persona que no es tan bueno como tu haga también esa tarea que tu haces bien. De manera que te enfoques SOLO en lo que eres excelente.&lt;/p&gt;
</description>
                <pubDate>Sat, 11 Mar 2017 00:00:00 -0600</pubDate>
                <link>https://brandpetram.com/blog/2017/03/11/emprendiendo-un-negocio-rentable/</link>
                <guid isPermaLink="true">https://brandpetram.com/blog/2017/03/11/emprendiendo-un-negocio-rentable/</guid>
                
                <category>negocios</category>
                
                
            </item>
        
            <item>
                <title>Nociones para cambiar estilos con métodos del DOM y JavaScript</title>
                <description>&lt;p&gt;El &lt;a href=&quot;https://en.wikipedia.org/wiki/Document_Object_Model&quot;&gt;DOM o Document Object Model&lt;/a&gt; (Modelo de Objetos del Documento) es una aplicación (API) para definir los documentos HTML, XHTML o XML, como una estructura de arbol lógico, donde cada nodo es un objeto que representa una parte
del documento y donde dichos objetos pueden ser manipulados para reflejar cambios
en la forma visual del documento. El DOM usualmente tiene muchas similitudes y puede ser casi identico a la estructura html (o XHTML o XML) del documento que modela.&lt;/p&gt;

&lt;p&gt;Pero no estamos aquí tanto para aburrir explicando que es el DOM sino para ver que es posible y de hecho muy sencillo usar [&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript&quot;&gt;JavaScript&lt;/a&gt;] para manipular el DOM con el objetivo de cambiar los estilos cuando se cumplen ciertas condiciones. Sólo toma en cuenta que es también posible hacer todo esto usando [&lt;a href=&quot;https://jquery.com/&quot;&gt;Jquery&lt;/a&gt;], aunque aquí nos enfocamos en
JavaScript puro porque a veces se puede trabajar en proyectos que no permiten ciertas
librerías.&lt;/p&gt;

&lt;h1&gt;1. getElementById&lt;/h1&gt;

&lt;p&gt;Veamos el siguiente Gist donde invocamos getElementById:&lt;/p&gt;
&lt;noscript&gt;&lt;pre&gt;
const UnaConstante = document.getElementById(&amp;quot;mi_elemento&amp;quot;);

//El elemento que accesamos también puede ser dinámico usando:
const UnaConstante = document.getElementById(MiElemento);
//Donde MiElemento será una constante definida en otro lugar.

&lt;/pre&gt;&lt;/noscript&gt;
&lt;script src=&quot;https://gist.github.com/lmuzquiz/37ef20ab2291915c74ff970cc9beb236.js&quot;&gt; &lt;/script&gt;

&lt;p&gt;En el código anterior nos valemos del método [&lt;a href=&quot;https://www.w3schools.com/jsref/met_document_getelementbyid.asp&quot;&gt;getElementById&lt;/a&gt;]
para localizar un elemento del DOM que posee cierto Id colocado
por nosotros en algun elemento HTML, por ejemplo un DIV.&lt;/p&gt;

&lt;p&gt;Una vez localizado dicho elemento del DOM este se almacena dentro de una variable o una constante que en el ejemplo anterior es llamada “UnaConstante”, de manera que através de dicha constante podamos acceder el objeto directamente.&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&quot;mi_elemento&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;Manipulando&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;el&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;DOM&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;De manera que si tuvieras un div como al anterior con
cualquier elemento HTML dentro podrías aplicar el siguiente
código para manipular dicho elemento div:&lt;/p&gt;

&lt;!--more--&gt;

&lt;h3&gt;Estilizando usando la propiedad style:&lt;/h3&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;  &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;script&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
       &lt;span class=&quot;nt&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;UnaConstante&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;.getElementById&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&quot;mi_elemento&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;
       &lt;span class=&quot;nt&quot;&gt;UnaConstante&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;.style.backgroundColor&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&quot;#2d2d2d&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt;
       &lt;span class=&quot;nt&quot;&gt;UnaConstante&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;.style.color&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&quot;white&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt;
       &lt;span class=&quot;nt&quot;&gt;UnaConstante&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;.style.padding&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&quot;50px 50px 50px 50px&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt;
   &lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;script&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;En este caso utilizamos la propiedad style para estilizar
el elemento, pero existen otras propiedades que habrímos
podido usar como veremos más adelante.&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;getElementById es una de las maneras más rápidas y eficientes
de acceder a cualquier elemento del DOM porque no puede haber
dos elementos que compartan el atributo de “id”. En el ejemplo anterior hemos visto como al localizar este elemento del DOM pudimos estilizarlo usando las propiedad style pero es posible usar otras propiedades como className&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;Estilizando usando la propiedad className:&lt;/h3&gt;

&lt;p&gt;Ahora ilustraremos que usando el mismo método [&lt;a href=&quot;https://www.w3schools.com/jsref/met_document_getelementbyid.asp&quot;&gt;getElementById&lt;/a&gt;] podemos estilizar utilizando una propiedad distinta.&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;style&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
     &lt;span class=&quot;nc&quot;&gt;.cool&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
         &lt;span class=&quot;nl&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;#333&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
         &lt;span class=&quot;nl&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;greenyellow&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
         &lt;span class=&quot;nl&quot;&gt;padding&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;100px&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
     &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
 &lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;style&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&quot;otro_elemento&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;Manipulando&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;el&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;DOM&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;con&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;className&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Notese como los estilos en el código anterior están asignados a una clase llamada .cool porque vamos a usar la propiedad className&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;  &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;script&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
     &lt;span class=&quot;nt&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;OtraConstante&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;.getElementById&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&quot;otro_elemento&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;
     &lt;span class=&quot;nt&quot;&gt;OtraConstante&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;.className&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;'cool'&lt;/span&gt;
  &lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;script&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
  &lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Lo que hace este código es agregar la clase “cool” al elemento del DOM
  que posee el id “otro_elemento” en este caso un DIV.&lt;/p&gt;

&lt;h1&gt;2. querySelector()&lt;/h1&gt;

&lt;p&gt;[&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector&quot;&gt;querySelector&lt;/a&gt;] regresa el primer elemento del nodo que concuerda con un selector o grupo de
selectores de tipo CSS.&lt;/p&gt;

&lt;p&gt;Tomemos el cuenta el siguiente HTML:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;style&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
     &lt;span class=&quot;nc&quot;&gt;.red&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nl&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;red&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;nl&quot;&gt;padding&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;10px&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;}&lt;/span&gt;
     &lt;span class=&quot;nc&quot;&gt;.blue&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nl&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;dodgerblue&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;nl&quot;&gt;padding&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;10px&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;}&lt;/span&gt;
     &lt;span class=&quot;nc&quot;&gt;.gray&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nl&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;dimgray&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;nl&quot;&gt;padding&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;10px&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;}&lt;/span&gt;
 &lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;style&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;

  &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;body&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
      &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
          &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;h1&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;Usando&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;h1&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
          &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;ul&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
              &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&quot;red&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;Primer&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;Elemento&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
              &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&quot;red&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;Segundo&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;Elemento&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
              &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&quot;red&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;Tercero&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;Elemento&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
              &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&quot;gray&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;Cuarto&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;Elemento&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
          &lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;ul&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
      &lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;body&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Y apliquemos el siguiente JavaScript:&lt;/p&gt;

&lt;noscript&gt;&lt;pre&gt;
&amp;lt;script&amp;gt;
    // querySelector regresa solamente la primer concordancia.
    const MiConstante = document.querySelector(&amp;#39;li.red&amp;#39;);
    MiConstante.className = &amp;#39;blue&amp;#39;;
 &amp;lt;/script&amp;gt;

  &amp;lt;script&amp;gt;
      // querySelectorAll regresa una lista de Nodos.
      // Aunque estrictamente hablando se especifica seleccionar
      // el segundo nodo, (con el num. 1) en este contexto en
      // realidad es el tercer elemento de la lista que se
      // termina seleccionado debido al query anterior.
      const MiConstante2 = document.querySelectorAll(&amp;#39;li.red&amp;#39;);
      MiConstante2[1].className = &amp;#39;blue&amp;#39;;
  &amp;lt;/script&amp;gt;

&lt;/pre&gt;&lt;/noscript&gt;
&lt;script src=&quot;https://gist.github.com/lmuzquiz/54667a2e7d7ae088b8436af2b3c2160e.js&quot;&gt; &lt;/script&gt;

&lt;p&gt;Vemos que además de querySelector tenemos [&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll&quot;&gt;querySelectorAll&lt;/a&gt;] que en lugar de retornar
un solo elemento más bien regresa una [&lt;a href=&quot;http://stackoverflow.com/questions/5501433/nodelist-object-in-javascript&quot;&gt;NodeList&lt;/a&gt;] que no es más que una colección de elementos DOM organizada de forma parecida a un arreglo. En otras palabras querySelectorAll regresa una lista de resultados.&lt;/p&gt;

&lt;p&gt;Es posible acceder a los nodos individuales utilizando la sintaxis de brackets cuadrados para acceder a los nodos individuales de entre la colección entera.
En el ejemplo anterior puede verse en la línea 15 que seleccionamos el segundo nodo de la colección utilizando el número 1 dentro de los brackets. Esto es porque en realidad la colección de nodos comienza desde el número 0.&lt;/p&gt;

&lt;h1&gt;3. getElementsByTagName&lt;/h1&gt;

&lt;p&gt;Con getElementById solo podemos acceder a un elemento del DOM, pero hay casos
en que deseamos acceder a varios elementos y de entre ellos solo seleccionar
algunos otros.&lt;/p&gt;

&lt;p&gt;Consideremos la siguiente lista en HTML:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;    &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
       &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;h1&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;Usando&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;getElementsByTagName&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;h1&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
       &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;ul&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
           &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&quot;gray&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;Uno&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;a&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&quot;#&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;CLIC&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
           &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&quot;gray&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;Dos&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
           &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&quot;gray&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;Tres&lt;/span&gt;
            &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;a&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&quot;link&quot;&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&quot;#&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;CLIC&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
           &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&quot;gray&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;Cuarto&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
           &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&quot;gray&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;Cinco&lt;/span&gt;
            &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;a&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&quot;link&quot;&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&quot;#&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;CLIC&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
           &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&quot;gray&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;Seis&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;a&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&quot;#&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;CLIC&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;

       &lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;ul&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
   &lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
   &lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Como puede verse el tercer y quinto elemento &amp;lt;li&amp;gt; de la lista poseen un
tag de tipo “a” con una clase llamada “link”.&lt;/p&gt;

&lt;p&gt;El siguiente código es sencillo y casi se explica por si mismo.Lo único que hace es utilizar el método [&lt;a href=&quot;https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByTagName&quot;&gt;getElementsByTagName&lt;/a&gt;] para encontrar un sólo elemento de una NodeList (en caso de que exista)
y cambia el estilo a dicho elemento.&lt;/p&gt;
&lt;noscript&gt;&lt;pre&gt;  
  &amp;lt;script&amp;gt;
      // Encontrar los elementos &amp;lt;li&amp;gt; y ponerlos en una variable
      var elements = document.getElementsByTagName(&amp;#39;li&amp;#39;);
      
      if (elements.length &amp;gt; 0) {  // Si más de uno es encontrado

          var el = elements[3];     // Selecciona el cuarto elemento de la colección
          el.className = &amp;#39;cool&amp;#39;;    // Cambia el valor del atributo clase
      }
  &amp;lt;/script&amp;gt;
&lt;/pre&gt;&lt;/noscript&gt;
&lt;script src=&quot;https://gist.github.com/lmuzquiz/824946e19b58ff49edff3170f611d42c.js&quot;&gt; &lt;/script&gt;

&lt;h3&gt;Repitiendo acciones en una NodeList&lt;/h3&gt;

&lt;p&gt;Pero a veces queremos verificar no un elemento como en el caso anterior sino todos los elementos de una NodeList de forma iterativa (repitiva). ¡Pues buenas noticias! Cuando tenemos una NodeList es muy fácil realizar loops en cada nodo de la colección
entera para aplicar ciertas acciones.&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;  &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;script&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
     &lt;span class=&quot;nt&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;UnaConstante&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;.getElementsByTagName&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&quot;a&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;
     &lt;span class=&quot;nt&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;i&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;i&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;UnaConstante&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;.length&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;i&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;++)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
       &lt;span class=&quot;err&quot;&gt;UnaConstante[i].style.backgroundColor&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;&quot;#00FF00&quot;;&lt;/span&gt;
      &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;script&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
   &lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;En el código de arriba creamos un LOOP usando un FOR para navegar por todos
los elementos de la NodeList. Y todos los statements que se encuentran dentro
de los curlybraces { } son aplicados a cada uno de los elementos de la NodeList
uno por uno. Para indicar cual elemento de la NodeList es con el que se trabaja
se usa la variable i que se incrementa en una unidad por cada iteración del LOOP.&lt;/p&gt;

&lt;h3&gt;Repitiendo acciones en elementos de una NodeList en caso de que cumplan cierta condición&lt;/h3&gt;

&lt;p&gt;Hasta ahora todo muy bien, Sin embargo eres un desarrollador activo no va a pasar mucho tiempo antes de que necesites repetir acciones en los elementos de una NodeList que además deben cumplir con una condición como tener una cierta clase asignada. En ese caso usaríamos un código como el que se muestra a continuación:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;  &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;script&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;nt&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;UnaConstante&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;.getElementsByTagName&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&quot;a&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;  
        &lt;span class=&quot;nt&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;i&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;i&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;UnaConstante&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;.length&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;i&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;++)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;err&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;(UnaConstante[i].className&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;==&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;&quot;link&quot;)&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;{&lt;/span&gt;
                &lt;span class=&quot;err&quot;&gt;UnaConstante[i].onclick&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;function()&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;{&lt;/span&gt;
                    &lt;span class=&quot;err&quot;&gt;this.style.backgroundColor&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;&quot;#00FF00&quot;;&lt;/span&gt;
                &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
            &lt;span class=&quot;err&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;err&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;o&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;script&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;

    &lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Notese como además hemos agregado el evento onclick de manera que para
  asignar el estilo se debe hacer clic.&lt;/p&gt;

&lt;p&gt;Bueno pues con esto hemos mostrado por medio de varios ejemplos nociones esenciales sobre métodos bien establecidos del DOM como getElementById; querySelector; querySelectorAll y getElementsByTagName. Existen muchas opciones de como puedes sacar ventaja usando estos métodos con JavaScript.&lt;/p&gt;

&lt;p&gt;La siguiente semana escribiremos la segunda parte de este artículo para darte algunas
luces sobre como navegar (Trasversing the DOM) por el DOM a partir de un elemento seleccionado.&lt;/p&gt;
</description>
                <pubDate>Sat, 11 Mar 2017 00:00:00 -0600</pubDate>
                <link>https://brandpetram.com/blog/2017/03/11/metodos-esenciales-del-DOM-en-javascript/</link>
                <guid isPermaLink="true">https://brandpetram.com/blog/2017/03/11/metodos-esenciales-del-DOM-en-javascript/</guid>
                
                <category>Front-End</category>
                
                <category>Web</category>
                
                
            </item>
        
            <item>
                <title>Registro nominativo o mixto para mi marca ¿Cuál hago?</title>
                <description>&lt;p&gt;Estás comenzando una nueva empresa o negocio y ya tienes el nombre y logos idoneos. El siguiente paso es darle a tu empresa una seguridad registrando este nombre y/o el logo en el Instituto Mexicano de la Propiedad Intelectual. ¿Pero que conviene más, obtener el registro nominativo o el mixto?&lt;/p&gt;

&lt;!--more--&gt;

&lt;h2&gt;Registro Nominativo&lt;/h2&gt;

&lt;p&gt;El objetivo de solicitar un registro nominativo en México es poseer los derechos sobre un nombre para su explotación comercial en todo el país. Si el IMPI dictamina que tu solicitud es aprobada, entonces podrás tener la exclusividad para el uso comercial del nombre que hayas registrado. Para evaluar si una petición de registro procede o no, el IMPI considera sobre todo la fonética del nombre que deseas registrar, dentro de la clase que deseas hacerlo. Por ejemplo si deseas registrar el nombre LA CARPINTERÍA porque deseas fabricar muebles de madera, después de hacer tu solicitud formal, el IMPI realizará una busqueda fonetica para ver si otro nombre se parece demasiado fonéticamente con el que tu deseas registrar. Esto se hace para proteger los registros de otra marca ya registrada. No es dificil imaginar el caos comercial y legal si el IMPI permitiera que alguién registrara por ejemplo el nombre KOKA KOLA para comercializar refrescos.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://brandpetram.com/contacto.html&quot;&gt;&lt;img src=&quot;/blog/images/ads/impi-consultoria-registro-de-marca-todo-mexico.png&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Sin embargo hay que tomar en cuenta que dentro del IMPI existen varias clases. Esto significa que no necesariamente tendrás los derechos absolutos de explotación comercial de tu nombre, sino solamente para la explotacion de los servicios y productos que determinada clase ampara. Por ejemplo en el caso de “La Carpintería” si lo registras dentro de la clase 20, (la clase donde usualmente se regsitran las mueblerías) no significa que alguién no podría usar ese nombre para explotarlo comercialmente en otra clase diferente. Por eso los negocios o personas que cuentan con mayor capital registran su marca en distintas clases. (auunque probablemente nadie lo hace en todas) Algunos restaurantes y franquicias en México registran su nombre y/o logo en la clase 35, que no tiene nada que ver con comida. Lo hacen como una forma de proteger aún más la exlusividad de los derechos de nombres.&lt;/p&gt;

&lt;h2&gt;Registro Mixto&lt;/h2&gt;

&lt;p&gt;El registro mixto de una marca es usualmente mucho más sencillo de conseguir que el registro nominativo, ya que la búsqueda fonética no tiene tanto peso. El registro mixto es básicamente la combinación de palabras con elementos figurativos que muestran la marca como un elemento o un conjunto distintivo; es decir, es el logo de tu empresa siempre y cuando este contenga el nombre de la marca en el. En el registro mixto no posees los derechos para explotación comercial del nombre de la marca, sino del logo. Esto quiere decir que nadie más puede hacer uso del logo de tu marca de ninguna manera, pero nada los detiene a utilizar el nombre de tu marca.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://brandpetram.com/contacto.html&quot;&gt;&lt;img src=&quot;/blog/images/ads/impi-crear-y-registrar-logo-todo-mexico.png&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Cabe mencionar que si el emblema no tiene palabra alguna en el entonces el registro de denomina como registro de una marca innominada. El Swoosh de nike o la sirena de starbucks son marcas innominadas ya registradas. Pero estas empresas también registraron su marca bajo el registro mixto y nominativo.&lt;/p&gt;

&lt;p&gt;Ahora que conoces un poco más sobre que es el registro Mixto y el registro Nominativo, así como su importancia, probablemente querrás conseguir la ayuda de expertos que puedan guíarte en el proceso de registro de una marca comercial. En Brandpetrám contamos con amplia experiencia creando nombres para nuevos negocios y productos, así como en la creación de logotipos, emblemas y el posterior registro de estos nombres, logos y emblemas en el Instituto Mexicano de la Propiedad Industrial.&lt;/p&gt;
</description>
                <pubDate>Fri, 27 Jan 2017 00:00:00 -0600</pubDate>
                <link>https://brandpetram.com/blog/2017/01/27/registro-nominativo-vs-registro-mixto/</link>
                <guid isPermaLink="true">https://brandpetram.com/blog/2017/01/27/registro-nominativo-vs-registro-mixto/</guid>
                
                <category>branding</category>
                
                
            </item>
        
            <item>
                <title>Registrando una marca en el IMPI</title>
                <description>&lt;p&gt;En México, la institución encargada de llevar a cabo el proceso de registro de una marca es
el Instituto Mexicano de la Propiedad Industrial, mejor conocido como IMPI. Cualquier persona
física o moral puede solicitar al IMPI una investigación para registrar una nueva marca, un logo,
o un aviso comercial. Si el estudio para el registro es aprobado, entonces se entrega un documento
que avala y reconoce legalmente la propiedad industrial de la nueva marca en toda la república mexicana
con una vigencia de 10 años a partir de la fecha que se haya solicitado.&lt;/p&gt;

&lt;!--more--&gt;

&lt;p&gt;Si eres un empresario o entrepreneur y estás buscando registrar una nueva marca o logotipo en México,
probablemnte sean bastante útiles las siguientes consideraciones.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://brandpetram.com/contacto.html&quot;&gt;&lt;img src=&quot;/blog/images/ads/impi-consultoria-registro-de-marca-todo-mexico.png&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Primero que nada aunque todo el mundo puede acudir y solicitar el registro de una marca,
no a todos se les aprueba, (perdiendo el costo del estudio), y por sorprendente que parezca,
a muchos que SI se les aprueba, les es completamente inutil el registro de su marca.&lt;/p&gt;

&lt;p&gt;Por ejemplo hace poco nos contactó un cliente que -como muchos otros- ya había creado su logo el mismo
para desarrollar su tienda en línea. ¡Vaya, incluso ya lo había registrado en el IMPI!
Nos sentimos con cierta pena cuando al revisar su logo, tuvimos que enumerar todas las razones
mercadológicas y comerciales por las cuales no iba a funcionar. (Comercialmente hablando).
A final de cuentas el cliente reconoció los argumentos y razones que expusimos y encargó un logo
nuevo hecho por profesionales. (Si quieres ver diferencia entre estos dos logos contáctanos).
De manera que no le sirvio de nada haber tenido la aprobación del IMPI con el logo que el había creado
porque al final de cuentas desde el punto de vista de branding y mercadotecnia su logo no era idóneo.&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;No puedes darte el lujo de estar creando una marca nueva sin tomar en cuenta al Instituto Mexicano
de la Propiedad Industrial, pero tampoco debes tomar en cuenta sólo al IMPI e ignorar importantes
factores de branding y mercadotecnia.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;La creación idónea de una marca, y su registro de la propiedad industrial
en realidad son dos procesos que van de la mano, es decir son como las dos alas de tu nuevo negocio,
sin las cuales no puedes alzar el vuelo.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://brandpetram.com/contacto.html&quot;&gt;&lt;img src=&quot;/blog/images/ads/impi-crear-y-registrar-logo-todo-mexico.png&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Y es que en México no son pocos los entrepreneurs y empresarios que por alguna razón -tal vez por su
espíritu emprendedor- se aventuran en un primer momento a crear ellos mismos los nombres y logos de
sus empresas. Sin embargo en la gran mayoría de los casos -si el negocio va enserio- terminan
teniendo que contratar un profesional del tema.&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;Nos ha tocado conocer que el dueño del negocio escoge un nombre, ordena hacer un
logo, e incluso registra dominios web, solo para darse cuenta semanas o meses después que esos
nombres ya estaban registrados por alguién más en el IMPI. Y tiene que volver a empezar de nuevo.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;En otra ocación nos llamó entusiasmado un cliente para explicarnos una idea que tenía para
   desarrollar un nuevo negocio. Reconocimos de inmediato que la idea
   era bastante buena, pero el nombre que YA había escogido para este nuevo negocio no lo era
   tanto. Este es un gran problema porque tienes un gran servicio o producto pero un nombre que por
   muchas razones no es idóneo. Y es que muchos empresarios olvidan que los nombres y logos de
   marcas no deben hacerse pensando en sus gustos o preferencias personales sino en criterios
   comprobados como memorabilidad, fácil pronuncación entre otros factores.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://brandpetram.com/contacto.html&quot;&gt;&lt;img src=&quot;/blog/images/ads/impi-naming-todo-mexico.png&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Cuan importante es recordar de nuevo que la creación de una marca bien hecha debe tomar en cuenta
tanto los criterios y registros del IMPI, así como los criterios de branding y mercadotécnia y
además la experiencia técnica y táctica que solo tiene el que quien fabrica nombres, logos y marcas.
El mejor herrero es el que está haciendo espadas todo el tiempo y el mejor cocinero es el que está
cocinando todo el tiempo. ¿Por qué un entepreneur cree que puede fabricar un nombre, y logo el mismo?&lt;/p&gt;

&lt;p&gt;Un entrepreneur o un empresario pueden conocer el negocio, la idea, el plan, pero usualmente no
es un experto de la creación de marcas. De hecho lo ideal es que te asesores no sólo con un experto
en la creación de logos, sino con todo un equipo en donde encuentras expertos en varias áreas
relacionados como el branding, la mercadotecnia y el registro de marcas.&lt;/p&gt;

&lt;p&gt;Por el lado del IMPI el registro de tu marca es un tema delicado donde hay que tomar en cuenta
factores como fonética, la clase apropiada donde se registará, especificidad del concepto,
si conviene un registro nominativo o mixto, etcétera. Mientras que por el lado de branding
y mercadotecnia hay que tomar en cuentra otro set de factores adicionales.
Es por eso que te recomendamos que recurras a expertos en el tema que conozcan todos los pasos
y consideraciones necesarias para que tengas no sólo mucha mayor probabilidad de aprobación
por parte del IMPI, sino para que esa marca que registraste funcione y sea idónea para el
producto o servicio que deseas comercializar.&lt;/p&gt;
</description>
                <pubDate>Tue, 17 Jan 2017 00:00:00 -0600</pubDate>
                <link>https://brandpetram.com/blog/2017/01/17/registrando-una-marca-en-mexico-en-el-IMPI/</link>
                <guid isPermaLink="true">https://brandpetram.com/blog/2017/01/17/registrando-una-marca-en-mexico-en-el-IMPI/</guid>
                
                <category>branding</category>
                
                
            </item>
        
            <item>
                <title>Diseñando el logo de tu empresa</title>
                <description>&lt;p&gt;Eres un entrepreneur o simplemente por fin te decidiste a comenzar tu negocio. Y ya te diste cuenta que necesitas un
una marca, un simbolo, algo que las personas asocien al producto o los servicios que vendes. En pocas palabras necesitas
un logo. ¿y como hacer un buen logo para tu marca? Esto es un problema que no es tan fácil de resolver como parece.&lt;/p&gt;

&lt;!--more--&gt;

&lt;p&gt;Encontrar un logo que represente idóneamente y de manera exitosa a tu empresa no es tarea fácil porque son numerosos los factores que deben tomarse en cuenta y sin embargo estos se ignoran con gran frecuencia. En otras palabras existen ciertas reglas, caminos
o directrices ya conocidas para la creacion exitosa de logos, pero no se están siguiendo.&lt;/p&gt;

&lt;p&gt;En este articulo mencionamos algunas consideraciones que entrepreneurs y nuevos empresarios deberían tener presentes al momento de llevar a cabo el proceso de diseño de un logo.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://brandpetram.com/contacto.html&quot;&gt;&lt;img src=&quot;/blog/images/ads/branding-crear-marca-que-distinga-todo-mexico.png&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;Algunos principios para diseñar un logo exitoso.&lt;/h2&gt;

&lt;h4&gt;Comienza por definir&lt;/h4&gt;

&lt;p&gt;Lo primero es ir definiendo, esto es establecer qué es exactamente lo que estás buscando, por ejemplo ¿quieres un logo emblema o un logo tipográfico?
En el logo tipográfico se estiliza el nombre de la marca para que sea el logo en sí, mientras que en el logo emblema
existe -valga la redundancia- un emblema o simbolo aparte sin letras que acompaña al nombre. Existen muchas marcas exitosas que aplican ambos tipos de logo. Claramente podemos ver que el logo de Coca-Cola es simplemente el nombre de la empresa estilizado para ser transformado en el logo que la representa. Por otro lado, podemos ver a Apple, en donde se han dado el lujo de ni siquiera tener que utilizar la palabra, porque su marca está tan posicionada que su emblema lo dice todo.&lt;/p&gt;

&lt;h4&gt;Simple, original y único&lt;/h4&gt;

&lt;p&gt;Otro principio básico es que un logo debe ser simple y original. Esta es la primer regla que muchos entrepreneurs rompen porque
generalmente hacen su logo demasiado complejo. La realidad es que el logo -si deseas que sea memorable e icónico- debe ser simple. Si un logo no puede ser
captado, asimilado o comprendido de manera inmediata quiere decir que algo está mal. La simplicidad es clave para un buen logo.&lt;/p&gt;

&lt;p&gt;Además un logo debe ser único, debe destacar sobre los demás entre los estantes de cualquier tienda o ser reconocible si se utiliza en cualquier vehículo utilizado para publicidad, como autobuses o camiones. Recordemos que las bases de una de las marcas de calzado deportivo más importantes internacionalmente, se centra en un simple y original “swoosh” gráfico.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://brandpetram.com/contacto.html&quot;&gt;&lt;img src=&quot;/blog/images/ads/branding-disenador-sitio-web-todo-mexico.png&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;Diseño a prueba de tiempo&lt;/h4&gt;

&lt;p&gt;Un buen logo debe sobrevivir a la prueba del tiempo, nadie quiere un logo sea efectivo por uno o dos años y tener que cambiarlo
de nuevo en ese periodo. Si un logo sigue las reglas de la simplicidad y busca ser memorable, por consecuencia será efectivo al paso
de los años, ya que este logrará un buen posicionamiento en los clientes y no habrá necesidad de cambiar aquello con lo que ya se sienten identificados. Los logotipos que se encuentran más afianzados a nuestra memoria son aquellos que han estado entre nosotros por muchos años, llegando al punto en donde cambiar el logo sería un error.&lt;/p&gt;

&lt;h4&gt;Olvida lo más obvio&lt;/h4&gt;

&lt;p&gt;También hay que mencionar el evitar aquello que nos puede resultar obvio con el nombre o giro de la empresa. Probablemente utilizar una taza de café para una cadena que se dedica a vender cafés no sea la opción correcta. Podemos ver el claro ejemplo en la cadena de café más famosa, Starbucks. En donde su logo es una sirena, que nada tiene que ver con el café a simple vista, sin embargo podemos reconocer este logo y asociarlo inmediatamente con el café.&lt;/p&gt;

&lt;h2&gt;Contrata un profesional&lt;/h2&gt;

&lt;p&gt;Estos que acabamos de mencionar fueron solo algunos principios básicos que hay que tomar en cuenta a la hora de crear un logo, sin embargo, hay un factor ESENCIAL que debes tomar
en cuenta: la experiencia. No es lo mismo que tu hagas tu logo, a que lo haga un profesional que ha trabajado en el desarrollo de cientos de marcas. De hecho sería bueno que considerarás que prácticamente no existe una empresa exitosa en todo el mundo que utilice un logo diseñado por el mismo dueño, los logos más iconicos han sido diseñados siempre por profesionales de la materia. Así como se delegan las tareas específicas de una empresa a expertos calificados, así también debe encargarse el trabajo de diseñar el logo a un diseñador profesional con experiencia. Un buen diseñador será capaz de llegar a crear un logo, mucho mejor que lo que tú puedes hacer. ¿O crees tú que el logo de Apple lo diseñó Steve Jobs?&lt;/p&gt;
</description>
                <pubDate>Mon, 26 Dec 2016 00:00:00 -0600</pubDate>
                <link>https://brandpetram.com/blog/2016/12/26/disenando-el-logo-de-tu-empresa/</link>
                <guid isPermaLink="true">https://brandpetram.com/blog/2016/12/26/disenando-el-logo-de-tu-empresa/</guid>
                
                <category>logos</category>
                
                <category>branding</category>
                
                
            </item>
        
            <item>
                <title>JivoChat: Aumenta las ventas de tu sitio web en forma bella y simple</title>
                <description>&lt;p&gt;Después de años de dedicarnos a aumentar las conversiones -esto es el número de contactos que llega
a través de un sitio web para pedir información de un producto o servicio- descubrimos
[&lt;a href=&quot;https://www.jivochat.es/&quot;&gt;JivoChat&lt;/a&gt;], una nueva y brillante app que además de ayudar a aumentar las
 conversiones (y por ende las ventas) de los sitios web, ofrece una mejor experiencia a los visitantes.&lt;/p&gt;

&lt;!--more--&gt;

&lt;h2&gt;En busca de las valiosas “conversiones” en los sitios web&lt;/h2&gt;

&lt;p&gt;Desde la aparición de buscadores como Google, las empresas y negocios hoy en día necesitan más que nunca
 páginas web para conseguir y aumentar sus ventas. Lo primero que necesita un sitio web es recibir muchas
 visitas, pero eso no es suficiente. Los visitantes tienen que “convertirse” ¿Qué significa eso?&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://brandpetram.com/contacto.html&quot;&gt;&lt;img src=&quot;/blog/images/ads/jivo-chat-marketing-digital-todo-mexico.png&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Cada vez que una persona que visita tu sitio web se pone en comunicación con tu empresa,
por haber llenado la forma de contacto, decimos los profesionales del marketing digital
que ocurre una “conversión”.  Se ha “convertido” el visitante de tu sitio
porque ahora está un paso más cerca de ser un cliente. Es aquí donde
 [&lt;a href=&quot;https://www.jivochat.es/&quot;&gt;JivoChat&lt;/a&gt;] entra en juego, porque de una forma natural ayuda a aumentar las
  conversiones.&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;No es lo mismo que un bajo porcentaje de los visitantes de tu sitio te contacte a que un alto porcentaje lo haga.
Jivochat ayuda a aumentar dicho porcentaje&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Esta simple “conversión” de la que tanto se habla es una de las claves del éxito de muchos negocios
que están en internet. Ni siquiera necesitan una tienda en línea. Si generas muchas conversiones en tu sitio,
(muchas personas pidiéndote información de tus productos), lo más seguro es que el negocio vaya bien.&lt;/p&gt;

&lt;figure class=&quot;caption&quot;&gt;
    &lt;img src=&quot;/blog/images/posts/jivochat-clientes-chat-visitas.jpg&quot; alt=&quot;&quot; /&gt;
    
    &lt;figcaption class=&quot;caption-text&quot;&gt;&lt;/figcaption&gt; 
    
&lt;/figure&gt;

&lt;h2&gt;JivoChat: aumentando las conversiones y mejorando el servicio al mismo tiempo.&lt;/h2&gt;

&lt;p&gt;Imagina que cada vez que alguien entra a tu sitio web, una atractiva ventana de chat
 (nada parecido a esos molestos pop-ups) invita de forma automática a cada visitante
 a iniciar una conversación con un mensaje personalizado por tí.&lt;/p&gt;

&lt;p&gt;Lo mejor es que sólo si el visitante decide iniciar la conversación, tú o tus agentes recibirán
  una notificación inmediata en su teléfono móvil o en su computadora (Mac o Windows).
  Es como si recibieras un mensaje de WhatsApp pero de un prospecto que está viendo tu sitio web
  en ese momento en lugar de un amigo. ¿Te imaginas las posibilidades?
  Con JivoChat cada visitante que entra a tu página SABE que puede contactarte de forma inmediata
  para aclarar dudas o hacer preguntas.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://brandpetram.com/contacto.html&quot;&gt;&lt;img src=&quot;/blog/images/ads/jivo-chat-aumentar-conversiones-todo-mexico.png&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;¿Recuerdas que anteriormente explicamos por qué es tan valiosa una conversión?
 Pues con [&lt;a href=&quot;https://www.jivochat.es/&quot;&gt;JivoChat&lt;/a&gt;] los visitantes ahora son invitados a “convertirse”
 en una forma completamente natural, porque al final de cuentas esta app es también un servicio
 al cliente, es como una especie de “¡Hey! Aquí estamos conectados por si tienes alguna duda”;
 este es el tipo de mensajes que cada visitante lee en una atractiva ventana de chat.&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;JivoChat es una forma rápida, fácil y atractiva de conectar con las personas que visitan tu sitio web, para darles
la información exacta que necesitan y para eventualmente obtener más clientes. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;Un mejor servicio al cliente&lt;/h3&gt;

&lt;p&gt;Nadie quiere pasar ni 5 minutos en una página web en donde se sienta perdido entre tanta información.
Entonces ¿No sería mejor si alguien se acerca, y le deja saber al visitante que ahí está presente
por si tiene alguna duda? ¡Por supuesto! Eso es exactamente lo que hace [&lt;a href=&quot;https://www.jivochat.es/&quot;&gt;JivoChat&lt;/a&gt;]
por las personas que entren a tu sitio web. Les deja saber que están ahí por si tienen alguna duda.
Eso es valioso porque mejora el servicio y aumenta las conversiones y por tanto las ventas.&lt;/p&gt;

&lt;h3&gt;Conecta mejor con los clientes&lt;/h3&gt;

&lt;p&gt;Además tener disponible un chat en tu sitio web permite una conexión personalizada con cada uno de tus clientes.
Los visitantes ahora tienen la oportunidad de interactuar de inmediato con una persona real y no
simplemente con la pantalla de su computadora o dispositivo móvil.&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;Está demostrado que la experiencia del cliente aumenta de manera positiva cuando logra conectar con la marca o negocio,
y qué mejor manera de hacerlo que de forma personalizada e inmediata y al mismo tiempo sentirse valorado por la misma empresa.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href=&quot;https://brandpetram.com/contacto.html&quot;&gt;&lt;img src=&quot;/blog/images/ads/jivo-chat-implementar-jivo-chat-todo-mexico.png&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;JivoChat también te ayuda a obtener importantes métricas que te ayudan a mejorar tu sitio web.&lt;/h3&gt;

&lt;p&gt;A través de distintas herramientas disponibles en JivoChat, es posible reunir datos de los visitantes. Como el saber de dónde están visitando tu sitio o las secciones que visualizaron o están visualizando en tu página web. Así como obtener nombres y correos electrónicos a través de la conversación, permitiendo aumentar la base de contactos para marketing. Además de las funciones analíticas del chat en línea - el cual posee integración con Google Analytics -, que permite conocer en tiempo real las tendencias de los visitantes a tu sitio. &lt;/p&gt;

&lt;p&gt;Por todas estas razones, en nuestra opinión [&lt;a href=&quot;https://www.jivochat.es/&quot;&gt;JivoChat&lt;/a&gt;] se convertirá en un estandard del marketing
digital y la experiencia web, en los años por venir.&lt;/p&gt;
</description>
                <pubDate>Mon, 28 Nov 2016 00:00:00 -0600</pubDate>
                <link>https://brandpetram.com/blog/2016/11/28/JivoChat-convierte-tus-visitas-web-en-clientes/</link>
                <guid isPermaLink="true">https://brandpetram.com/blog/2016/11/28/JivoChat-convierte-tus-visitas-web-en-clientes/</guid>
                
                <category>live chat</category>
                
                <category>marketing digital</category>
                
                <category>conversiones</category>
                
                
            </item>
        
            <item>
                <title>Una solución al problema de los permisos en servidores web</title>
                <description>&lt;p&gt;Quien ha operado un servidor web con NGINX o Apache -entre otros- probablemente se ha enfrentado con el
viejo problema de los permisos: los desarrolladores necesitan un tipo de permisos en los folders
y archivos del servidor para poder manipular las aplicaciones, páginas web, librerías, etcétera, mientras
que Apache o NGINX necesitan otros permisos diferentes en los mismos archivos para poder servirlos
correctamente hacia el exterior (mundo web).&lt;/p&gt;

&lt;p&gt;&lt;!--more--&gt;&lt;/p&gt;

&lt;p&gt;Esto es un problema porque significa que los mismos archivos de las páginas web o las aplicaciones,
 necesitan al mismo tiempo dos tipos de permisos diferentes, uno para el servidor web y otro para los
 desarrolladores. Mientras que los desarrolladores usualmente necesitan permisos para leer y escribir
 en todos los archivos, Nginx o Apache necesitan solamente poder escribir en algunos archivos
 (y leer los demás).&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;Los archivos de páginas web o apps, necesitan al mismo tiempo
dos tipos de permisos diferentes y mutuamente exclusivos, uno para el servidor web
y otro para los desarrolladores.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Este problema ha sido resuelto por muchas personas de muchas formas diferentes en el pasado, así que no
estamos descubriendo el hilo negro aquí, ni tratando de re-inventar la rueda, más bien queremos
compartir lo que nos pareció una elegante solución que encontramos por medio de un desarrollador francés
hace algunos pocos meses.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://brandpetram.com/contacto.html&quot;&gt;&lt;img src=&quot;/blog/images/ads/servidores-web-hosting-todo-mexico.png&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;La solución es un directorio espejo con diferentes permisos&lt;/h2&gt;

&lt;p&gt;Esta solución utiliza bindfs, un sistema de archivos FUSE (File System in User Space) que sirve para
reflejar o espejear un directorio en otro lugar, esto no es nada especial en sí, sin embargo lo
que sí es especial es que bindfs permite alterar los permisos del directorio que ha sido reflejado.
Literalmente tienes acceso a los archivos y folders del directorio deseado
a través de un directorio espejo, pero con diferentes permisos en todos los archivos y folders.&lt;/p&gt;

&lt;p&gt;Por ejemplo, el directorio /var/www -que es donde usualmente radican las aplicaciones web-
puede tener cualquier tipo de permiso que sea apropiadado para los servidores NGINX y/o Apache,
y usando bindfs montamos un espejo de ese directorio hacia otro lugar del servidor, que puede ser
por ejemplo la carpeta /home/usuario/www de manera que el usuario pueda entrar a /var/www a través de su
directorio home, pero cuando lo hace, todos los archivos, -como por arte de magia-, tienen diferentes
permisos (los que el desarrollador necesita).&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;De esta manera los desarrolladores nunca tienen que entrar a las carpetas /var/www directamente a través de
(s)ftp o git sino sólo a través del espejo que está en su directorio home.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href=&quot;https://brandpetram.com/contacto.html&quot;&gt;&lt;img src=&quot;/blog/images/ads/servidores-ayuda-servidor-linux-todo-mexico.png&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;Como aplicar bindfs para solucionar el problema de los permisos en servidores linux&lt;/h2&gt;

&lt;p&gt;Vamos a asumir en este ejemplo que el usuario se llama desarrollador, que el usuario para el servidor
web es www-data, y que la aplicación está alojada en la carpeta var/www/app&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span class=&quot;nt&quot;&gt;Installando&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;bindfs&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;apt-get&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;update&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;apt-get&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;-y&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;install&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;bindfs&lt;/span&gt;

&lt;span class=&quot;nt&quot;&gt;mkdir&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;-p&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;home&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;desarrollador&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;www&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;app&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;chown&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;-Rf&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;desarrollador&lt;/span&gt;&lt;span class=&quot;nd&quot;&gt;:desarrollador&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;home&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;desarrollador&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;www&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;chmod&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;-Rf&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;770&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;home&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;desarrollador&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;www&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Después sólo hay que editar el contenido de /etc/fstab con tu editor favorito (vim o nano) para añadir
esta linea:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span class=&quot;nt&quot;&gt;bindfs&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;www&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;app&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;home&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;desarrollador&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;www&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;app&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;fuse&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;force-user&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;desarrollador&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;force-group&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;desarrollador&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;create-for-user&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;www-data&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;create-for-group&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;www-data&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;create-with-perms&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;0770&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;chgrp-ignore&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;chown-ignore&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;chmod-ignore&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;0&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;0&lt;/span&gt;  &lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Se guardan los cambios y pasamos a montar la aplicación.&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span class=&quot;nt&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;mount&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;home&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;desarrollador&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;websites&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;app&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Probar la solución es muy fácil, simplemente hay que entrar al home del usuario -en este caso desarrollador-
y verificar que exista la carpeta www/app y navegar en ella y ejecutar ls -la para ver los permisos de
los archivos.&lt;/p&gt;
</description>
                <pubDate>Sun, 27 Nov 2016 00:00:00 -0600</pubDate>
                <link>https://brandpetram.com/blog/2016/11/27/una-elegante-solucion-al-problema-de-los-permisos-host-virtuales-apache-nginx-y-apps-en-ubuntu/</link>
                <guid isPermaLink="true">https://brandpetram.com/blog/2016/11/27/una-elegante-solucion-al-problema-de-los-permisos-host-virtuales-apache-nginx-y-apps-en-ubuntu/</guid>
                
                <category>ubuntu</category>
                
                <category>linux</category>
                
                <category>permisos</category>
                
                <category>servidor</category>
                
                
            </item>
        
            <item>
                <title>Branding: comunicarse bien con el cliente es esencial</title>
                <description>&lt;p&gt;Muchas agencias y/o diseñadores gráficos consideran uno de sus principales retos en su vida profesional
el tratar con clientes que siempre quieren más y más cambios acerca de las propuestas que se les entregan.
Básicamente consideran a los clientes como una especie de problema necesario.
Esto se puede resolver sencillamente con el establecimiento de reglas claras antes de comenzar cualquier
proyecto.&lt;/p&gt;

&lt;!--more--&gt;

&lt;p&gt;&lt;a href=&quot;https://brandpetram.com/contacto.html&quot;&gt;&lt;img src=&quot;/blog/images/ads/branding-crear-marca-que-distinga-todo-mexico.png&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Pongamos un ejemplo. Paul Rand, el famoso diseñador contratado por marcas como IBM y Ford, entre otras, fue
requerido en una ocación por un admirador suyo: Steve Jobs. Cuando Jobs le preguntó a Paul, qué pasaba si no le gustaba
la propuesta de un diseño de logo, -es decir, si podía pedir cambios en el logo después de que se le entregara- Paul
respondió: Mira, yo te voy a entregar la solución, puedes usarla o no, pero de todas formas me vas a pagar.&lt;/p&gt;

&lt;p&gt;En otras palabras Paul establecía las reglas del juego claramente antes de comenzar. “Si no te gusta,
no lo uses, pero aún así me vas a pagar por mi trabajo.” Muchos diseñadores no se atreverían ni siquiera
a hacer algo cercano a semejante afirmación. ¿Entonces por qué Steve Jobs aceptó? Pues porque conocía al
hombre y sus diseños. No se escandalizó en lo más mínimo ante esta respuesta ya que la fama de Paul Rand
le precedía. Steve sabía que Paul Rand era una persona responsable que había entregado resultados exitosos
a muchos otros clientes.&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;“Te voy a entregar la solución, y puedes usarla o no, pero de todas formas me vas a pagar”
  &lt;cite&gt;― Paul Rand a Steve Jobs&lt;/cite&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;¿Tiene que ser un diseñador tan famoso como Paul Rand para responder así sin que el cliente desconfíe?
En nuestra opinión no, simplemente debe mostrar su trabajo profesional -lo que ha hecho anteriormente para
otros clientes- y establecer ciertas reglas claras que sean justas: Por ejemplo: “te voy a entregar tres opciones
de este logo con derecho a dos cambios”. La cantidad de reglas que se deben establecer varía de acuerdo al tamaño
del proyecto. Proyectos sencillos requieren reglas sencillas, mientras que proyectos complejos pueden incluso
requerir páginas escritas donde las partes puedan acordar no sólo que cosas se van a entregar, sino cuál es
la forma exacta de trabajo. Esto hace que todos sean más felices.&lt;/p&gt;

&lt;p&gt;Es completamente innecesario tener una visión negativa de los clientes por una simple falta de comunicación.
Un buen diseñador -y una buena agencia-, sabe que sus clientes se sienten protegidos cuando se les muestran
los trabajos de branding que han hecho anteriormente, así como cuando se les explica por escrito exactamente
cuales son los entregables de su proyecto, las reglas bajo las que se trabaja y los tiempo de entrega.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://brandpetram.com/contacto.html&quot;&gt;&lt;img src=&quot;/blog/images/ads/branding-disenador-sitio-web-todo-mexico.png&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
</description>
                <pubDate>Sun, 27 Nov 2016 00:00:00 -0600</pubDate>
                <link>https://brandpetram.com/blog/2016/11/27/comunicacion-con-el-cliente-en-el-branding/</link>
                <guid isPermaLink="true">https://brandpetram.com/blog/2016/11/27/comunicacion-con-el-cliente-en-el-branding/</guid>
                
                <category>branding</category>
                
                
            </item>
        
            <item>
                <title>Realidades del e-commerce en México</title>
                <description>&lt;p&gt;Muchos clientes que solicitan vender en línea no saben que hay muchos negocios que sin tener un carrito
de ventas logran monetizar 10 veces más su sitio web, en comparación a otros que sí tienen un supuesto sistema de
ventas en línea. Esto sucede porque para estar dentro del comercio en línea en México, se necesita
mucho más que tener un simple carrito. Vender éxitosamente en línea implica tomar en cuenta factores
tan importantes como la usabilidad, la experiencia del usuario, el tipo de servidor que se usa, el branding,
entre muchos otros factores. &lt;br /&gt;
&lt;!--more--&gt;&lt;/p&gt;

&lt;p&gt;Con un relativo bajo número de tarjetahabientes en México
(hasta noviembre de 2016, sólo 4 de cada 10 mexicanos poseen una tarjeta de crédito),
el comercio electrónico o e-commerce de tu empresa no debería limitarse solamente a habilitar
la compra en línea usando una tarjeta de crédito.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://brandpetram.com/contacto.html&quot;&gt;&lt;img src=&quot;/blog/images/ads/ecommerce-desarrollo-tiendas-en-linea-todo-mexico.png&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;De hecho, hoy en día muchas personas compran en línea pero no lo hacen usando tarjeta. Una gran cantidad de
sitios web están logrando vender, pero no necesariamente por medio del denominado carrito de ventas. Lo que hacen muchas
personas en Latinoamérica -donde no existe una cultura tan desarrollada de compra en línea con tarjeta de crédito-,
es buscar sitios con los productos o servicios que necesitan, pero al momento de hacer la compra eligen un método de pago
distinto al de una tarjeta de crédito, como a través de transferencias bancarias, pago por cheques o incluso depósitos en OXXO.&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;Aparecer de forma natural en los primeros lugares de los resultados de Google con un sitio
que crea una gran experiencia y toma en cuenta el marketing digital es el mejor “carrito” que puedes
tener.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Desde hace tiempo una gran cantidad de negocios en la república mexicana se benefician
de aparecer en los primeros resultados de las busquedas de Google, aunque no tengan un
carrito o sistema de ventas en línea.&lt;/p&gt;

&lt;p&gt;Esto no significa que la compra en línea con carrito carezca de relevancia en México.
Todo lo contrario. Al ser un mercado en crecimiento, es el momento preciso para que
tu empresa no se quede atrás en la nueva era del mundo de los negocios.
Con carrito o sin carrito es un hecho que debes estar en internet, pero debes estarlo de forma
adecuada y precisa para lograr monetizar tu sitio.&lt;/p&gt;

&lt;p&gt;Por otra parte, muchas empresas en México que pensaron entrar de lleno en el comercio electrónico
habilitando en su sitio web un catálogo de productos y un carrito, están cayendo en cuenta que no les
está funcionando y en muchos casos ni siquiera saben por qué.&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;Existen casos en donde habría sido mejor no tener una tienda en línea, que tener una mal hecha por no haber sido
bien planeada o por haber sido mal ejecutada.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Las tiendas en línea que no están teniendo éxito, usualmente ignoraron factores como:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;La experiencia del usuario&lt;/li&gt;
  &lt;li&gt;La usabilidad del sitio&lt;/li&gt;
  &lt;li&gt;La estrategia de marketing digital&lt;/li&gt;
  &lt;li&gt;El tipo de servidor&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href=&quot;https://brandpetram.com/contacto.html&quot;&gt;&lt;img src=&quot;/blog/images/ads/ecommerce-mejor-experiencia-todo-mexico.png&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;En resumen, una tienda en línea es mucho más que tener un simple carrito de compras. Se debe diseñar una experiencia para
los usuarios completa y tener además contemplados factores como la tecnología web que se usa, el servidor, los respaldos y otros factores.
La atención hacia todos estos y otros detalles -así como el expertise técnico de quien lo ejecuta- es lo que hace la diferencia entre un sitio web que monetiza exitosamente y otro que no lo hace.&lt;/p&gt;
</description>
                <pubDate>Thu, 24 Nov 2016 00:00:00 -0600</pubDate>
                <link>https://brandpetram.com/blog/2016/11/24/realidades-de-ecommerce-en-mexico/</link>
                <guid isPermaLink="true">https://brandpetram.com/blog/2016/11/24/realidades-de-ecommerce-en-mexico/</guid>
                
                <category>e-commerce</category>
                
                <category>marketing digital</category>
                
                
            </item>
        
    </channel>
</rss>