<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <title>A Gramática do VIM</title>

        <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
        <meta name="author" content="Hakim El Hattab">

        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

        <link rel="stylesheet" href="reveal.js/css/reveal.css">
        <link rel="stylesheet" href="reveal.js/css/theme/night.css" id="theme">

        <!-- Code syntax highlighting -->
        <link rel="stylesheet" href="reveal.js/lib/css/zenburn.css">

        <!-- Printing and PDF exports -->
        <script>
            var link = document.createElement( 'link' );
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
            document.getElementsByTagName( 'head' )[0].appendChild( link );
        </script>

        <!--[if lt IE 9]>
        <script src="lib/js/html5shiv.js"></script>
        <![endif]-->

        <style type="text/css" media="screen">
            .happy {
                color: yellow;
            }

            .reveal section img {
                border: none;
            }

            .reveal ul.empty {
                list-style: none outside;
            }

			li {
				display: block;
			}

			.cursor {
				background-color: #666;
				color: white;
			}
        </style>
    </head>

    <body>
        <div class="reveal">
            <div class="slides">
                <section>
                    <section data-background="_images/vim.png" data-header>
                        <h1 class="semi-opaque">A Gramática do VIM</h1>
                    </section>
                </section>

                <section>
                    <section>
                        <img src="_images/avatar-20170726.png" alt="Me" style="float:left;width:200px;" class="no-border">

                        <div>
                            <ul class="empty">
                                <li>Júlio Biason</li>
                                <li>@juliobiason</li>
                                <li>julio.biason@gmail.com</li>
                                <li><a href="http://presentations.juliobiason.net">http://presentations.juliobiason.net</a></li>
                            </ul>
                        </div>
                    </section>

                    <section>
                        <img src="_images/start-a-fight.jpg" alt="Eu faço perguntas em reuniões que eu não sei nada e reunião explode; não é de propósito" class='stretch'/>

						<aside class="notes">
							Eu sou famoso (ou era) por entrar eu reuniões, fazer uma
							pergunta e a reunião explodir em discussões (úteis, diga-se
							de passagem). Mas eu não fazia isso de propósito.
						</aside>
                    </section>

					<section>
						<img src="_images/fast-speaker.jpg" alt="Eu falo rárpido">

						<aside class="notes">
							Eu também tenho costume de falar rápido.
							Essa apresentação talvez termine em menos de
							20 minutos, mas eu deixo mais tempo para as
							perguntas dessa forma.
						</aside>
					</section>
				</section>

				<section>
					<section>
						<img src="_images/vim-startup.png" alt="Tela inicial do VIM">

						<aside class="notes">
							Eu vou falar um pouco sobre VIM...
						</aside>
					</section>

					<section>
						<img src="_images/vim-quit.png" alt="Como sair do VIM">

						<aside class="notes">
							... mas eu não pretendo falar de comandos específicos...
						</aside>
					</section>

					<section>
						<img src="_images/vim-help.png" alt="Ajuda">

						<aside class="notes">
							... até porque tem bastante referencia de dos comandos
							por aí.
						</aside>
					</section>
				</section>

				<section>
					<section>
						<h2>Por que entender VIM?</h2>

						<h1 class="fragment">Ubiquidade</h1>

						<aside class="notes">
							VIM está em todo lugar. E mesmo que não seja usado
							o VIM de verdade, vários editores tem extensões
							para funcionar da forma que o VIM trabalha.

							E embora alguns possam dizer que programadores não
							precisam digitar rápido -- que eu concordo -- existe
							a questão de que só existem duas constantes no universo:
							a mudança e o fato de que quando tu conseguer ver
							mentalmente todas as alterações que tem que ser feitas
							para corrigir aquele bug infernal, alguém vai vir te
							interromper. Então tu precisa concluir as tarefas da
							forma mais rápida possível.
						</aside>
					</section>
				</section>

				<section>
					<section>
						<h2>O que é o VIM?</h2>

						<ul>
							<li>Editor modal.</li>
							<li>Editor com comandos de composição.</li>
							<li>(Extensível)</li>
						</ul>

						<aside class="notes">
							Primeiro, o VIM tem modos de edição. Mais sobre isso a seguir.

							Segundo, VIM tem comandos de composição. O que isso quer dizer?
							Que tu pode compor novos comando usando o que o editor oferece.
							Pode parecer como uma extensão, só que ao invés de fazer isso
							por código, tu faz isso por meio dos próprios comandos do editor.
							(Essa é a parte da gramática)

							Terceiro, em menor nível, VIM tem suporte à extensões como
							qualquer outro editor.
						<aside>
					</section>
				</section>

				<section>
					<section>
						<h2>Modos</h2>
					</section>

					<section>
						<h2>Modos: Normal</h2>

						<img src="_images/normal12.jpg" alt="">

						<aside class="notes">
							O modo normal é o modo padrão do VIM. É nesse modo que ele começa e
							é nesse modo que está a gramática que eu vou falar.
						</aside>
					</section>

					<section>
						<h2>Modos: Ex</h2>

						<img src="_images/182.gif" alt="">

						<aside class="notes">
							O modo ex é um modo de compatibilidade com o EX, que trabalha
							por linhas. Uma apresentação inteira poderia ser feita apenas
							com os comandos desse modo.

							... e também há alguma sobreposicão dos comandos do modo ex
							com os comandos do modo normal. Mas, de novo, isso é coisa
							para outra apresentação.
						</aside>
					</section>

					<section>
						<h2>Modos: Insert</h2>

						<img src="_images/broken-gif-Andy-Samberg.gif" alt="">

						<aside class="notes">
							O modo de inserção é o modo em que as coisas que tu
							digita realmente aparecem no texto.
						</aside>
					</section>

					<section>
						<h2>Modos: Visual</h2>

						<h2>Modos: Comando</h2>

						<h2>Modos: Pesquisa</h2>
					</section>
				</section>

				<section>
					<section>
						<h2>Gramática</h2>

						<p class="fragment">Verbos</p>

						<p class="fragment">Artigos</p>

						<p class="fragment">Substantivos</p>
					</section>
				</section>

				<section>
					<section>
						<h2>Substantivos</h2>

						<p><small>(Começando na ordem inversa)</small></p>

						<p>Substantivos são coisas. No caso de um editor, são elementos do texto. </p>
					</section>

					<section>
						<h2>Substantivos</h2>

						<p class="fragment">"Palavra"</p>

						<p class="fragment">Em Inglês: "Word"</p>
					</section>

					<section>
						<h2>Substantivos</h2>

						<p class="fragment">"Fim"</p>

						<p class="fragment">Em Inglês: "End"</p>
					</section>

					<section>
						<h2>Substantivos: Exemplos</h2>

						<p><code>palavra <span class="cursor">p</span>alavra palavra</code></p>

						<p>
							<strong><code>w</code></strong> (<i>next</i> word)
						</p>

						<p class="fragment">
							<code>palavra palavra <span class="cursor">p</span>alavra</code>
						</p>
					</section>

					<section>
						<h2>Substantivos: Exemplos</h2>

						<p><code>palavra pal<span class="cursor">a</span>vra palavra</code></p>

						<p>
							<strong><code>w</code></strong>
						</p>

						<p class="fragment">
							<code>palavra palavra <span class="cursor">p</span>alavra</code>
						</p>
					</section>

					<section>
						<h2>Substantivos: Exemplos</h2>

						<p><code>palavra <span class="cursor">p</span>alavra palavra</code></p>

						<p>
							<strong><code>e</code></strong> (end of word)
						</p>

						<p class='fragment'><code>palavra palavr<span class="cursor">a</span> palavra</code></p>
					</section>

					<section>
						<h2>Substantivos: Exemplos</h2>

						<p><code>palavra <span class="cursor">p</span>alavra palavra</code></p>

						<p>
							<strong><code>b</code></strong> (backwards word)
						</p>

						<p class='fragment'><code><span class="cursor">p</span>alavra palavra palavra</code></p>
					</section>
				</section>

				<section>
					<section>
						<h2>Verbos</h2>

						<p><small>(Artigos a seguir)</small></p>

						<p>Verbos são ações.</p>
					</section>

					<section>
						<h2>Verbos</h2>

						<p class="fragment">"Apagar"</p>

						<p class="fragment">Em Inglês: "Delete"</p>

						<p class="fragment">
							<strong><code>d</code></strong>
						</p>
					</section>

					<section>
						<h2>Verbos: Pequena Pausa</h2>

						<p>Verbos podem ser</p>

						<ul>
							<li>Intransitivos: Não requerem um objeto -- "Chover".</li>
							<li>Transitivos diretos: Requerem um objeto -- "Pegar"</li>
							<li>Transitivos indiretos: Requerem objeto e uma preposição -- "Responder"</li>
						</ul>

						<p class="fragment"><small>(Quem iria esperar aulas de português numa apresentação de software livre, hein?)</small></p>
					</section>

					<section>
						<h2>Verbos: Exemplos</h2>
						<p><code>palavra <span class="cursor">p</span>alavra palavra</code></p>

						<p>
							<strong><code>d</code></strong>
						</p>
					</section>

					<section>
						<img src="_images/anticipating.jpg" alt=""/>
					</section>


					<section>
						<h2>Verbos: Exemplos</h2>
						<p><code>palavra <span class="cursor">p</span>alavra palavra</code></p>

						<p>
							<strong><code>dw</code></strong> (apague palavra)
						</p>

						<p><code>palavra <span class="cursor">p</span>alavra</code></p>
					</section>

				</section>

				<section>
					<section>
						<h2>Artigos</h2>

						<p>Artigos são, de forma básica, modificadores de substantivos.</p>

						<p>Por exemplo: "<u>Uma</u> apresentação"</p>

						<p class="fragment">
							ou...
							"DUAS palavras"
						</p>
					</section>

					<section>
						<h2>Artigos</h2>

						<p>O VIM modifica o significado de artigos um pouco.</p>
					</section>

					<section>
						<h2>Artigos: Exemplo</h2>

						<p><code>palavra <span class="cursor">p</span>alavra palavra</code></p>

						<p>
							<strong><code>dw</code></strong> (apague palavra)
						</p>

						<p><code>palavra <span class="cursor">p</span>alavra</code></p>
					</section>

					<section>
						<h2>Artigos: Exemplo</h2>

						<p><code>palavra <span class="cursor">p</span>alavra palavra</code></p>

						<p>
							<strong><code>d2w</code></strong> (apague DUAS palavras)
						</p>

						<p class="fragment"><code>palavra<span class="cursor">&nbsp;</span></code></p>
					</section>
				</section>

				<section>
					<section>
						<h2>Lista de verbos mais usados:</h2>

						<ul>
							<li>"Delete" (apagar) (<code>d</code>)</li>
							<li>"Change" (alterar) (<code>c</code>)</li>
						</ul>
					</section>

					<section>
						<h2>Lista de substantivos mais usados:</h2>

						<ul>
							<li>"Word" (palavra) (<code>w</code>)</li>
							<li>"End" (fim [da palavra]) (<code>e</code>)</li>
						</ul>
					</section>

					<section>
						<h2>Lista de artigos mais usados:</h2>

						<ul>
							<li>Números</li>
							<li>"Inside" (dentro) (<code>i</code>)</li>
							<li>"Around" (ao redor) (<code>a</code>)</li>
						</ul>
					</section>

					<section>
						<img src="_images/record-scratch.jpg" alt=""/>
					</section>

					<section>
						<h2>Inside: Exemplo</h2>

						<p><code>def func(param1, <span class="cursor">p</span>aram2, param3):</code></p>

						<p>
							<strong><code>di)</code></strong>
						</p>

						<p class="fragment">
							<code>def func(<span class="cursor">)</span>:</code></p>
						</p>
					</section>

					<section>
						<h2>Inside: Exemplos</h2>

						<p><code>palavra pal<span class="cursor">a</span>vra palavra</code></p>

						<p>
							<strong><code>dw</code></strong>
						</p>

						<p class="fragment">
							<code>palavra pal<span class="cursor">p</span>alavra</code>
						</p>
					</section>

					<section>
						<h2>Inside: Exemplos</h2>

						<p><code>palavra pal<span class="cursor">a</span>vra palavra</code></p>

						<p>
							<strong><code>diw</code></strong>
						</p>

						<p class="fragment">
							<code>palavra&nbsp;<span class="cursor">&nbsp;</span>palavra</code>
						</p>
					</section>

					<section>
						<h2>Around: Exemplos</h2>

						<p><code>palavra pal<span class="cursor">a</span>vra palavra</code></p>

						<p>
							<strong><code>daw</code></strong>
						</p>

						<p class="fragment">
							<code>palavra&nbsp;<span class="cursor">p</span>alavra</code>
						</p>
					</section>

					<section>
						<h2>Around: Exemplos</h2>

						<p><code>palavra "palavra<span class="cursor">&nbsp;</span>palavra"</code></p>

						<p>
							<strong><code>da"</code></strong>
						</p>

						<p class="fragment"><code>palavra<span class="cursor">&nbsp;</span></code></p>
					</section>
				</section>

				<section>
					<section>
						<h2>Mais verbos:</h2>
						<ul>
							<li>Inserir -- Insert -- <code>i</code></li>
							<li>Adicionar -- Append -- <code>a</code></li>
							<li>Apagar -- Erase -- <code>x</code></li>
						</ul>

						<p class="fragment">Instransitivos!</p>
					</section>

					<section>
						<h2>E mais substantivos:</h2>

						<ul>
							<li>Fim da linha -- <code>$</code></li>
							<li>Coluna 0 -- <code>0</code></li>
							<li>Primeiro caracter não-vazio da linha -- <code>_</code></li>
						</ul>
					</section>
				</section>

				<section>
					<section>
						<h2>Mas...</h2>

						<p>Nem tudo são rosas...</p>

						<p class="fragment">VIM não tem um elemento "linha".</p>
					</section>

					<section>
						<h2>Apagando uma linha</h2>

						<p>
							<strong><code>d</code><span class="fragment">d</span></strong>
						</p> 

						<p class="fragment"><strong><code>yy</code></strong> também...</p>

						<p class="fragment">
							<small>
								(<code><strong>p</strong> é instransitivo também.</code>)
							</small>
						</p>
					</section>
				</section>

				<section>
					<h2>Uma dica: Como aprender a usar isso tudo?</h2>

					<ul>
						<ol class="fragment">Escolha um comando.</ol>
						<ol class="fragment">Use-o sempre que puder.</ol>
						<ol class="fragment">Quando achar que já decorou, volte para o ponto 1.</ol>
					</ul>
				</section>

				<section data-background='_images/thats-all-folks.jpg'>
                    <section>
                        <h1 class="fragment semi-opaque">Perguntas?</h1>
                    </section>
				</section>
            </div>
        </div>

        <script src="reveal.js/lib/js/head.min.js"></script>
        <script src="reveal.js/js/reveal.js"></script>

        <script>
            // Full list of configuration options available at:
            // https://github.com/hakimel/reveal.js#configuration
            Reveal.initialize({
                controls: true,
                progress: true,
                history: true,
                center: true,
                // showNotes: true,

                transition: 'slide', // none/fade/slide/convex/concave/zoom

                // Optional reveal.js plugins
                dependencies: [
                    { src: 'reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
                    { src: 'reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'reveal.js/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
                    { src: 'reveal.js/plugin/zoom-js/zoom.js', async: true },
                    { src: 'reveal.js/plugin/notes/notes.js', async: true }
                ]
            });
        </script>

    </body>
</html>