Diretório no projeto e extensão das páginas home.marko, e de erro 404.marko e 500.marko

Fala Elías, tudo bem? Vamos lá:

Os templates marko de erro (404.marko e 500.marko) e o home (home.marko) não poderiam ser do tipo html, já que me parecem serem arquivos estáticos?

Na verdade não, eles serão arquivos que irão receber conteúdo do servidor para renderizar na tela, ou seja, o Express irá fornecer uma lista para que o template feito em Marko consiga ler essa lista e montar uma tabela.

Se confirmado que são estáticos, porque não estão no diretório de arquivos estáticos 'public' (src/app/public) do projeto (atualmente estão em diretórios dentro de src/app/views/base)?

Não são estáticas, seu conteúdo é preenchido e renderizado dinamicamente.

E ainda: como saber/definir se uma página (arquivo estático) deve estar no diretório de templates/views ou no diretório de arquivos estáticos?

Normalmente dentro da pasta src/app/public vão estar arquivos com conteúdo estático, ou seja, seu valor em produção será o mesmo escrito por nós em desenvolvimento.

Normalmente nessa pasta vão existir:

• imagens
• .js
• .css
• fontes
• ícones

Coisas do tipo, isso também é chamado de assets.

Espero ter ajudado.

Olá Matheus!

Na verdade não, eles serão arquivos que irão receber conteúdo do servidor para renderizar na tela, ou seja, o Express irá fornecer uma lista para que o template feito em Marko consiga ler essa lista e montar uma tabela.

Hum, até agora no curso me parece que estes arquivos são estáticos, então pela tua explicação entendo que adiante no curso eles terão conteúdo dinâmico...

Obrigado por esta e pelas demais explicações, valeu!

Atenciosamente.

É bem provável que tenha sim Elías.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

Olá Matheus!

Sobre o teu comentário em uma das respostas anteriores:

Na verdade não, eles serão arquivos que irão receber conteúdo do servidor para renderizar na tela, ou seja, o Express irá fornecer uma lista para que o template feito em Marko consiga ler essa lista e montar uma tabela, volto a repetir algumas perguntas, agora que cheguei ao final do curso:

1. Os templates marko de erro (404.marko e 500.marko) e o home (home.marko) não poderiam ser do tipo html, já que são arquivos estáticos (afinal seu conteúdo não é preenchido nem renderizado dinamicamente) ?

2. Por serem arquivos estáticos, porque não estão no diretório de arquivos estáticos 'public' (src/app/public) do projeto (atualmente estão em diretórios dentro de src/app/views/base)?

Aguardo, desde já obrigado!

Atenciosamente.

Fala ai Elías, vamos lá:

Os templates marko de erro (404.marko e 500.marko) e o home (home.marko) não poderiam ser do tipo html, já que são arquivos estáticos (afinal seu conteúdo não é preenchido nem renderizado dinamicamente) ?

Se eles forem do tipo .html não será possível utilizar os templates exclusívos do Marko. Por exemplo:

<ul>
    <for|color, index| of=colors>
        <li>${index}: ${color}</li>
    </for>
</ul>

A tag for é exclusiva do Marko.

Por serem arquivos estáticos, porque não estão no diretório de arquivos estáticos 'public' (src/app/public) do projeto (atualmente estão em diretórios dentro de src/app/views/base)?

Na verdade não são arquivos estáticos, são arquivos que possuem um conteúdo dinâmica, por exemplo:

Vá para a listagem de livros, caso não tenha nenhum, vá para o formulário e cadastre um novo, volte na listagem e veja que o livro estará lá.

Isso torna o conteúdo dinâmico.

Conteúdo estático é algo que a gente poe, um HTML puro, que só será atualizado via alteração manual do template.

Espero ter ajudado.

Olá Matheus!

Se eles forem do tipo .html não será possível utilizar os templates exclusívos do Marko

Na verdade não são arquivos estáticos, são arquivos que possuem um conteúdo dinâmica

Estou me referindo aos arquivos templates marko de erro (404.marko e 500.marko) e o home (home.marko), e não ao arquivo lista.marko ou qualquer outro que possa ter conteúdo dinâmico ou código marko. Confere estes 3 arquivos, eles não são arquivos estáticos?

Aguardo, desde já obrigado!

Atenciosamente.

Estou me referindo aos arquivos templates marko de erro (404.marko e 500.marko) e o home (home.marko), e não ao arquivo lista.marko ou qualquer outro que possa ter conteúdo dinâmico ou código marko. Confere estes 3 arquivos, eles não são arquivos estáticos?

Me manda o conteúdo deles, preciso dar uma olhada.

Abraços

Olá Matheus!

Seguem os conteúdos.

home.marko:

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/estatico/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/estatico/css/fontawesome.min.css" />
    <link rel="stylesheet" href="/estatico/css/casadocodigo.css" />
</head>
<body>
    <header class="cabecalhoPrincipal">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-4">
                    <h1 class="logo"><img src="/estatico/imagens/logo-casadocodigo.svg" alt="Casa do Código" /></h1>
                </div>
                <div class="cabecalhoPrincipal-navegacao col-8">
                    <a href="#" class="login">
                        <i class="fas fa-sign-in-alt"></i>Login
                    </a>
                </div>
            </div>
        </div>
    </header>
    <main class="conteudoPrincipal">
        <div class="container">
            <h1>Casa do Código - Home</h1>
        </div>
    </main>
    <footer class="rodape">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-4">
                    <img src="/estatico/imagens/logo-rodape.svg" class="logo-rodape" />
                </div>
                <div class="col-8">
                    <ul class="redesSociais">
                        <li><a href="http://www.facebook.com/casadocodigo" class="compartilhar-facebook" target="_blank">/CasaDoCodigo</a></li>
                        <li><a href="http://www.twitter.com/casadocodigo" class="compartilhar-twitter" target="_blank">@casadocodigo</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>

404.marko:

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/estatico/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/estatico/css/fontawesome.min.css" />
    <link rel="stylesheet" href="/estatico/css/casadocodigo.css" />
</head>
<body>
    <header class="cabecalhoPrincipal">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-4">
                    <h1 class="logo"><img src="/estatico/imagens/logo-casadocodigo.svg" alt="Casa do Código" /></h1>
                </div>
                <div class="cabecalhoPrincipal-navegacao col-8">
                    <a href="#" class="login">
                        <i class="fas fa-sign-in-alt"></i>Login
                    </a>
                </div>
            </div>
        </div>
    </header>
    <main class="conteudoPrincipal">
        <div class="container">
            <h1>NOT FOUND</h1>
            <p>Página não encontrada!</p>
            <a href="/">Voltar</a>
        </div>
    </main>
    <footer class="rodape">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-4">
                    <img src="/estatico/imagens/logo-rodape.svg" class="logo-rodape" />
                </div>
                <div class="col-8">
                    <ul class="redesSociais">
                        <li><a href="http://www.facebook.com/casadocodigo" class="compartilhar-facebook" target="_blank">/CasaDoCodigo</a></li>
                        <li><a href="http://www.twitter.com/casadocodigo" class="compartilhar-twitter" target="_blank">@casadocodigo</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>

Seguem os conteúdos (parte 2).

500.marko:

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/estatico/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/estatico/css/fontawesome.min.css" />
    <link rel="stylesheet" href="/estatico/css/casadocodigo.css" />
</head>
<body>
    <header class="cabecalhoPrincipal">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-4">
                    <h1 class="logo"><img src="/estatico/imagens/logo-casadocodigo.svg" alt="Casa do Código" /></h1>
                </div>
                <div class="cabecalhoPrincipal-navegacao col-8">
                    <a href="#" class="login">
                        <i class="fas fa-sign-in-alt"></i>Login
                    </a>
                </div>
            </div>
        </div>
    </header>
    <main class="conteudoPrincipal">
        <div class="container">
            <h1>Opss!</h1>

            <p>Houve um problema. Tente mais tarde.</p>
            <a href="/">Voltar</a>
        </div>
    </main>
    <footer class="rodape">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-4">
                    <img src="/estatico/imagens/logo-rodape.svg" class="logo-rodape" />
                </div>
                <div class="col-8">
                    <ul class="redesSociais">
                        <li><a href="http://www.facebook.com/casadocodigo" class="compartilhar-facebook" target="_blank">/CasaDoCodigo</a></li>
                        <li><a href="http://www.twitter.com/casadocodigo" class="compartilhar-twitter" target="_blank">@casadocodigo</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>

Aguardo, desde já obrigado!

Atenciosamente.

Fala Elías, tudo bem? Sim, você tem razão, todos eles são arquivos estáticos.

Acredito que o motivo de mantê-los com .marko foi por questão de padrão, ficaria estranho ter um .html e .marko misturado, assim, padronizando tudo para .marko mesmo sendo dinâmico ou não fica um pouco melhor.

Abraços e bons estudos.

Olá Matheus, tudo certo, e contigo?

Entendido, obrigado! \o/

Atenciosamente.

Estou bem também.

Magina, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.