JIGSAW

sites estáticos para desenvolvedores ágeis em PHP

POR DAIANE ALVES

@DaianeAlvesRJ

Lyseon Tech

Information

System

MSP

Microsoft

@PHPRIO

@PHPwomenrj

@womakerscode

Cronograma

Text

Grátis?
Bloqueia?
Baixa qualidade?

- Tipos de site

- Geradores de site estático

- Apresentando Jigsaw

- Desenvolvimento

- Variáveis do site

- Helpers

- Collections

- Deploy

Tipos de

Site

Tipos de site

Site

Dinâmico

O que É Site DinÂmico ?

- Flexibilidade para atualizar

- Ferramentas de Gerenciamento de conteúdo (WordPress, Joomla)

- Não necessita de um desenvolvedor

- Possui Banco de Dados

Site

estático

O que É Site estático ?

- Feito puramente em html

- Não possui banco de dados

- Necessita de um desenvolvedor

geradores de Site estático

- Desenvolvimento local

- Gera arquivos estáticos(html, css, js)

- Evita repetição de código

- Redução de custos com hospedagem

Prestação de serviços

Site estático

Pra quem?

Pessoa Física

Pessoa Jurídica

Text

Currículo on line

Página institucional

Quanto Custa um site estático?

Desenvolvimento

Manutenção

Tipos de geradores de sites estáticos

Gerador sites estáticos em PHP

geradores de

sites estáticos em PHP

staticgen.com

o que é jigsaw?

Quebra-cabeças

Jogos mortais

- Framework Laravel
- Desenvolvido pela Tigthen

- Matt Stauffer

- Maio/2015

- Commits: 784

- Stars: 1.3k

Jigsaw

Desenvolvimento - jigsaw

- Crie um diretório com o nome do seu projeto

mkdir my-site

- Navegue até o seu diretório

cd my-site

Desenvolvimento - jigsaw

- Instalando Jigsaw via composer

composer require tightenco/jigsaw

- Inicializando seu projeto

./vendor/bin/jigsaw init

Desenvolvimento - jigsaw

- Para buidar

/vendor/bin/jigsaw build

- Para visualizar o site: build manual

./vendor/bin/jigsaw serve

Desenvolvimento - jigsaw

- Compilando com Laravel Mix - Browsersync

npm install

- Build automático: monitorando mudanças

npm run watch

Desenvolvimento

jigsaw

- Estrutura de diretório

Tipos de conteúdo

- Laravel's Blade:

[nome_do_arquivo].blade.php

- Markdown

[nome_do_arquivo].md

- Ou vários outros tipos de arquivo

Tipos de conteúdo Markdown

- Linguagem de marcação

- Desenvolvida por John Gruber e Aaron Swartz

- Converte textos para html

- Utilizada em projetos no GitHub e no DevTo

- Exemplo: README.md, pull request, issues, etc

cOMANDOS BÁSICOS - MARKDOWN

- Títulos (<h1> a <h6>)

# Título nível 1
## Título nível 2
### Título nível 3
#### Título nível 4
##### Título nível 5
###### Título nível 6

cOMANDOS BÁSICOS - MARKDOWN

- Ênfase

Negrito: **texto** ou __texto__

Itálico: *texto* ou um traço-baixo _texto_

cOMANDOS BÁSICOS - MARKDOWN

- Links

[]() -[texto visível](https://exemplo.com/)

<> <https://exemplo.com/>

Variáveis do site

- Definindo uma variável para e-mail no config.php

<?php
return [
    'email' => 'email@exemplo.com'
];

- Você pode chamar esta variável em qualquer um dos seus modelos.

@extends('_layouts.master') 
@section('body') <p>Contact us at {{ $page->email }}</p> 
@stop

Helpers

Funções customizadas para serem usadas nas páginas.

Exemplo de uso: Método que identifica se a página atual pertence a uma seção específica, para realçar a seção atual em um menu.

config.php

<?php

return [
    'company' => 'Lyseon Tech',
    'selected' => function ($page, $section) {
        return str_contains($page->getPath(), $section) ? 'selected' : '';
    },
];

Helpers

Exemplo de uso: Método que identifica se a página atual pertence a uma seção específica, para realçar a seção atual em um menu.

/source/_partials_menu.blade.php

<a class="{{ $page->selected('about') }}" href="{{ $page->baseUrl }}/about">About Us</a>
<a class="{{ $page->selected('projects') }}" href="{{ $page->baseUrl }}/projects">Projects</a>
<a class="{{ $page->selected('posts') }}" href="{{ $page->baseUrl }}/posts">Blog</a>

<style>
.selected{
  font-weight: bold;
  color: red;
}
</style>

Collections

- São usadas para gerar páginas como por exemplo de postagens de blog ou artigos.

config.php

<?php

return [
    'company' => 'Lyseon Tech',
    'contact_email' => 'support@lt.coop.br',
    'collections' => [
        'people' => [
            'path' => 'people',
            'sort' => 'last_name',
        ],
        'posts' => [
            'path' => 'blog/{date|Y-m-d}/{filename}',
            'author' => 'Daiane Alves',
        ],
    ],
];