Jekyll2020-10-15T00:36:04+00:00https://matiasmasca.github.io/aboutme/aboutme/feed.xmlMatías Mascazzini personal siteA blog about technology and other stuff that I like.¿Cuánto te sale tu hora de trabajo?2020-08-22T22:00:00+00:002020-08-22T22:00:00+00:00https://matiasmasca.github.io/aboutme/aboutme/cuanto-te-sale-tu-hora-de-trabajo<h2 id="cuánto-te-sale-tú-hora-de-trabajo-reflexiones-de-un-emprendedor">¿Cuánto TE sale TÚ hora de trabajo? Reflexiones de un emprendedor</h2>
<p><strong><em>Existen diferentes maneras de cobrar por el trabajo que se realiza en base al factor común tiempo. Entender esto puede ayudarte a mejorar el manejo de tu economía y a no cometer errores muy comunes al poner tu conocimiento a trabajar al servicio de otros.</em></strong></p>
<p>Al empezar la vida laboral una de las primeras interrogantes que surgen es ¿Cómo cobrar? y ¿Cuánto cobrar? cuestión que te guiará al elegir un empleo como al realizar un trabajo para un cliente; no importa si eres autodidacta, artesano o graduado siempre en algún momento tenemos que contestar esta pregunta.</p>
<h2 id="tiempo-laboral">Tiempo Laboral</h2>
<p>Nuestra vida laboral “normal” se basa en lo siguiente: se trabaja de Lunes a Viernes unas 8 horas diarias, esto tiene su fundamento histórico en el lema «8 horas para trabajar, 8 horas de recreo, 8 horas para dormir» surgido en el movimiento obrero. Entonces si multiplicamos 8 horas por 5 días por 4 semanas nos da unas <strong>160 horas</strong> laborales mensuales, recuerda ese número. Si en tu caso trabajas más días o menos horas, hace tu calculo y tenelo en mente.</p>
<p>8 x 5 x 4 = <strong>160 horas</strong></p>
<p>Como todos tenemos la misma cantidad de horas, y el tiempo es algo finito, la idea económica general sería como sacarle el mayor provecho posible o al menos reflexionar al respecto.</p>
<h2 id="empleados-en-relación-de-dependencia">Empleados en relación de dependencia.</h2>
<p>Hagamos un ejercicio:</p>
<p>Si eres empleado en relación de dependencia, te propongo que dividas tu sueldo por la cantidad de horas que normalmente trabajas. Por ejemplo, supongamos un empleado municipal gana alrededor de los $20.000, trabaja 8 horas durante la semana, entonces su valor de hora de bolsillo es de $125 pesos (en dólares U$S 1,64 [o a lo que cotize hoy]).</p>
<p>Cada vez que compras en esa gaseosa cola de 2.25 litros en el Super “El Acueste” Max con la promo a $130 sabe que tendrás que trabajar más de 1 hora el mes que viene para recuperar ese dinero.</p>
<blockquote>
<p>Puedes darte un gusto de vez en cuando pero no vivas de darte gustos.</p>
</blockquote>
<p>Para ser más exactos tendrás que mirar tu recibo de sueldo y ver bien que items entran en tu remuneración [1], porque tu empleador suele pagar por tí una serie de cuestiones sociales, que incrementan el <strong>valor</strong> de tu hora aunque no llegue a tu bolsillo.</p>
<p>[1] <a href="https://www.argentina.gob.ar/trabajo/contratacion/remuneracion">https://www.argentina.gob.ar/trabajo/contratacion/remuneracion</a></p>
<p>Hasta aquí es camino simple, solo tienen que saber si lo que van a pagar de bolsillo te sirve para sostener o mejorar tu estilo de vida y qué otros beneficios te ofrecen. Pero tu ciclo económico será generalmente ir a trabajar en un lugar una cierta cantidad de horas y a cierta altura del mes cobrar tu salario; incluso seguirás percibiendo este ingreso aunque no vayas a trabajar (licencias, vacaciones pagas, etc.) entre otros beneficios.</p>
<h2 id="trabajadores-independientes">Trabajadores independientes.</h2>
<p>Ahora quiero que vayamos por el camino, el del trabajo en forma independiente y su forma de cobrar, que es lo que despierta más dudas e interrogantes, cuando te llegan esas primeras ofertas.</p>
<p>Al igual que un empleado, para llevar una vida normal en el sistema, podemos suponer que tendrás esa misma cantidad de horas disponibles, o ten en mente que **cantidad de horas **que pretendes trabajar por tu cuenta.</p>
<p>Tu <strong>ciclo económico</strong> será un tanto diferente, primero tendrás que ofrecer de alguna manera tus habilidades, luego generalmente tendrás que comunicarte con tu potencial cliente y presupuestar el trabajo a realizar, si llegas a un acuerdo entonces tendrás que hacer el trabajo encargado y finalmente cobrar por ese trabajo. Y luego el ciclo inicia nuevamente, tal vez con el mismo cliente, tal vez con uno completamente nuevo.</p>
<h3 id="ofrecer--presupuestar--hacer--cobrar">Ofrecer => Presupuestar => Hacer => Cobrar</h3>
<p>Ejercicio:</p>
<p>Cuando te compres esa misma bebida cola, que el asalariado, tené en cuenta que para recuperar ese dinero tendrás que pasar por todo este ciclo económico, donde ademas cobrar es parte de un financiamiento y no suele ser algo directo.</p>
<blockquote>
<p>Date el gusto, pero no vivas de darte gustos.</p>
</blockquote>
<p>Si eres complementamente <strong>independiente</strong>, en abundancia es mejor guardar e invertir para cuando vengan los tiempos malos.</p>
<h2 id="quién-paga-los-platos-rotos">¿Quién paga los platos rotos?</h2>
<p>Reflexionemos sobre una cuestión, que en mi caso se me escapó alguna vez por el impulso libre de querer hacer, ¿<em>Qué elementos necesitas para realizar tu trabajo? ¿son descartables por trabajo o sirven para hacer varios?</em> y lo principal <em>¿Quién paga por esos elementos?</em></p>
<p>Con elementos me refiero a cualquier cosa que necesites sin el cual no puedas hacer ese trabajo, desde la ropa que tenes que usar, si te tenes que transportar, si necesitas una herramienta, un material o insumo, la luz eléctrica, el agua, los impuestos. Estos al final se los conoce como “costos” y es algo que tendrás que conocer.</p>
<p>Se hace necesario el siguiente calculo:</p>
<h3 id="costos--ganancia--valor-de-venta"><strong>COSTOS + GANANCIA = VALOR DE VENTA</strong></h3>
<p>A lo que te sale hacer (tus costos) le tenes que sumar una ganancia (o un margen de ganancia); pero para decidir cuanto es esa <em>ganancia esperada</em>, entran cuestiones de tu estrategia comercial y no voy a entrar en ese punto, pero solo quiero decirte y decirme que no sos una Organización Sin Fines de Lucro por tanto de tu trabajo tiene que necesariamente quedar una ganancia, incluso una ONG también necesita tener su ganancia solo que no su fin no es repartila sino que se vuelve a usada por la misma organización para alcanzar su razón de ser.</p>
<ul>
<li>Seguro que en las ciencias económicas y en particular en Contabilidad, tienen ya formalizadas estas cuestiones; este articulo no pretende remplazarlo sino solo transmitir mi experiencia y reflexiones como emprendedor para que reflexionemos y para que te ayude a prepararte en tu camino.</li>
</ul>
<h2 id="cuales-son-mis-costos">¿Cuales son mis costos?</h2>
<p>Al emprender una actividad laboral independiente es muy común, por lo menos en estas región del mundo donde habito, que se mezclen los costos de vida personales con los laborales. Parece simple pero para mi es una cuestión clave que <strong>puede llevarte a la ruina financiera</strong>. Cuando tu oficina esta en tu casa, “home-office” le dicen ahora, la luz que cosumis, el agua, los impuestos, la conexión a Internet y aveces incluso la computadora que usas para trabajar se mezcla de forma indivisible con tus costos de vida personal y esto es lo que genera una gran distorsión en lo que crees que percibís por tu trabajo.</p>
<p>Hagamos un ejercicio en una planilla de cálculos.</p>
<p><img src="https://cdn-images-1.medium.com/max/2000/0*E-I8Q7FkDaPiIjZl" alt="Planilla básica para el calculo del costo de la hora" /></p>
<p>Podes acceder a esta planilla en <a href="https://docs.google.com/spreadsheets/d/1sEMUNXOxl1HrbG3CPPplOL2h7_VXNNH5UkE9frcst8o/edit?usp=sharing">click aqui</a></p>
<p>Primero listamos todos los conceptos en los que se nos va el dinero, luego ponemos sus montos, una vez que tenemos eso en la columna “Por hora” lo que hice fue dividir por <strong>160</strong>, es decir las horas que tienen un mes laboral y vas sumando todo para al final llegar a tu <strong>“Costo de Hora”</strong>; en el caso de “Equipos” hice un calculo distinto lo dividí <strong>1920</strong>, las horas que tiene un año, suponiendo que los equipos se desgastan en 1 año y necesito ese dinero para reponerlos. Entonces llegamos a un valor <strong>$208.82</strong>, eso es el costo por hora de tener tu negocio abierto, tengas clientes o no, por tanto</p>
<blockquote>
<p>si trabajas por menos de $208 la hora no estas cubriendo el costo de tener tu negocio abierto</p>
</blockquote>
<p>Pero este calculo se esta olvidando de una parte muy importante el costo de hora de la <strong>persona</strong> que va a realizar el trabajo, en este caso como auto-empleado esa persona eres tu! Entonces lo que conviene hacer es en principio ponerte un <strong>sueldo de mercado</strong>, competitivo o no ya será una cuestión de estrategia. Hagamos el calculo pero sumando un sueldo ficticio de $35.000 y vamos que pasa con el costo de la hora.</p>
<p><img src="https://cdn-images-1.medium.com/max/2000/0*tUb_MApbO5N07qrP" alt="Planilla basica de costos + salario autoempleo" /></p>
<p>Como calculas ese sueldo de auto-empleo es también toda una cuestión, podrías prorratear [<a href="https://dle.rae.es/prorrateo">2</a>] en el calculo cuanto te salen los impuestos (como el monotributo), la obra social que elijas, cuantos días pretendes tomarte de vacaciones y cuantos por enfermedad y a la larga verás como ese costo de hora se incrementa.</p>
<p>La idea principal que quiero que te lleves es que</p>
<blockquote>
<p>si cobras por debajo de <strong>$427</strong> entonces estas trabajando gratis</p>
</blockquote>
<p>puedes que ese valor bajo te haga competitivo y sientas que tu negocio prospera pero financieramente no lo será. Descubre para ti cual es el numero correcto! y hazlo ahora.</p>
<p>Me trae al recuerdo la frase, desconozco su autoría,</p>
<blockquote>
<p>“<em>Si cobras poco nunca te faltará</em> el <em>trabajo, pero siempre te faltará dinero”</em></p>
</blockquote>
<h2 id="y-la-ganancia">¿Y la ganancia?</h2>
<p>Para finalizar esta idea nos faltaría a ese costo de hora sumarle un porcentaje de ganancia, porque que sea un auto-empleo o un emprendimiento en esencia es un negocio y debe, según el sistema capitalista, generar una ganancia. Sino estará trabajando y subsistiendo pero no tendrá un negocio financieramente conveniente.</p>
<p>Supongamos que decide tener una ganancia del <strong>30%</strong> entonces el valor de venta de su hora debería ser de <strong>$555.84</strong></p>
<p><strong>Valor hora: $427.57 + ($427.57 * 30 / 100) = $555.84</strong></p>
<p><img src="https://cdn-images-1.medium.com/max/2000/1*WGf2gbeLNgy9SmDS8BWdPQ.png" alt="Calculo básico con sueldo y margen de ganancia" /></p>
<h3 id="valor-hora--costo--ganancia"><strong>valor hora = COSTO + Ganancia</strong></h3>
<p>Cualquier valor que cobres por debajo de eso estará pasando progresivamente a modo supervivencia, es decir trabajar para cubrir costos, lo cual te puede llevar a situaciones peligrosas y complicadas financieramente.</p>
<p>Cobrar más o menos será en definitiva parte de tu estrategia comercial, puedes hacer excepciones, pero que no se conviertan en tu norma; solo quiero que seas cociente de lo que te comente hasta aquí.</p>
<p><strong>Auto-administrarse es la clave.</strong></p>
<p>Como le sucede a un conocido remisero que trata de tener su auto, cuando dejá de pagar el alquiler del mismo y pasa a una cuota, empieza a generar un poquito más de ingreso y sabe que a la larga el auto será su propiedad, pero tan pronto como una parte costosa del auto se rompe y el como nuevo dueño tiene que hacerse cargo, ahí empiezan una y otra vez sus problemas. Su ingreso no lo administra de la forma en que <strong>una parte sea para el negocio y otra parte para su salario</strong>, como su propio empleado para sus gastos personales.</p>
<p>Algunas actividades profesiones, para bien o para mal, reguladas suelen establecer una <strong>tabla honorarios</strong> por el trabajo en el cual basarse para hacer tu propio cálculo y seguramente tendrás cierta flexibilidad para cobrar más o menos que eso. No sé qué cálculos hacen esas organizaciones para determinar esos valores de honorarios.</p>
<h2 id="pero-cómo-cobrar-por-el-trabajo-independiente">Pero ¿Cómo cobrar por el trabajo independiente?</h2>
<p>Ya sabemos cuanto me sale el hacer, ahora reflexionemos sobre distintas formas comerciales de cobrar conceptualmente por ese trabajo.</p>
<p><img src="https://cdn-images-1.medium.com/max/3200/0*WXZXH0g7OqFevyCO" alt="" /></p>
<p>Conozco 3 formas principales por las cuales podemos cobrar por un trabajo de forma independiente: por el trabajo realizado, por el tiempo consumido y por el valor generado, esta última es la más sofisticada y con mayor potencial de generar ganancia a un negocio.</p>
<p>Te lo cuento en otro articulo <a href="https://medium.com/memorias-de-un-techie/c%C3%B3mo-se-puede-cobrar-por-tu-trabajo-reflexiones-de-un-emprendedor-cd791eecdb11">https://medium.com/memorias-de-un-techie/c%C3%B3mo-se-puede-cobrar-por-tu-trabajo-reflexiones-de-un-emprendedor-cd791eecdb11</a></p>matiasmasca¿Cuánto TE sale TÚ hora de trabajo? Reflexiones de un emprendedortest 12020-07-24T00:00:00+00:002020-07-24T00:00:00+00:00https://matiasmasca.github.io/aboutme/aboutme/test-1<p>test de post en categoria</p>test de post en categoria:notebook: Mi Cuaderno Digital2019-02-01T00:00:00+00:002019-02-01T00:00:00+00:00https://matiasmasca.github.io/aboutme/aboutme/project-mi-cuaderno-digital<p><strong>codename</strong>: <em>Cuaderno Gordo</em> - the chunky notebook
(May 2017 → Jun 2020)</p>
<p>It is a web app, with this api-rest, for communication between teachers and guardians. Actually it’s used in some public elementary schools of Corrientes province, Argentina.</p>
<p>I participated in the whole process from the Agile Inception to the deployment on servers; I collaborated with the product design process. Starting with some low-fi wireframe I developed the first version of the MVP app. After some validation we redesign and reimplement some parts of the app but in this phase I received most of the screens in html + css format to incorporate into the app. Finally I designed an API Restful that was consumed by an Android native App.</p>
<p>Desarrollamos íntegramente una plataforma de comunicación para el sector Educativo, desde el concepto, su diseño y desarrollo, hasta el despliegue; colaborando con la empresa Horeb Capacitaciones quién aportó su conocimiento en el campo, las validaciones tempranas con los usuarios y realizó las capacitaciones a los usuarios finales.</p>
<blockquote>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Mi Cuaderno Digital establece el paradigma donde la escuela va al Alumno. Pone a disposición de la comunidad educativa Herramientas Tecnológicas específicas para maximizar las oportunidades de mejora de los resultados educativos en todos sus niveles.
</code></pre></div> </div>
</blockquote>
<p>Diseñamos y construimos, en varios ciclos iterativos, una aplicación que pueda ser utilizada desde cualquier dispositivo: computadoras de escritorio, portátiles, netbooks, tablets y principalmente celulares de diferentes gamas; por ello desarrollar una solución accesible desde un navegador web o web app y una aplicación nativa para dispositivos móviles, con el sistema operativo Android.
Además de la aplicación web, diseñamos y desarrollamos una API RESTfull compatible con el estandar JSON:API lo que permite tener acceso a los datos de la plataforma desde diferentes fuentes y brinda la posibilidad de interactuar con sistemas pre-existentes.</p>
<p>Más información en <a href="https://micuadernodigital.com">https://micuadernodigital.com</a></p>codename: Cuaderno Gordo - the chunky notebook (May 2017 → Jun 2020):ant: Zap-em :mouse:2018-12-26T15:59:00+00:002018-12-26T15:59:00+00:00https://matiasmasca.github.io/aboutme/aboutme/zapem<p><strong>codename</strong>: zapem
(Dic 2018 → Nov 2019)
We develop the administrative management system of the company that streamlines its marketing processes, inventory control and service provision in its wide variety of clients.</p>
<p>The custom-developed web application was built in different incremental stages allowing the client to quickly start organizing their information and making use of the tool.</p>
<p><img src="https://raw.githubusercontent.com/matiasmasca/aboutme/gh-pages/assets/images/zapem_van.png" alt="https://raw.githubusercontent.com/matiasmasca/aboutme/gh-pages/assets/images/zapem_van.png" /></p>
<p>My participation was mainly in the design process with the client. I defined the initial data model and collaborated with some ideas for the GUI but another developer was who coded the whole app.</p>matiasmascacodename: zapem (Dic 2018 → Nov 2019) We develop the administrative management system of the company that streamlines its marketing processes, inventory control and service provision in its wide variety of clients.:rowboat: Aquaronte :skull:2018-11-28T13:16:27+00:002018-11-28T13:16:27+00:00https://matiasmasca.github.io/aboutme/aboutme/project-aquaronte<p><strong>Codename</strong> “<em>Aquaronte</em>”
(Dic 2018 → Feb 2020)</p>
<p>It is a web application for the administrative management of a traditional funeral business, which allowed to improve the key processes of the client and
save them hours of manual labor.</p>
<p>This company had been the victim of sabotage by an employee who left them without a management system.</p>
<p>We fully develop the company’s internal management system, a company with more than 120 years of history, with which we optimize its administrative processes, saving thousands of man hours.</p>
<p>We improved and increased the speed of the process of collecting fees for more than 5,000 monthly payments.</p>
<p>We create from the system with which they administer the collection to their clients, the management of contracts, the services they provide, among others. We also allow the generation of installment payment coupons, payment vouchers and the generation of different reports.</p>
<p>All this in a total process of 6 months. For the second month they were already working with our custom developed system.</p>
<p>I participated in the whole process from the Agile Inception to the deployment on servers. Mainly I designed the data model and the app architecture. Some screens of the web app were designed and implemented by other team members but usually I had to integrate them into the Ruby on Rails app. In this project there was another developer that helped with some features.</p>matiasmascaCodename “Aquaronte” (Dic 2018 → Feb 2020)Test: Markdown Extra Components2016-02-24T22:48:00+00:002016-02-24T22:48:00+00:00https://matiasmasca.github.io/aboutme/aboutme/markdown-extra-components<h2 id="summary">Summary:</h2>
<p>You can pick as item to see how to apply in markdown.</p>
<h4 id="especial-elements">Especial Elements</h4>
<ul>
<li><a href="#evidence">Evidence</a></li>
<li><a href="#side-by-side">Side-by-Side</a></li>
<li><a href="#star">Star</a></li>
<li><a href="#especial-breaker">Especial Breaker</a></li>
<li><a href="#spoiler">Spoiler</a></li>
</ul>
<h4 id="external-elements">External Elements</h4>
<ul>
<li><a href="#gist">Gist</a></li>
<li><a href="#codepen">Codepen</a></li>
<li><a href="#slideshare">Slideshare</a></li>
<li><a href="#videos">Videos</a></li>
</ul>
<hr />
<h2 id="evidence">Evidence</h2>
<p>You can try the evidence!</p>
<p><span class="evidence">Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.</span></p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><span</span> <span class="na">class=</span><span class="s">"evidence"</span><span class="nt">></span>Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.<span class="nt"></span></span></code></pre></figure>
<hr />
<h2 id="side-by-side">Side-by-side</h2>
<p>Like the <a href="https://medium.com/">Medium</a> component.</p>
<p><strong>Image</strong> on the left and <strong>Text</strong> on the right:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"side-by-side"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"toleft"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"image"</span> <span class="na">src=</span><span class="s">"https://matiasmasca.github.io/aboutme/assets/images/profile.jpeg"</span> <span class="na">alt=</span><span class="s">"Alt Text"</span><span class="nt">></span>
<span class="nt"><figcaption</span> <span class="na">class=</span><span class="s">"caption"</span><span class="nt">></span>Photo by John Doe<span class="nt"></figcaption></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"toright"</span><span class="nt">></span>
<span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
<div class="side-by-side">
<div class="toleft">
<img class="image" src="https://matiasmasca.github.io/aboutme/assets/images/profile.jpeg" alt="Alt Text" />
<figcaption class="caption">Photo by John Doe</figcaption>
</div>
<div class="toright">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<p><strong>Text</strong> on the left and <strong>Image</strong> on the right:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"side-by-side"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"toleft"</span><span class="nt">></span>
<span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"toright"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"image"</span> <span class="na">src=</span><span class="s">"https://matiasmasca.github.io/aboutme/assets/images/profile.jpeg"</span> <span class="na">alt=</span><span class="s">"Alt Text"</span><span class="nt">></span>
<span class="nt"><figcaption</span> <span class="na">class=</span><span class="s">"caption"</span><span class="nt">></span>Photo by John Doe<span class="nt"></figcaption></span>
<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
<div class="side-by-side">
<div class="toleft">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="toright">
<img class="image" src="https://matiasmasca.github.io/aboutme/assets/images/profile.jpeg" alt="Alt Text" />
<figcaption class="caption">Photo by John Doe</figcaption>
</div>
</div>
<hr />
<h2 id="star">Star</h2>
<p>You can give evidence to a post. Just add the tag to the markdown file.</p>
<figure class="highlight"><pre><code class="language-raw" data-lang="raw">star: true</code></pre></figure>
<hr />
<h2 id="especial-breaker">Especial Breaker</h2>
<p>You can add a especial <em>hr</em> to your text.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"breaker"</span><span class="nt">></div></span></code></pre></figure>
<div class="breaker"></div>
<hr />
<h2 id="spoiler">Spoiler</h2>
<p>You can add an especial hidden content that appears on hover.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"spoiler"</span><span class="nt">><p></span>your content<span class="nt"></p></div></span></code></pre></figure>
<div class="spoiler"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
<hr />
<h2 id="gist">Gist</h2>
<p>You can add Gists from github.</p>
<figure class="highlight"><pre><code class="language-raw" data-lang="raw">{ % gist sergiokopplin/91ff4220480727b47224245ee2e9c291 % }</code></pre></figure>
<script src="https://gist.github.com/sergiokopplin/91ff4220480727b47224245ee2e9c291.js"> </script>
<hr />
<h2 id="codepen">Codepen</h2>
<p>You can add Pens from Codepen.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">data-height=</span><span class="s">"268"</span> <span class="na">data-theme-id=</span><span class="s">"0"</span> <span class="na">data-slug-hash=</span><span class="s">"gfdDu"</span> <span class="na">data-default-tab=</span><span class="s">"result"</span> <span class="na">data-user=</span><span class="s">"chriscoyier"</span> <span class="na">class=</span><span class="s">'codepen'</span><span class="nt">></span>
See the Pen <span class="nt"><a</span> <span class="na">href=</span><span class="s">'https://codepen.io/chriscoyier/pen/gfdDu/'</span><span class="nt">></span>Crappy Recreation of the Book Cover of *The Flame Alphabet*<span class="nt"></a></span> by Chris Coyier (<span class="nt"><a</span> <span class="na">href=</span><span class="s">'https://codepen.io/chriscoyier'</span><span class="nt">></span>@chriscoyier<span class="nt"></a></span>) on <span class="nt"><a</span> <span class="na">href=</span><span class="s">'https://codepen.io'</span><span class="nt">></span>CodePen<span class="nt"></a></span>.
<span class="nt"></p></span>
<span class="nt"><script </span><span class="na">async</span> <span class="na">src=</span><span class="s">"//assets.codepen.io/assets/embed/ei.js"</span><span class="nt">></script></span></code></pre></figure>
<p data-height="268" data-theme-id="0" data-slug-hash="gfdDu" data-default-tab="result" data-user="chriscoyier" class="codepen">See the Pen <a href="https://codepen.io/chriscoyier/pen/gfdDu/">Crappy Recreation of the Book Cover of *The Flame Alphabet*</a> by Chris Coyier (<a href="https://codepen.io/chriscoyier">@chriscoyier</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async="" src="//assets.codepen.io/assets/embed/ei.js"></script>
<hr />
<h2 id="slideshare">Slideshare</h2>
<p>Add your presentations here!</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><iframe</span> <span class="na">src=</span><span class="s">"//www.slideshare.net/slideshow/embed_code/key/hqDhSJoWkrHe7l"</span> <span class="na">width=</span><span class="s">"560"</span> <span class="na">height=</span><span class="s">"310"</span> <span class="na">frameborder=</span><span class="s">"0"</span> <span class="na">marginwidth=</span><span class="s">"0"</span> <span class="na">marginheight=</span><span class="s">"0"</span> <span class="na">scrolling=</span><span class="s">"no"</span> <span class="na">style=</span><span class="s">"border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;"</span> <span class="na">allowfullscreen</span><span class="nt">></span> <span class="nt"></iframe></span></code></pre></figure>
<iframe src="//www.slideshare.net/slideshow/embed_code/key/hqDhSJoWkrHe7l" width="560" height="310" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen=""> </iframe>
<hr />
<h2 id="videos">Videos</h2>
<p>Do you want some videos? Youtube, Vimeo or Vevo? Copy the embed code and paste on your post!</p>
<p><strong>Example</strong></p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><iframe</span> <span class="na">width=</span><span class="s">"560"</span> <span class="na">height=</span><span class="s">"310"</span> <span class="na">src=</span><span class="s">"https://www.youtube.com/embed/r7XhWUDj-Ts"</span> <span class="na">frameborder=</span><span class="s">"0"</span> <span class="na">allowfullscreen</span><span class="nt">></iframe></span></code></pre></figure>
<iframe width="560" height="310" src="https://www.youtube.com/embed/r7XhWUDj-Ts" frameborder="0" allowfullscreen=""></iframe>jamesfosterSummary:Test: Markdown Common Elements2016-02-24T22:44:00+00:002016-02-24T22:44:00+00:00https://matiasmasca.github.io/aboutme/aboutme/markdown-common-elements<h2 id="basic-formatting">Basic formatting</h2>
<p>This note <strong>demonstrates</strong> some of what <a href="https://daringfireball.net/projects/markdown/">Markdown</a> is <em>capable of doing</em>.</p>
<p>And that’s how to do it.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html">This note **demonstrates** some of what [Markdown][some/link] is *capable of doing*.</code></pre></figure>
<hr />
<h2 id="headings">Headings</h2>
<p>There are six levels of headings. They correspond with the six levels of HTML headings. You’ve probably noticed them already in the page. Each level down uses one more hash character. But we are using just 4 of them.</p>
<h1 id="headings-can-be-small">Headings can be small</h1>
<h2 id="headings-can-be-small-1">Headings can be small</h2>
<h3 id="headings-can-be-small-2">Headings can be small</h3>
<h4 id="headings-can-be-small-3">Headings can be small</h4>
<figure class="highlight"><pre><code class="language-raw" data-lang="raw"># Heading
## Heading
### Heading
#### Heading</code></pre></figure>
<hr />
<h2 id="lists">Lists</h2>
<h3 id="ordered-list">Ordered list</h3>
<ol>
<li>Item 1</li>
<li>A second item</li>
<li>Number 3</li>
</ol>
<figure class="highlight"><pre><code class="language-raw" data-lang="raw">1. Item 1
2. A second item
3. Number 3</code></pre></figure>
<h3 id="unordered-list">Unordered list</h3>
<ul>
<li>An item</li>
<li>Another item</li>
<li>Yet another item</li>
<li>And there’s more…</li>
</ul>
<figure class="highlight"><pre><code class="language-raw" data-lang="raw">* An item
* Another item
* Yet another item
* And there's more...</code></pre></figure>
<hr />
<h2 id="paragraph-modifiers">Paragraph modifiers</h2>
<h3 id="quote">Quote</h3>
<blockquote>
<p>Here is a quote. What this is should be self explanatory. Quotes are automatically indented when they are used.</p>
</blockquote>
<figure class="highlight"><pre><code class="language-raw" data-lang="raw">> Here is a quote. What this is should be self explanatory.</code></pre></figure>
<hr />
<h2 id="urls">URLs</h2>
<p>URLs can be made in a handful of ways:</p>
<ul>
<li>A named link to <a href="https://daringfireball.net/projects/markdown/basics">Mark It Down</a>.</li>
<li>Another named link to <a href="https://google.com/">Mark It Down</a></li>
<li>Sometimes you just want a URL like <a href="https://google.com/">https://google.com/</a>.</li>
</ul>
<figure class="highlight"><pre><code class="language-raw" data-lang="raw">* A named link to [MarkItDown][3].
* Another named link to [MarkItDown](https://google.com/)
* Sometimes you just want a URL like <https://google.com/>.</code></pre></figure>
<hr />
<h2 id="horizontal-rule">Horizontal rule</h2>
<p>A horizontal rule is a line that goes across the middle of the page.
It’s sometimes handy for breaking things up.</p>
<figure class="highlight"><pre><code class="language-raw" data-lang="raw">---</code></pre></figure>
<hr />
<h2 id="images">Images</h2>
<p>Markdown can also contain images. I’ll need to add something here sometime.</p>
<figure class="highlight"><pre><code class="language-raw" data-lang="raw">![Markdowm Image][/image/url]</code></pre></figure>
<p><img src="https://kune.fr/wp-content/uploads/2013/10/ghost-blog.jpg" alt="Markdowm Image" /></p>
<p><em>Figure Caption</em>?</p>
<figure class="highlight"><pre><code class="language-raw" data-lang="raw">![Markdowm Image][/image/url]
<figcaption class="caption">Photo by John Doe</figcaption></code></pre></figure>
<p><img src="https://kune.fr/wp-content/uploads/2013/10/ghost-blog.jpg" alt="Markdowm Image" /></p>
<figcaption class="caption">Photo by John Doe</figcaption>
<p><em>Bigger Images</em>?</p>
<figure class="highlight"><pre><code class="language-raw" data-lang="raw">![Markdowm Image][/image/url]{: class="bigger-image" }</code></pre></figure>
<p><img src="https://kune.fr/wp-content/uploads/2013/10/ghost-blog.jpg" alt="Markdowm Image" class="bigger-image" /></p>
<hr />
<h2 id="code">Code</h2>
<p>A HTML Example:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">></span>
<span class="nt"><title></span>Document<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Just a test<span class="nt"></h1></span>
<span class="nt"></body></span>
<span class="nt"></html></span></code></pre></figure>
<p>A CSS Example:</p>
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nt">pre</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">.8em</span><span class="p">;</span>
<span class="nl">white-space</span><span class="p">:</span> <span class="n">pre</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">pre</span><span class="o">,</span> <span class="nt">table</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">code</span><span class="o">,</span> <span class="nt">pre</span><span class="o">,</span> <span class="nt">tt</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="n">Monaco</span><span class="p">,</span> <span class="n">Consolas</span><span class="p">,</span> <span class="n">Inconsolata</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
<span class="nl">background</span><span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">.05</span><span class="p">);</span>
<span class="p">}</span></code></pre></figure>
<p>A JS Example:</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Sticky Header</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">scroll</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">scrollTop</span><span class="p">()</span> <span class="o">></span> <span class="mi">900</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">body</span><span class="dl">"</span><span class="p">).</span><span class="nx">hasClass</span><span class="p">(</span><span class="dl">'</span><span class="s1">show-menu</span><span class="dl">'</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#hamburguer__open</span><span class="dl">'</span><span class="p">).</span><span class="nx">fadeOut</span><span class="p">(</span><span class="dl">'</span><span class="s1">fast</span><span class="dl">'</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">body</span><span class="dl">"</span><span class="p">).</span><span class="nx">hasClass</span><span class="p">(</span><span class="dl">'</span><span class="s1">show-menu</span><span class="dl">'</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#hamburguer__open</span><span class="dl">'</span><span class="p">).</span><span class="nx">fadeIn</span><span class="p">(</span><span class="dl">'</span><span class="s1">fast</span><span class="dl">'</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span></code></pre></figure>johndoeBasic formatting:mailbox: Novedades2015-06-01T16:18:00+00:002015-06-01T16:18:00+00:00https://matiasmasca.github.io/aboutme/aboutme/project-novedades<p><strong>codename</strong>: <em>Novedades</em></p>
<p>It was a web app for the administration of communication with clients in professional studios (like lawyers, designers, architect, etc.) . Mostly, it was about notifications of news and changes in the clients project.</p>codename: Novedades:ramen: Test: Indigo, minimalist jekyll theme2011-01-23T22:10:00+00:002011-01-23T22:10:00+00:00https://matiasmasca.github.io/aboutme/aboutme/indigo-jekyll-theme<p><img src="https://raw.githubusercontent.com/sergiokopplin/indigo/gh-pages/assets/screen-shot.png" alt="Screenshot" /></p>
<p>Example of project - Indigo Minimalist Jekyll Template - <a href="https://sergiokopplin.github.io/indigo/">Demo</a>. This is a simple and minimalist template for Jekyll for those who likes to eat noodles.</p>
<hr />
<p>What has inside?</p>
<ul>
<li>Gulp</li>
<li>BrowserSync</li>
<li>Stylus</li>
<li>SVG</li>
<li>Travis</li>
<li>No JS</li>
<li><a href="https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fsergiokopplin.github.io%2Findigo%2F">98/100</a></li>
</ul>
<hr />
<p><a href="https://sergiokopplin.github.io/indigo/">Check it out</a> here.
If you need some help, just <a href="https://github.com/sergiokopplin/indigo/issues">tell me</a>.</p>johndoe