HTML Recomendação criador/construtor de sites básico estilo monitor de fósforo verde

[Pincipi]

Eu já tenho um domínio do registro.br e quero criar uma página básica, não comercial, com um texto e algumas imagens/fotografias pessoais, num fundo preto com letras verdes, tentando imitar o velho monitor de fósforo verde. No final da página um livro de visitas, onde qualquer pessoa poderia assinar/escrever. 

Alguma indicação gratuita?

[Joao531]

@Pincipi Para poder criar o site, você tem que aprender mais sobre HTML, CSS e JavaScript. Não são as linguagens tão difíceis de aprender. Para construir os arquivos HTML, CSS e JavaScript, você pode usar Notepad++ ou Visual Studio Code.

[Pincipi]

Os dois estão em inglês, tem alguma versão em português?

[Joao531]

17 minutos atrás, Pincipi disse:

Os dois estão em inglês, tem alguma versão em português?

Eu acho que só Visual Studio Code tem versão em português. O Notepad++ não sei direito, porque nunca usei esse programa, só ouvi falar.

[Pincipi]

O visual studio code tem na loja da microsoft, consegui baixar e instalar o pacote de idiomas, agora dá para entender e estou começando a trabalhar. Obrigado.

[Pincipi]

Bem, ficou assim; fui incapaz de entender como usar o visual studio code, a tela inicial dava a opção de escolher o layout e consegui clicar em escuro porém, parou por ai e não sei como ir para a próxima fase, ou selecionar a próxima escolha, consegui criar um novo arquivo que me deu a opção de escolher o idioma, selecionei HTML e também parou por ai, fui incapaz de prosseguir ou sair desta tela.

No caso do notepad++ eu baixei na loja da microsoft uma versão unofficial e consegui ir até selecionar o idioma HTML, digitei o texto da página sem as fotos e na hora de salvar, não consegui identificar qual seria a extensão correta a ser utilizada.

Veja bem, eu estou realizando digitalização de documentos e salvando e-mails individualmente e no intervalo destas duas atividades, enquanto está digitalizando e o circulo de salvando girando, eu aproveito os segundos de intervalo de tempo para me dedicar a criar a página. Eu não posso parar nenhuma das duas atividades primárias para me dedicar a criação da página, só posso aproveitar os segundos de intervalo da execução das duas tarefas. nestas circunstâncias, o tópico permanece em aberto para alguma sugestão de um criador/construtor de sites gratuito, que não precise realizar um curso antes.

Por exemplo; eu consigo digitar o texto em Word, selecionar cor da página em preto, cor das letras em verde, inserir as fotos e salvar como página da web mas, não sei como faço para publicar no domínio, nem como acrescentar o livro de visitas.

[Lusitano]

@PincipiOlá, antes de mais, deixe eu sublinhar que não sou grande ajuda quanto a programação web. Mas, quanto ao Notepad++ ele existe em idioma português pois eu o utilizo regularmente e está em pt.

Quanto ao que você pretende e uma vez que se trata de uma simples página, existem muitos templates gratuitos que respondem ás necessidades básicas e provavelmente existirá algum que vá de encontro ao que você pretende.

Por outro lado, boa parte desses templates já o irão "aliviar" de maiores conhecimentos de programação e caso não respondam a tudo o que você pretenda, apenas terá de desenvolver apenas aquilo que lhe falta.

Agora, uma nota muito importante. É bom você se inteirar sobre o necessário para ter um site seguro e isso irá requerer mais algumas coisas. De forma simples e resumida, ter apenas um domínio comprado o que é até bastante em conta, não é suficiente. Deixo o aprofundar desta matéria para os colegas mais dentro de construção de webpages, que serão muito melhor suporte informativo e ajuda para si.

 

Abraço

[DiF]

@Pincipi Basicamente, você pode apenas tirar algumas horas para entender o básico da estrutura HTML e o básico da estrutura CSS. Nada de coisa avançada.

Você no caso, só vai definir a cor da letra, o fundo preto.. e colocar os textos nos elementos.

 

Para dar uma incrementada, você pode procurar por efeitos no CSS de scanlines que é aquele efeito de tela antiga. 

Elaborei um exemplo de como ficaria um site usando o efeito de scanlines, imitando um monitor de fósforo verde no MS-DOS: https://dif1982.000webhostapp.com/old_cmd/

 

Basicamente, ele consiste em elementos <p>, <div>, <section> e <table>

Você pode usar por exemplos, algumas IDEs onde possui um "modo gráfico", como o dreamwaver, mas não recomendo muito usar ele..  é preferível aprender os elementos direto e usar o VScode, eclipse.. e/ou até mesmo um bloco de notas se quiser.

 

[Pincipi]

Eu diria que é quase exatamente isto, só faltou os queimados na tela do lotus 123 para ficar perfeito mas, ainda tem o problema de colocar no ar, tenho o domínio e não tenho a hospedagem (assunto de outro tópico).

[DiF]

@Pincipi Você pode recorrer a hospedagem gratuita, caso não queria contratar uma hospedagem paga. Embora eu recomende procurar uma hospedagem paga e barata. Já usei a hostinger uma vez e fiquei safisfeito com o que me ofereceram.. porém, como eu tinha perdido meu domínio, optei por cancelar minha contratação no servidor... enfim... Para o exemplo que mostrei,  usei uma hospedagem gratuita, que se for para algo simples, sem fins lucrativos e etc..  supre muito bem que é a 000webhost.   Eu to usando ele só pra testes e estudos.

 

Em tempo, esqueci de postar os códigos do exemplo do link acima. Postarei aqui neste post para que sirva de um pontapé inicial para você estudar eles e implementar o seu site. O que você pode tirar proveito dos códigos, é como criar o efeito de tela antiga "scanlines", o efeito do cursor piscando na tela. 

Quanto a fonte usada, baixe de um banco de fontes, uma fonte de terminal antiga e apenas fiz o css interpretar essa fonte. 

 

PS: A parte da tabela, só fiz por estética, há diversas formas de posicionar os elementos,  eu usei a tabela por ser mais prática e rápida.. porque era só dados tabulares, portanto, optei por não criar um layout com div ou section.

 

HTML:

<!DOCTYPE html>
<html lang="pt-br">

    <head>
    <meta charset="utf-8"/>
    <title>HTML5 – Estrutura básica</title>
    <link rel="preload" href="font/wincmd.woff2" as="font" type="font/woff2" crossorigin>
    <link href="stylesheet.css" rel="stylesheet">
    </head>
    <body>
           <div class="scanlines">
            <div class="screen"> 
                <p>
                    Starting MS-DOS . . .
                </p>
                
                <p>
                    HIMEM is testing extended memory . . . done.
                </p>
                <p>
                    C:\>C:\DOS\SMARTDRV.EXE /X
                </p>
                <p>
                    MODE prepare code page function completed
                </p>
                <p>
                    MODE select code page funcion completed <br/>
                    C:\>dir
                </p>
                <section class="padding">
                    Volume in drive C id MS-DOS_6</br>
                    Volume Serial Numver is 40B4-7F23</br>
                    Directory of C:\
                </section>
                <table>
                    <tr>
                        <td>DOS</td>
                        <td></td>
                        <td>&lt;DIR&gt;</td>
                        <td></td>
                        <td></td>
                        <td>12.05.20</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>15:57</td>
                      </tr>
                      <tr>
                        <td>COMMAND</td>
                        <td>COM</td>
                        <td></td>
                        <td>54 </td>
                        <td>645</td>
                        <td>94.05.31</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td class="right">6:22</td>
                      </tr>
                      <tr>
                        <td>WINA20</td>
                        <td>386</td>
                        <td></td>
                        <td>9 </td>
                        <td>349</td>
                        <td>94.05.31</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td class="right">6:22</td>
                      </tr>
                      <tr>
                        <td>CONFIG</td>
                        <td>SYS</td>
                        <td></td>
                        <td> </td>
                        <td>144</td>
                        <td>12.05.20</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>15:57</td>
                      </tr>
                      <tr>
                        <td>AUTOEXEC</td>
                        <td>BAT</td>
                        <td></td>
                        <td> </td>
                        <td>188</td>
                        <td>12.05.20</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>15:57</td>
                      </tr>
                      <tr>
                        <td></td>
                        <td class="position-Ra">5</td>
                        <td class="right position-R">file(s)</td>
                        <td> </td>
                        <td class="right position-L">64</td>
                        <td class="right position-L">326 bytes</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        
                      </tr>
                      <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>24</td>
                        <td class="right position-L">760</td>
                        <td class="right position-L">320 bytes</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>free</td>
                      </tr>
                </table>
                <section id="comando">
                    <div>C:\></div>
                    <div class="cursor move-R"></div>
                </section>
           </div>
        </div>
    </body>
</html>

 

CSS:

/* Importar a fonte usada */
@font-face {
    font-family: 'Old-cmd';
    src: 
         url('font/wincmd.woff2') format('woff2'),
         url('font/wincmd.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* LIST OF FURTHER IMPROVEMENTS */
/*
currently working on :
calculation draft for keyframes steps

$scan-moving-duration: 3s;
$scan-moving-delay: 7s;

total time = 10s (duration + delay)
keyframes :
    0%: wait
    15%: start moving
    85%: end moving & start waiting
    100% : wait

(the rest later)

*/
/* REGULAR SCANLINES SETTINGS */
/* MOVING SCANLINE SETTINGS */
/* MIXINS */
/* CSS .scanlines CLASS */
.scanlines {
    position: relative;
    overflow: hidden;
  }
  .scanlines:before, .scanlines:after {
    display: block;
    pointer-events: none;
    content: "";
    position: absolute;
  }
  .scanlines:before {
    width: 100%;
    height: 2px;
    z-index: 2147483649;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0.75;
    -webkit-animation: scanline 6s linear infinite;
            animation: scanline 6s linear infinite;
  }
  .scanlines:after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483648;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.3) 51%);
    background-size: 100% 4px;
    -webkit-animation: scanlines 1s steps(60) infinite;
            animation: scanlines 1s steps(60) infinite;
  }
  
  /* efeito de SCANLINES tela antiga */
  @-webkit-keyframes scanline {
    0% {
      transform: translate3d(0, 200000%, 0);
    }
  }
  @keyframes scanline {
    0% {
      transform: translate3d(0, 200000%, 0);
    }
  }
  @-webkit-keyframes scanlines {
    0% {
      background-position: 0 50%;
    }
  }
  @keyframes scanlines {
    0% {
      background-position: 0 50%;
    }
  }
  

/*  cursor piscando*/
.cursor {
    background: limegreen;
    line-height: 0px;
    margin-left: 40px;
    
    top: 46px;
    left: 130px;
    -webkit-animation: blink 0.8s infinite;
    width: 18px;
    height: 5px;
  }
  
  @-webkit-keyframes blink {
    0% {background: #222}
    50% {background: limegreen}
    100% {background: #222}
  }

body{
    background-color: black;
}



.screen {
   padding: 10px;
   font-family: Old-cmd;
   font-size: 18pt;
   background-color: black;
   color:limegreen;
}

.padding{
    padding: 10px;
}

.right {
    text-align: right;
    
  }

  .position-L{
     position: relative;
     right: -15px;
  }

  .position-R{
    position: relative;
    right: 29px;
 }

 .position-Ra{
    position: relative;
    right: 9px;
 }

 

11 horas atrás, Pincipi disse:

só faltou os queimados na tela do lotus 123 para ficar perfeito

Não sei o que é isso rsrs, mas se tiver uma imagem de queimado em png com fundo transparente, é possível colocar para reproduzir com perfeição