Universal TODO lists for Text Editors (based on PlainTasks) ✔

# Git/Github Created: February 25, 2022 8:13 AM Tags: desenvolvimento, git, github, jogos, lab, mobile, web  **Git** é um *Sistema de Controle de Versão* distribuído gratuito e de código aberto projetado para lidar com tudo, desde projetos pequenos a muito grandes com velocidade e eficiência. Na Engenharia de Software, Controle de Versão é um componente do Gerenciamento de Configurações, também conhecido como: controle de revisão, controle de origem ou gerenciamento de código-fonte. Gerenciamento de versões, envolve manter o acompanhamento de várias versões de componentes do sistema e assegurar que as mudanças nos componentes, realizadas por diferentes desenvolvedores, não interfiram umas nas outras. O **GitHub** é uma plataforma de hospedagem de código para controle de versão e colaboração. Ele permite que você e outras pessoas trabalhem juntos em projetos à partir de qualquer lugar. # Sumário # Se prepare para a aula Vamos reservar alguns minutos para configurar o seu ambiente de trabalho local. ## Passo 1: Crie a sua conta no GitHub 1. Acesse [GitHub.com](http://github.com/) e clique em **Sign up**; 2. Escolha a conta gratuita; 3. Você receberá um e-mail de verificação no endereço fornecido; 4. Clique no link para concluir o processo de verificação. <aside> 💡 O GitHub foi projetado para ser executado nas versões atuais de todos os principais navegadores. Em particular, se você usa o Internet Explorer (IE) da Microsoft, deve estar usando a versão mais recente. Dê uma olhada na lista de [navegadores suportados.](https://docs.github.com/en/get-started/using-github/supported-browsers) </aside> ## Passo 2: Instale o Git No coração do GitHub está o *Sistema de Controle de Versão* de código aberto chamado Git. O Git é responsável por tudo que acontece localmente no seu computador relacionado ao GitHub. Vamos verificar se o Git já não está instalado em sua máquina. Abra o **Terminal** se estiver em um Mac ou **PowerShell** se estiver em uma máquina Windows e digite: ```bash git --version ``` Após executar o código no Terminal, você deverá ver algo do tipo: ```bash git version 2.22.0.windows.1 ``` ### Baixe e Instale o Git Caso não tenha o Git instalado, faça download e instale a versão mais recente do Git. neste link: [https://git-scm.com/downloads](https://git-scm.com/downloads) - Se você estiver trabalhando no Windows, é recomendado usar o Git Bash que já vem instalado com o pacote Git; - Se você estiver trabalhando em um Mac ou outro sistema baseado em Unix, você pode usar o aplicativo Terminal integrado. ### Configure o seu nome de usuário no Git O Git usa um nome de usuário para associar os commits a uma identidade, ou seja, toda vez que você enviar o seu código para o GitHub esse nome de usuário do git será usado para te identificar como autor do código enviado dentro do repositório no GitHub. <aside> 💡 O nome de usuário do Git é diferente do nome de usuário do GitHub. </aside> Para configurar o seu nome de usuário do Git para todos os seus repositórios no computador, faça: 1. Abra o Git Bash. 2. Defina um nome de usuário do Git ```bash git config --global user.name "Ada Lovelace" ``` 1. Confirme que você configurou o nome de usuário corretamente no Git, digitando: ```bash git config --global user.name > Ada Lovelace ``` ## Passo 3: Clone um Repositório Após instalar e configurar o Git vamos testar a instalação, para isto, experimente clonar um repositório do GitHub para sua máquina. Clonar um repositório significa criar uma cópia local no seu computador dos arquivos que estão armazenados em um repositório do GitHub. Abra o **Terminal** se estiver em um Mac ou **PowerShell** se estiver em uma máquina Windows e digite: ```bash git clone https://github.com/githubschool/scratch ``` Se tudo estiver funcionando corretamente, os arquivos do repositório *scratch* pertencentes ao usuário *githubschool* do Github, serão baixados para a sua máquina, e, você verá a seguinte mensagem no terminal: ```bash Cloning into 'scratch'... remote: Enumerating objects: 9, done. remote: Total 9 (delta 0), reused 0 (delta 0), pack-reused 9 Unpacking objects: 100% (9/9), done. ``` ## Passo 4: Prepare o seu Editor de Texto Para esta aula, usaremos um editor de texto básico para interagir com nosso código, e, esteja pronto para trabalhar com linha de comando usando o terminal. Você pode usar quase qualquer editor de texto, mas terá mais sucesso se usar qualquer um dos seguintes editores: - Visual Studio Code: [https://code.visualstudio.com/download](https://code.visualstudio.com/download) - Atom: [https://atom.io/](https://atom.io/) - Sublime: [https://www.sublimetext.com/3](https://www.sublimetext.com/3) - Notepad++: [https://notepad-plus-plus.org/downloads/](https://notepad-plus-plus.org/downloads/) - Notepad, Vi or Vim, GitPad. <aside> 💡 Use o **Visual Studio Code** 😉 </aside> Após instalar um editor de texto, verifique se você pode abri-lo à partir da linha de comando no terminal. Por exemplo, se tudo estiver instalado corretamente, se você digitar o comando abaixo no **Terminal** ou **PowerShell**, o *Visual Studio Code* vai abrir. ```bash code . ``` # Repositórios Um repositório contém todos os arquivos do seu projeto e o histórico de revisão de cada arquivo. Você pode discutir e gerenciar o trabalho do projeto dentro do repositório. Geralmente são usados para organizar um único projeto e podem conter: pastas e arquivos, imagens, vídeos, planilhas e conjuntos de dados. Os repositórios incluem um arquivo README escritos na linguagem de marcação Markdown, com informações sobre o seu projeto, bem como, um arquivo indicando qual é a licença do seu projeto. <aside> 💡 Um repositório pode ser um lugar onde você armazena ideias, recursos ou até mesmo compartilha e discute coisas com outras pessoas </aside> ## Crie um Repositório Git local Abra o **Terminal** se estiver em um Mac ou **Git Bash** se estiver em uma máquina Windows. Usando o comando `cd` (*change directory*) navegue para o diretório onde você deseja colocar a pasta do seu projeto. Por exemplo, digite o comando abaixo, caso queira colocar a pasta do seu projeto na Área de Trabalho do Windows. ```bash cd ~/Desktop ``` Use o comando `mkdir` (*make directory*) para criar a pasta do seu projeto através da linha de comando. ```bash mkdir sistema-erp ``` Usando novamente o comando `cd` (*change directory*), entre na pasta *sistema-erp* que acabamos de criar para nosso projeto. ```bash cd sistema-erp ``` Execute o comando `git init` para inicializar um novo repositório git no diretório raiz da pasta *sistema-erp.* Após executar o comando você vai ver a seguinte mensagem: *"Initialized empty Git repository in ...”*; no terminal. ```bash git init ``` ### Adicione um Novo Arquivo no Repositório Vamos adicionar um novo arquivo para nosso repositório usando comando `touch`. ```bash touch arquivo.txt ``` <aside> 💡 Esse comando não está disponível no **Prompt de Comand** ou **PowerShell** em ambientes Windows, por isso, **use o Git Bash** que já vem instalado com o pacote Git. </aside> Depois de criar o novo arquivo, vamos usar o comando `git status` para ver quais arquivos estão sendo monitorados pelo Git em nosso repositório. ```bash git status ``` ```bash On branch master No commits yet Untracked files: (use "git add <file>..." to include in what will be committed) **arquivo.txt** nothing added to commit but untracked files present (use "git add" to track) ``` Após executar o comando `git status` você vai ler na tela uma mensagem dizendo que o Git viu que você criou o arquivo chamado **`arquivo.txt`** , porém, a menos que você use o comando ****`git add` ele será ignorado pelo git. Execute o comando abaixo para que o git monitore o arquivo que criamos: ```bash git add arquivo.txt ``` Para adicionar todos os arquivos de uma pasta ao git, use o **ponto final** ao invés de informar o nome do arquivo. ```bash git add . ``` <aside> 💡 Essa ação será necessária sempre que qualquer arquivo for alterado ou acrescentado na pasta do seu proejto. Então, quando estiver pronto para salvar uma cópia do estado atual do projeto, você prepara as alterações com o comando `git add` , em seguida, você faz commit no histórico do projeto com `git commit` </aside> ### Faça um commit > Você pode salvar pequenos grupos de mudanças significativas como commits. > Vamos criar nosso commit, executando o comando abaixo: ```bash git commit -m "Primeiro commit" ``` Após executar o terminal irá mostrar as seguintes mensagens, com a quantidade de arquivos alterados, e, quantas inclusões e exclusões foram feitas. ```bash [master (root-commit) f1d0d18] primeiro commit 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 arquivo.txt ``` Assim como salvamos um arquivo que foi editado, um commit registra alterações em um ou mais arquivos. O Git atribui a cada commit um ID exclusivo, denominado SHA ou hash, que identifica: - Cada uma das alterações feitas; - O momento em que as alterações foram feitas; - O autor das alterações. Ao fazer um commit, você deve incluir uma mensagem que descreva brevemente as alterações. A mensagem no final do commit deve ser algo relacionado ao conteúdo do commit, por exemplo: uma nova funcionalidade, uma correção de bug, correção de erros de digitação. <aside> ⚠️ **Não coloque uma mensagem sem significado**, tais como: "asdfadsf" ou "foobar". </aside> ## Crie um Repositório no Github Acesse [https://docs.github.com/pt/get-started/quickstart/hello-world#creating-a-repository](https://docs.github.com/pt/get-started/quickstart/hello-world#creating-a-repository) e siga o passo a passo para criar um novo repositório chamado: **gestao-empresarial**; na sua conta do GitHub. <aside> 💡 Os nomes dos repositórios devem ser escritos em letra minúscula (caixa baixa), usando traço (-) para separar espaços em brancos. Não utilize acentos nem caracteres especiais nos nomes dos seus respositórios. </aside> Após criar um repositório no Github, você pode: - Clonar o repositório para sua máquina, ou seja, fazer uma cópia local; usando o comando `git clone` - Enviar um repositório git local para o github, através da linha de comando. ## Adicione seu Repositório Local no Github Para adicionar o repositório git que criamos em nossa máquina no github, execute os comandos abaixo: ```bash git remote add origin https://github.com/<NOME_DE_USUÁRIO>/gestao-empresarial.git git branch -M main git push -u origin main ``` <aside> ⚠️ Não esqueça de substituir <NOME_DE_USUÁRIO> pelo seu nome de usuário do GitHub </aside>

TODO-лист с дополнительной мотивацией, выполненной в игровой форме (капитан: Александр Старовойтов)

Todo tracker app com dashboard, feito com React 19 + Vite 7. UI em português (pt-BR).

No description available

No description available

No description available

No description available

Cointains a TODO android app controled with voice

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

Sergiohc19-pt-67-Todolist usando React y Fetch

No description available

No description available

No description available

HTML5 Definição e estrutura básica Em 1991 Tim Berners-Lee criou essa linguagem de marcação para melhorar a comunicação entre ele e seus colegas de trabalho no CERN, desde então já surgiram 5 versões e o HTML se tornou a base da web. Com o HTML definimos o significado e a estrutura do conteúdo da web e, além de texto, nossas páginas precisam de imagens, vídeos e vários outros formatos e para isso temos os elementos HTML. Um elemento HTML é formado pela tag de abertura e seus atributos, o conteúdo e uma tag de fechamento. E mais a frente veremos que existem elementos que não tem tag de fechamento. Com esses elementos podemos agrupar tipos de conteúdo, alterar tamanho e forma de fontes e adicionar diferentes mídias ao nossa página na web. E agora podemos ver como é a estrutura básica de um arquivo HTML. A primeira linha do documento deve ser o <!DOCTYPE html>, apesar de parecer um elemento HTML ela apenas diz ao navegador que ele está lidando com um arquivo do tipo HTML5. Os elementos HTML vem logo abaixo. <html> A tag html é a raiz do seu documento, todos os elementos HTML devem estar dentro dela. E nela nós informamos ao navegador qual é o idioma desse nosso documento, através do atributo lang, para o português brasileiro usamos pt-BR. <head> A tag head contém elementos que serão lidos pelo navegador, como os metadados - um exemplo é o charset, que é a codificação de caracteres e a mais comum é a UTF-8, o JavaScript com a tag script, o CSS através das tags style e link - veremos a diferença quando falarmos sobre CSS - e o título da página com a tag title. <body> E dentro da tag body colocamos todo o conteúdo visível ao usuário: textos, imagens, vídeos. Prática Como exercício para esse curso iremos construir um site pessoal, e precisamos começar com a estrutura básica que acabamos de ver. Vamos criar um arquivo index.html e adicionar o doctype e os elementos html, head e body. Depois adicionaremos os elementos meta e title, no primeiro adicionamos o atributo charset com o valor UTF-8 para dizer ao navegador qual é a codificação dos caracteres e no segundo podemos colocar nosso nome. E por último escreveremos nosso nome dentro do elemento body apenas para enxergarmos isso no navegador. Semântica Durante muitos anos o elemento padrão no HTML era a div, construíamos nosso conteúdo todo baseado nela, e assim nascia a sopa de divs. Mas em 2014 saiu a quinta versão do HTML, e com ela vieram vários mudanças importantes, como performance e acessibilidade, mas nesse curso introdutório vamos focar na semântica. A semântica nos permite descrever mais precisamente o nosso conteúdo, agora um bloco de texto não é apenas uma div, agora é um article e tem mais significado assim. E temos vários elementos para ressignificar as divs: <section> Representa uma seção genérica de conteúdo quando não houver um elemento mais específico para isso. <header> É o cabeçalho da página ou de uma seção da página e normalmente contém logotipos, menus, campos de busca. <article> Representa um conteúdo independente e de maior relevância dentro de uma página, como um post de blog, uma notícia em uma barra lateral ou um bloco de comentários. Um article pode conter outros elementos, como header, cabeçalhos, parágrafos e imagens. <aside> É uma seção que engloba conteúdos relacionados ao conteúdo principal, como artigos relacionados, biografia do autor e publicidade. Normalmente são representadas como barras laterais. <footer> Esse elemento representa o rodapé do conteúdo ou de parte dele, pois ele é aceito dentro de vários elementos, como article e section e até do body. Exemplos de conteúdo de um <footer> são informações de autor e links relacionados. <h1>-<h6> Eles não foram criados na versão 5 do HTML e nem são específicos para semântica, mas servem para esse propósito. São utilizados para marcar a importância dos títulos, sendo <h1> o mais importante e <h6> o menos. Uma dica: use apenas um <h1> por página, pois ele representa o objetivo da sua página. Prática Dando continuidade ao nosso site iremos montar sua estrutura. Pensei em adicionarmos um cabeçalho com nosso nome, uma lista de posts (como um blog) e um rodapé para nossos contatos. Vamos abrir nosso arquivo index.html e começar pelo cabeçalho: criamos um <header> logo abaixo do <body> e colocamos o título da nossa página dentro de um <h1>. Depois criaremos a lista de postagens: abrimos um elemento section e dentro dele adicionamos outro <header> contendo um <h2>. Notem que eu posso ter mais de um <header> na página. Para criar nossa postagem adicionamos um <article> com um <header> e um <h3>. O último passo desta etapa é criar um rodapé para nossas informações de contato: crie um elemento footer antes de fechar o </body>. Não se preocupe com o layout e com conteúdo da página, nós vamos tratar isso mais a frente. Textos e links A criação do HTML foi motivada pela necessidade de compartilhar textos e documentos, e mesmo depois de quase 30 anos, com toda a evolução da web, isso ainda representa uma boa parte do conteúdo da web. Já falamos anteriormente sobre os elementos h1-h6 e, eles são essenciais para nos indicar visualmente a importância e localização de seções de texto na página, mas para textos maiores e mais densos usamos o elemento p. O <p> representa um parágrafo, mas ele não suporta apenas texto, podemos adicionar imagens, código, vídeos e vários outros tipos de conteúdo dentro dele. Um outro elemento interessante e extremamente necessário na web é o <a> - que significa anchor/âncora, ele representa um hyperlink, é ele que interliga vários conteúdos e páginas na web. O elemento a tem vários atributos, mas vamos focar em dois, o href e o target. O href representa o hyperlink para onde sua âncora aponta, pode ser uma página do seu ou de outro site, um e-mail e até mesmo um telefone, os dois últimos precisam dos prefixos mailto: e tel:, respectivamente. O target neste momento vai servir para nos ajudar a abrir nossos links em outra aba do navegador usando o valor _blank. Prática Vamos adicionar um texto fictício a nossa postagem: logo após o fechamento do </header> vamos adicionar um elemento p e inserir um texto que vamos retirar do site lipsum.com E em alguma parte deste texto vamos adicionar um hiperlink para outra página e um para nosso e-mail. Criarei um hyperlink para meu perfil no LinkedIn: adicione o hyperlink no atributo href e o valor _blank no atributo target, assim o link será aberto em outra aba. E em algum outro lugar do texto adicionarei meu e-mail e um link para ele, desta forma: <a href="mailto:lucas@vilaboim.com" target="_blank">lucas@vilaboim.com</a> Imagens A web também é feita de imagens e para representá-las temos o elemento <img>, ele é um daqueles elementos sem tag de fechamento. O elemento img é bem simples, contendo apenas 2 atributos próprios, o src e o alt. O src é obrigatório e guarda o caminho para a imagem que você quer mostrar na página. O alt não é obrigatório mas é altamente recomendado por melhorar a acessibilidade, ele mostra a descrição da imagem caso ela não carregue e leitores de tela usam esse atributo para descrever a imagem para o usuário saber o que ela significa. Prática Vamos adicionar uma imagem ao cabeçalho da página e uma imagem a postagem. Primeiro vamos colocar as imagens na pasta do nosso projeto. Para a imagem do cabeçalho eu escolhi uma foto minha com 100 pixels de largura e 100 pixels de altura e para a imagem da postagem eu procurei por html code no site Unsplash, escolhi uma das imagens e deixei ela com 960 pixels de largura por 322 pixels de altura. Dentro do primeiro <header> da página e antes do <h1> iremos adicionar um elemento img e no atributo src colocamos o caminho para a nossa foto, /lucas-vilaboim.jpg, e o atributo alt deve conter um significado para a imagem, como no meu caso é uma ilustração, colocarei Ilustração do rosto de Lucas Vilaboim. E dentro do <header> do <article> vamos fazer a mesma coisa, mas agora depois do <h3>, e no atributo alt colocaremos Editor de texto mostrando códigos HTML. Listas Os últimos elementos que veremos neste módulo são os relacionados a listas: <ul>, <ol> e <li>. Listas servem para agrupar uma coleção de itens, como uma lista de ingredientes ou, como será no nosso caso, uma lista com contatos. O elemento ul cria uma lista não ordenada, onde a ordem dos elementos não é importante, e é representada com pontos, círculos ou quadrados. O <ol> serve para criar lista ordenadas, nessas a ordem importa, portanto elas são representadas com números, algarismos romanos ou letras. E o elemento li é um item dentro de uma dessas listas. Um <li> pode conter vários tipos de conteúdos, como parágrafos, imagens e até outras listas. Prática Adicionaremos uma lista de contatos ao rodapé da nossa página, e para isso usaremos também o elemento a que vimos anteriormente. Crie um elemento ul e dentro dele adicione um <li> com um elemento a, no atributo href adicione o link de alguma rede social que você mantenha e, no conteúdo da âncora coloque o nome dessa rede.

No description available

No description available

No description available

Aplikacja todo na zaliczenie przedmiotu "Programowanie w technologii .NET"

No description available

No description available

pte-todo

No description available