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 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',
        ],
    ],
];

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

https://slides.com/daianealvesrj/jigsaw

Jigsaw - sites estáticos para desenvolvedores ágeis em PHP

By Daiane Alves

Made with Slides.com

Jigsaw - sites estáticos para desenvolvedores ágeis em PHP

  • 681

More from Daiane Alves