Programação informática

Índice Programação

Javascript: Regex em Javascript

Publicado a 19/01/2019, 08:17 por Luis Pitta -org-   [ atualizado a 19/01/2019, 08:18 ]

Javascript: Arrays

Publicado a 19/04/2018, 17:07 por Luis Pitta -org-   [ atualizado a 19/04/2018, 17:10 ]


<!DOCTYPE html>
<title>Exemplo de araays</title>


<p id="mensagem"></p>

<script>
  var cidades = ["Lisboa", "Londres", "Paris", "Tóquio", "Lima"];
  document.getElementById("mensagem").innerHTML = cidades;
</script>




Programação: Fases de desenvolvimento de um programa

Publicado a 07/03/2018, 01:16 por Luis Pitta -org-   [ atualizado a 07/03/2018, 01:20 ]

Fase de desenvolvimento de um programa

Fases de desenvolvimento de um programa



Abrir documento diretamente:


Aplicações Android

Publicado a 01/03/2018, 07:04 por Luis Pitta -org-   [ atualizado a 01/03/2018, 07:08 ]

CSS: Sintaxe e localização

Publicado a 25/02/2018, 13:12 por Luis Pitta -org-   [ atualizado a 18/01/2019, 03:48 ]

Sintaxe de uma declaração CSS:

 

Explicação:

O Seletor indica o elemento HTML que pretendemos formatar.

Entre chavetas temos as declarações (uma ou mais declarações) separadas por ponto e virgula (;)

Cada declaração inclui o nome da propriedade CSS e o seu respetivo valor, separados por dois pontos (:).


O bloco de declarações encontra-se sempre entre chavetas.

Cada declaração CSS termina sempre com um ponto e virgula (;)



Exemplo A: Afetar todos os elementos <p>


<!DOCTYPE html>
<html>

   <head>
      <style>
         p {
            text-align: center;
            color: red;
         }
      </style>

   </head>

   <body>
      <p>Todos os parágrafos vão ser afetados pelo estilo definido em style.</p>
      <p>Este também!</p>
      <p>E este!</p>
   </body>

</html>


Exemplo B: Afetar somente os elementos <p> cujo id seja #paragrafo1


O seletor id utiliza o atributo id de um elemento HTML para selecionar um elemento especifico.
O id de um elemento deve ser único dentro de uma página, de modo que o seletor de id seleccione somente um elemento!
O nome do id não pode começar por um numero.
Para selecionar um elemento com um id especifico devemos escrever o carater cardinal (#) seguido do id do elemento.

O estilo criado em style vai se aplicado ao elemento HTML cujo id="paragrafo1":

<!DOCTYPE html>
<html>

   <head>
      <style>
         #paragrafo1 {
            text-align: center;
            color: red;
         }
      </style>

   </head>

   <body>
      <p id="paragrafo1">Olá Mundo!</p>
      <p>Este parágrafo não é afetado pelo estilo.</p>
      <p>Nem este!</p>
   </body>

</html>


Exemplo C: Afetar todos os elementos de uma classe

O seletor de classe seleciona elementos com um atributo de classe especifico.
Para selecionar elementos de uma classe especifica devemos escrever o carácter ponto (.) seguido do nome da classe.

Neste exemplo todos os elementos HTML com a classe "centro" vão ser formatados a vermelho e centrados:

<!DOCTYPE html>
<html>

   <head>
      <style>
         .centro {
            text-align: center;
            color: red;
         }
      </style>

   </head>

   <body>
         <h1 class="centro">Cabeçalho centrado e com a cor vermelha</h1>
     <p class="centro">Parágrafo normal centrado e de cor vermelha.</p> 
   </body>

</html>


Exemplo D: Afetar somente os elementos <p> cuja classe seja "centro"

Podemos também definir que somente certos elementos HTML serão afetados pela classe.
Neste exemplo somente os elementos <p> com a classe "centro" serão centrados a vermelho:

<!DOCTYPE html>
<html>

   <head>
      <style>
         p.centro {
            text-align: center;
            color: red;
         }
      </style>

   </head>

   <body>
         <h1 class="centro">Cabeçalho centrado e com a cor vermelha</h1>
     <p class="centro">Parágrafo normal centrado e de cor vermelha.</p> 
   </body>

</html>


Exemplo E: Afetar todos os elementos <p>

Os elementos HTML podem tambem ser referenciados por mais do que uma classe

Neste exemplo o elemento <p> vai ser formatado de acordo com as classes "centro" e "largo":

<!DOCTYPE html>
<html>
   <head>
      <style>
         p.centro {
            text-align: center;
            color: red;
         }
   
         p.largo {
            font-size: 300%;
         }
      </style>

   </head>

   <body>
      <h1 class="centro">Este cabeçalho não vai ser afetado</h1>
      <p class="centro">Este parágrafo vai estar a vermelho e centrado.</p>
      <p class="centro largo">Este parágrafo vai estar a vermelho, centrado e com uma fonte larga.</p>

   </body>

</html>



Três locais distintos para inserir código CSS: (Retirado de www.w3schools.com/css/css_howto.asp)

Exemplo: Atribuir a cor linen (#FAF0E6: salmão claroa toda a página HTML (ou seja, no body)

1. Estilo em linha (inline): na tag body

<body style="background-color: linen">

   <h1>Este é um cabeçalho</h1>
   <p>Esté é um parágrafo.</p>
   <p>Este é outro parágrafo.</p>

</body> 

2. Folha de estilos interna: na tag style dentro do head

   </head>
<style>
   body {
       background-color: linen;
   }
</style>
   </head>

3. Folha de estilos externa: no ficheiro meuestilo.css

   <head>
      <link rel="stylesheet" type="text/css" href="meuestilo.css">
   </head>

Conteúdo do ficheiro meuestilo.css:

 body {
       background-color: linen;
}


Elaborar os seguintes exercicios:


Exercicios "How to":


Lista completa com 138 exercicios interativos:

Git: GitHub, GitHub Pages, GitHub Desktop e Atom

Publicado a 19/02/2018, 01:44 por Luis Pitta -org-   [ atualizado a ]



GitHub


Como criar e gerir um novo repositório no GitHub:

0. Caso ainda não tenha uma conta no GitHub. Criar uma conta gratuita no GitHub em https://github.com/join

1. Entrar no GitHub em https://github.com identificando-se com o seu login e password.

2. Criar um novo Repositório

Procedimento:

a. Clicar em + (canto superior direito) e escolha New Repository
b. Escolha um nome sugestivo e curto (sem maiúsculas, nem espaços)
c. Preencha a Descrição apasar de ser opcional (é uma boa prática)
d. Colocar o visto na opção "Initialize this repository with a README"
e. Clique em "Create repository"

3. Para permitir a publicação vamos ativar o GitHub Pages

Para isso devemos ir a Settings (mais acima do lado direito) descer até à área "GitHub Pages" e em Source ativar o Master Branch. 
Clicar em Save.

Deve surgir a mensagem: Your site is ready to be published at https://lpitta.github.io/hello-world/.

4. Para carregar os nossos ficheiros HTML, CSS e JS devemos ir a Code (mais acima do lado esquerdo) e  clicar no botão "Upload files" (mais abaixo do lado direito)

Quando os projectos ficarem mais complexos (com dezenas ou centenas de ficheiros) devemos instalar o GitHub Desktop que nos permite trabalhar localmente no nosso editor IDE favorito (Atom por exemplo) e sincronizar automaticamente com o Github.

5. Para testar o resultado do nosso código (HTML, CSS e Javascript)

Devemos esperar cerca de 10 a 20 segundos para que o upload seja validado pelo GitHub e enviado para o GitHub Pages

A seguir basta clicar no URL fornecido pelo GitHub Pages no passo 3: https://lpitta.github.io/hello-world/ e verificar o resultado.






GitHub Pages


O GitHub Pages é um serviço gratuito que permite alojar as nossas páginas web estáticas a partir do repositorio GitHub.

Cada conta GitHub recebe um site que pode armazenar um numero ilimitado de projetos.
O URL inicial tem a seguinte sintaxe: https://username.github.io

Como configurar o URL inicial:

Para configurar o URL inicial devemos criar um repositório com o nome especial username.github.io
Mais informação em https://pages.github.com


Exemplo do URL inicial
URL inicial do user LPitta: https://lpitta.github.io
Acesso à página GitHub do utilizador LPitta (Público): https://github.com/lpitta


Utilizando o FreeNomlpitta.ga
(o domínio deve apontar para o URL inicial do user, ou seja para 
https://lpitta.github.io)


Exemplo para o repositório "hello-world"
Acesso à página do repositório hello-world: https://github.com/lpitta/hello-world
Acesso ao output do repositório Hello-World: https://lpitta.github.io/hello-world/




Github Desktop vs Git scm


Github Desktop

GitHub Desktop permite fazermos o controlo de versões a partir do computador pessoal em ambiente gráfico.

Para instalar
descarregar e instalar o Github Desktop.


Git scm

O Git scm permite fazermos o controlo de versões a partir do computador pessoal com um interface de linha de comando.

Para instalar
Aceda à página de apoio:

Ambas as aplicações fazem sincronização automática e bidireccional com o repositório remoto GitHub.


Porquê o editor Atom


O editor Atom é bastante poderoso, gratuito e tem integração total com o Github.
Por esta razão é o nosso favorito.

Para instalar
Aceder a https://atom.io
descarregar e instalar o Atom.

A integração com o Github já vem pré instalada, só precisamos de fazer login (via token)


Desafios em 10 minutos

Publicado a 04/02/2018, 16:03 por Luis Pitta -org-   [ atualizado a 04/02/2018, 16:09 ]

FreeNom: Domínio gratuito

Publicado a 04/02/2018, 14:37 por Luis Pitta -org-   [ atualizado a 12/03/2018, 04:31 ]


Procedimento para criarmos um domínio de 1º nível gratuito


1. Aceder ao site Freenom: www.freenom.com/pt/index.html

2. Entrar com a conta aebenfica.org

3. Escolher um nome e associar um domínio de 1º nível gratuito

4. Pagar zero Euros

5. Redirecionar (URL Forwaring) o nome.dominio escolhido, para a conta do GitHub

Ver exemplo:

Exemplo de domínio gratuito registado e redireccionado:


Procedimento no FreeNom:

Fazer login
Escolher o menu Services > My domains

Na lista dos meus domínios clicar à frente em "Manage Domain"
Não clicar em "Get GoSite"

Em Management Tools escolher URL Forwarding:

No campo URL forwarding escrever: https://lpitta.github.io/hello-world/ (trocar este URL de exemplo pelo do teu site)
No campo Forward mode escolher "Redirect"

Guardar clicando no botão azul: "Set URL".

Testar o novo URL.


HTML: Aprender HTML em 12 minutos

Publicado a 25/01/2018, 15:51 por Luis Pitta -org-   [ atualizado a 19/02/2018, 01:08 ]


Parte 1: Learn HTML in 12 Minutes (2010: 12:16min)


Parte 2: More on to Learn More HTML in 12 Minutes:

Learn CSS in 12 Minutes http://youtu.be/0afZj1G0BIE Learn JavaScript in 12 Minutes http://youtu.be/Ukg_U3CnJWI




1-10 of 83