Ruby on Rails Fullstack

Front-End

HTML, CSS e JS

Conceitos Básicos

  • HTML (Hypertext Markup Language) é uma linguagem de marcação
    • Conteúdos são dispostos dentro de tags
      • <tag> Conteúdo </tag>
    • Cada tag tem uma função diferente
      • <h1> => Header 1 (letras grandes em negrito)
      • <p>   => Parágrafos
      • <button> => Botões
    • Uma tag pode ter várias propriedades
      • <h2 id='subtitle' class='bla'> Oie </h2>

Conceitos Básicos

  • CSS (Cascade Style Sheet) é uma "linguagem" para adicionar estilos a um documento HTML. Podemos alterar:
    • Cores
    • Tamanhos
    • Transições
    • Bordas
    • Sombras
    • ...

Conceitos Básicos

  • JS (Javascript) é uma linguagem de programação que, atualmente, serve a diversos fins:
    • Animações
    • Validação de formulários
    • Requisições sem atualizar/recarregar
    • Transformações na página
    • "Ouvir" interações do usuário (EventListeners) e fazer algo de acordo com certa interação

Vejamos com mais detalhes

Estrutura Básica

<!-- Tudo deve estar envolto pela tag 'html' -->
<html>

  <!-- A tag 'head' guarda coisas mais lógicas (veremos mais depois) -->
  <head>
    <!-- A tag 'title' define o que aparecerá na aba da página -->
    <title>Título da página (na aba)</title>
  </head>

  <!-- A tag 'body' guarda tudo o que aparecerá DENTRO da página -->
  <body>
       <!-- A tag 'h1' é o maior header que HTML possui -->
      <h1>Título da página (na página)</h1>
  </body>
</html>

Estrutura Básica - Imagens

<!-- Tudo deve estar envolto pela tag 'html' -->
<html>

  <!-- ... -->

  <body>
    <!-- A tag 'h1' é o maior header que HTML possui -->
    <h1>Título da página (na página)</h1>

    <img src="iamges/poney.jpg" alt="Ponei rosa">

  </body>
</html>

Estrutura Básica - Forms

<!-- Tudo deve estar envolto pela tag 'html' -->
<html>

  <!-- ... -->

  <body>
    <!-- 'form' envolve todos os inputs de um formulário -->
    <form>
      <label for="input_nome">Qual seu nome?</label>
      <input type="text" placeholder="João das Neves" id="input_nome">

      <label for="input_email">Qual seu email?</label>
      <input type="text" placeholder="joao_neves@got.com" id="input_email">

      <label for="input_senha">Qual sua senha?</label>
      <input type="password" id="input_senha">

      <input type="submit" value="Enviar informações">
    </form>

  </body>
</html>

Ué...

<meta>

  • Precisa padronizar para utf-8?
  • Quer escrever a descrição que aparecerá no Google?
  • Quer decidir como sua página aparece no Facebook / Twitter quando alguém compartilha?

Use o <meta>, oras pois!

<meta name="" content="">

<meta>

<html>
  <head>
    <title>Whatever</title>
    <!-- Descrição no google -->
    <meta name="description" content="Melhor página da internet!">

    <!-- Aparência no Facebook -->
    <meta property="og:title" content="Exemplo - A melhor página da internet">
    <meta property="og:image" content="ponei.jpg">
    <meta property="og:description" content="A melhor página da internet">
    <meta property="og:site_name" content="Título da página"/>

    <!-- Aparência no Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@MelhorPagina">
    <meta name="twitter:title" content="Exemplo - A melhor página da internet">
    <meta name="twitter:description" content="A melhor página da internet">
    <meta name="twitter:creator" content="@MelhorPagina">
    <meta name="twitter:image:src" content="ponei.jpg">
  </head>

  <!-- ... -->
</html>

Tags demais para falar todas!

Veja quais são elas aqui

Nossa "melhor página" não está muito bonita...

Programando em CSS

  • Em CSS, precisamos saber o que queremos mudar e onde queremos que a mudança seja aplicada
  • Duas perguntas são primordiais:
    • Quero mudar só aquele elemento, um conjunto de elementos como aquele ou todos os elementos como aquele?
    • Quero mudar o elemento em si ou aquilo que envolve meu elemento? (tricky one)

Classes e IDs

Para nos ajudar a identificar um elemento específico ou um conjunto de elementos, tanto HTML quanto CSS e JS nos oferecem o conceito de classes e IDs

  • Classes e IDs são declarados como atributos em HTML
  • Um elemento pode ter várias classes, mas apenas um ID
  • Vários elementos podem ter a mesma classe, mas apenas um elemento pode ter um ID específico
  • Classes são manipulados em CSS e JS e seguem o padrão '.nome-da-classe'
  • IDs são manipulados em CSS e JS e seguem o padrão '#nome-do-id'

Classes e IDs

HTML

<h1>Header qualquer</h1>
<h1 class="red">Header de cor vermelha</h1>
<h1 class="red">Outro header de cor vermelha</h1>
<h1 id="super-h1" class="red">Header maior que todos, mesmo sendo h1</h1>
<h1 class="red green">Header green, mesmo com classe red</h1>
<h1 id="blue" class="red green">Header blue, mesmo com outras classes</h1>

Classes e IDs

CSS

/* alterar todos os <h1> */
h1{
    font-size: 50px;
}

/* alterar todos aqueles com class="red" */
.red{
    color: red;
}

/* alterar todos aqueles com class="green" */
.green{
    color: green;
}

/* alterar aquele com id="super-header" */
#super-header{
    font-size: 72px;
    border: none;
}

/* alterar aquele com id="blue" */
#blue{
    color: blue;
}

Juntando arquivos HTML e CSS

<html>
  <!-- ... -->

  <body>
    <!-- É possível programar em css dentro da tag 'style' -->
    <style>
      /* alterar todos os <h1> */
      h1{
        font-size: 50px;
      }
    
      /* alterar todos aqueles com class="red" */
      .red{
        color: red;
      }
    </style>

    <!-- ... -->
  </body>
</html>

Juntando arquivos HTML e CSS

<html>
  <head>
    <meta charset="utf-8">
    <title>Components demo</title>

    <!-- Quando seu CSS estiver em outro arquivo, use a tag 'link'
      o caminho relativo para seu arquivo deve ser especificado
      no atributo 'href' e o atributo 'rel' deve ser igual a
      'stylesheet'
    -->
    <link rel="stylesheet" href="css/style.css">
  </head>

  <!-- ... -->

</html>

CSS tem propriedades demais!

Veja quais são elas aqui

O mundo real de front-end

Uma breve explicação de alguns conceitos

Box-Model

  • Todos os elementos HTML são "caixas"
  • Podemos definir a largura (width), a altura (height) e a borda (border) da mesma
  • Se quisermos que o conteúdo da caixa se distancie da borda, incrementamos o padding do mesmo
  • Se quisermos que conteúdos externos se distanciem da borda, incrementamos a margin do mesmo

Box-Model

Box-Model

Como fazemos algo assim?

Box-Model - Divs

<!-- divs são containers lógicos em html -->
<div>
  <h2>Card Title</h2>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Doloribus blanditiis debitis veritatis, dicta commodi totam illum. 
    Quod pariatur rerum fugit officiis! Temporibus, reprehenderit. 
    Delectus eveniet molestias, ipsum natus nisi deleniti?
  </p>

  <a href="#/">Link</a>
</div>

Box-Model - Divs

body{
    font-family: 'Montserrat', sans-serif;
    background-color: #CCC;
}

div{
    width: 300px;
    background-color: white;
    padding: 15px 20px;
    border-radius: 5px;
}

div h2{
    margin-top: 0;
}

div p{
    text-align: justify;
}

div a{
    text-decoration: none;
    padding: 5px 10px;
    color: white;
    background-color: #2a7d98;
    border-radius: 3px;
}

E se tivermos várias outras divs?

Divs com classes

<!-- divs são containers lógicos em html -->
<div class="card">
  <h2>Card Title</h2>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Doloribus blanditiis debitis veritatis, dicta commodi totam illum. 
    Quod pariatur rerum fugit officiis! Temporibus, reprehenderit. 
    Delectus eveniet molestias, ipsum natus nisi deleniti?
  </p>

  <a href="#/">Link</a>
</div>

Divs com classes

body{
    font-family: 'Montserrat', sans-serif;
    background-color: #CCC;
}

.card{
    width: 300px;
    background-color: white;
    padding: 15px 20px;
    border-radius: 5px;
}

.card h2{
    margin-top: 0;
}

.card p{
    text-align: justify;
}

.card a{
    text-decoration: none;
    padding: 5px 10px;
    color: white;
    background-color: #2a7d98;
    border-radius: 3px;
}

Componentes CSS

  • Botões
  • Avatares (imagens com bordas circulares)
  • Banners
  • Cards
  • Forms
  • Navbars
  • Dropdowns

Todos com o mesmo estilo CSS (mesma classe)

10 componentes ~= 90% do design

Componentes CSS

Já fizemos um, por exemplo!

.card{
    width: 300px;
    background-color: white;
    padding: 15px 20px;
    border-radius: 5px;
}

.card h2{
    margin-top: 0;
}

.card p{
    text-align: justify;
}

.card a{
    text-decoration: none;
    padding: 5px 10px;
    color: white;
    background-color: #2a7d98;
    border-radius: 3px;
}

Componentes CSS

A ideia é que um componente seja altamente reutilizável

Componentes CSS

Alguns componentes são atômicos:

  • Avatares
  • Botões
  • Containers

Alguns componentes são moleculares (utilizam componentes atômicos):

  • Cards (utilizam botões)
  • Banners (utilizam containers e botões)
  • Navbars (utilizam containers, botões e avatares)

Vamos montar uma página de perfil!

Bônus: vamos publicar essa página!!

Publicando sua SPA (single-page application) com Github

  1. Crie um repositório local (git init)
  2. Conecte-o a um repositório remoto (hub create)
  3. Crie uma branch chamada gh-pages
  4. Envie suas alterações à gh-pages

Publicando sua SPA (single-page application) com Github

git init
hub create
gco -b gh-pages    # cria uma nova branch chamada gh-pages
gp origin gh-pages # envia as alterações feitas localmente à gh-pages

Acesse sua página!

http://GithubUsername.github.io/profile/

Próxima aula

Ruby On Rails - Aula 06

By Rafael Pereira Alonso

Made with Slides.com

Ruby On Rails - Aula 06

Sexta Aula da Atividade Complementar de Ruby On Rails, lecionada na Universidade Federal de São Carlos, campus Sorocaba, no primeiro semestre de 2019

  • 46

More from Rafael Pereira Alonso