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
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 watchDesenvolvimento
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',
],
],
];Collections
- Criando _posts e _people
Collections
- Exemplo:
Na pasta _people três arquivos [pessoa].blade.php
Na pasta _post três arquivos [nome_do_arquivo].md
CollectioN: exemplo
CollectioN: exemplo
Depois disso é preciso criar o arquivo post dentro da pasta _layouts e chamar as variáveis que foram definidas no seu arquivo config.php
deploy
Servidor web que provê conteúdo estático
Git Hub Pages
Deploy
GitHub Pages
Gitlab Pages
Netlify
Amazon S3
Servidor próprio
EXEMPLOS DE Sites em Jigsaw
Lyseon Tech
PHPSP
Referências
https://jigsaw.tighten.co/docs/installation/
https://tighten.co/blog/introducing-jigsaw-a-static-site-generator-for-laravel-developers/
https://www.treinaweb.com.br/blog/geradores-de-sites-blogs-estaticos-o-que-sao-e-por-que-usa-los/
https://www.youtube.com/watch?v=xPccpoEiXUQ
daiane alves
@DaianeAlvesRJ
contato
jIGSAW - sITES ESTÁTICOS PARA DESENVOLVEDORES ÁGEIS
@DaianeAlvesRJ
Link Tutorial
Jigsaw - sites estáticos para desenvolvedores ágeis em PHP
By Daiane Alves
