Programação informática ******

Índice Programação

HTML: Cores em HTML e CSS

Publicado a 18/03/2019, 13:28 por Luis Pitta -org-   [ atualizado a 18/03/2019, 13:41 ]

As cores em CSS podem ser codificadas utilizando:
    • Cores Hexadecimais
    • Cores RGB
    • Cores RGBA
    • Cores HSL
    • Cores HSLA 
    • Nomes de cores predefinidos


Utilização de um "Color Picker":



Mais sobre cores em CSS: 



A combinação de cores tem a sua "ciência". Veja as principais te´cnicas para misturarmos cores:

CSS: Utilizando a propriedade "color":




CSS: Formatar tabelas com estilo!

Publicado a 17/03/2019, 05:38 por Luis Pitta -org-   [ atualizado a 17/03/2019, 06:07 ]

Este exercício é muito interessante e pode ser feito em 15 minutos:

A partir de uma tabela inicial, académica e aborrecida vamos utilizar CSS para a formatar "over the top!"




Siga os seguintes passos:





Se gostaste deste exemplo deves agora visitar 

 Complete Guide to the Table Element




Podes também utilizar este gerador automático de formatação CSS:




Sabias que podes fazer toda a tabela só com DIVs e CSS?

Porquê?
Para a tornar mais rápida a carregar e permitir melhor adaptação aos dispositivos moveis (ecrãs mais pequenos).





CSS: Combinadores: espaço, >, + e ~

Publicado a 15/03/2019, 03:51 por Luis Pitta -org-   [ atualizado a 15/03/2019, 03:55 ]

Combinadores em CSS


CSS Combinadores

NotaUm elemento de combinação é algo que explica a relação entre os selectores.

Um seletor CSS pode conter mais de um seletor simples. Entre os seletores simples, que pode incluir um elemento de combinação.

Há quatro combinators diferentes em CSS3:

    • seletor descendente (space)
    • seletor filho (>)
    • seletor irmão adjacente (+)
    • selector irmão em geral (~)



CSS Combinators

A combinator is something that explains the relationship between the selectors.

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS:

    • descendant selector (space)
    • child selector (>)
    • adjacent sibling selector (+)
    • general sibling selector (~)


Javascript: Exercicios com funções

Publicado a 15/02/2019, 01:54 por Luis Pitta -org-   [ atualizado a 13/03/2019, 04:45 ]


Cria uma página no teu portefólio e elabora os seguintes exercícios:



Exercício 1: O seguinte código vai resultar em que valor?

function teste(numero)
{
while(numero < 6) {
numero++;
}
return numero;
}

alert(teste(3));


Exercício 2: Qual o output da seguinte expressão?

function multNums(a, b) {
var c = a*b;
}

multNums(5, 4);


Exercício 3: Preencher os espaços em branco com o nome de uma das 3 possíveis caixas de diálogo disponíveis em Javascript:


    _____________ serve para obter um input do utilizador.

    _____________ serve para mostrar uma mensagem numa caixa de popup.



Exercício 4: Preencher os espaços em branco para calcular o maior valor dos parâmetros:

function max(a, b) {
___ 
(a >= b)
    return __
;
_____  
 
 

    return b;
}


Exercício 5: Qual a sintaxe correta para nos referirmos a uma script externa com o nome "codigo.js":

<script href="codigo.js">
<script src="codigo.js">
<script name="codigo.js">



Exercício 6: Que alerta vai surgir no ecrã?

function teste(a, b) {
if(a > b) {
return a*b;
} else {
return b / a;
}
}
alert(teste(5, 15));



Brevemente mais exercícios!



Sololearn: Javascript Functions

Publicado a 14/02/2019, 09:48 por Luis Pitta -org-   [ atualizado a 19/02/2019, 05:26 ]


JavaScript Functions



A JavaScript function is a block of code designed to perform a particular task.
The main advantages of using functions:
Code reuse: Define the code once, and use it many times.
Use the same code many times with different arguments, to produce different results.
A JavaScript function is executed when "something" invokes, or calls, it.



What is a function?

A certain block of code that can be reused over and over again
Profession
Arithmetical term


Defining a Function



To define a JavaScript function, use the function keyword, followed by a name, followed by a set of parentheses ().

The code to be executed by the function is placed inside curly brackets {}.
function name() {.
//code to be executed.
}

Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).


Add the corresponding keyword and symbols to create a function named "test".

 
 
 test() 
 
 

   /* some code */
 
 


Calling a Function



To execute the function, you need to call it.
To call a function, start with the name of the function, then follow it with the arguments in parentheses.
Example:
function myFunction() {
alert("Calling a Function!");
}

myFunction();
//Alerts "Calling a Function!"
Try It Yourself

Always remember to end the statement with a semicolon after calling the function.


Fill in the blanks to define and call the "hello" function.

 
 
 hello() {
   alert("Hi there");
}
 
 
();


Calling Functions



Once the function is defined, JavaScript allows you to call it as many times as you want to.
function myFunction() {
alert("Alert box!");
}

myFunction();
//"Alert box!"

// some other code

myFunction();
//"Alert box!"
Try It Yourself

You can also call a function using this syntax: myFunction.call(). The difference is that when calling in this way, you're passing the 'this' keyword to a function. You'll learn about it later.


Function Parameters



Functions can take parameters
Function parameters are the names listed in the function's definition.

Syntax:
functionName(param1, param2, param3) {
// some code
}

As with variables, parameters should be given names, which are separated by commaswithin the parentheses.

Using Parameters



After defining the parameters, you can use them inside the function.
function sayHello(name) {
alert("Hi, " + name);
}

sayHello("David");
//Alerts "Hi, David"
Try It Yourself

This function takes in one parameter, which is called name. When calling the function, provide the parameter's value (argument) inside the parentheses. 
Function arguments are the real values passed to (and received by) the function.

When and how is the parameter used?

By placing the value before the function call
By placing the value before the function name
By calling the function and placing the value in the parentheses


Function Parameters



You can define a single function, and pass different parameter values (arguments) to it.
function sayHello(name) {
alert("Hi, " + name);
}
sayHello("David");
sayHello("Sarah");
sayHello("John");
Try It Yourself

This will execute the function's code each time for the provided argument.


Drag and drop from the options below to declare a function and call it, by passing "Test" as the argument:

 myAlert(txt) {
   alert("Hello " + txt);
}
;
Test
 
myAlert
 
()
 
("Test")
 
var
 
function


Multiple Parameters



You can define multiple parameters for a function by comma-separating them.
function myFunc(x, y) {
// some code
}

The example above defines the function myFunc to take two parameters.



CSS: Onde colocar o código CSS?

Publicado a 10/02/2019, 14:41 por Luis Pitta -org-   [ atualizado a 18/03/2019, 16:09 ]

Onde colocar o código CSS?

O código CSS pode ser inserido em três locais distintos: em linha (inline), em folha de estilos interna e em folha de estilos externa.



Vamos utilizar o seguinte exemplo de formatação:

Pretendemos atribuir a cor linen (#FAF0E6: salmão claroao fundo da página HTML ou seja, ao body.


1. Em linha (inline), ou seja, no atributo style da tag body:

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

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

</body> 

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

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

   <body>

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

   </body> 

3. Folha de estilos externa, ou seja, no ficheiro separado meuestilo.css:

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

   <body>

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

   </body> 

Conteúdo do ficheiro meuestilo.css:

 body {
       background-color: linen;
}


Mais informação em:




Emmet:

Publicado a 10/02/2019, 13:12 por Luis Pitta -org-   [ atualizado a 10/02/2019, 13:18 ]

Escreva código com mais velocidade com o Emmet.

Emmet cheat sheet:



No editor Atom o Emmet vem incialmente instalado.


"99 bottles" em 1500 linguagens de programação diferentes

Publicado a 08/02/2019, 02:05 por Luis Pitta -org-   [ atualizado a 14/02/2019, 09:56 ]


"99 bottles of beer"

Trata-se de uma canção monótona e repetitiva com versos iguais alterando somente o número que começa em 99 e termina em 1.
Como tem esta enorme repetição torna-se fácil de desenhar um programa que escreva a letra da musica. Vamos ver como:

Nas páginas 29 a 34 do Capítulo 1, surge este exemplo da musica "99 bottles of beer" que resolve a repetição 
através de um ciclo while e de um ciclo if else.




Versão 1: A versão original apresentada no livro (ver na pasta DRIVE de apoio):
Esta versão faz o output para a consola (carregue em F12 para visualizar o output)


<!doctype html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My First JavaScript</title>
  </head>
<body>
<script>
  var word = "bottles";
  var count = 99;
  while (count > 0) {
     console.log(count + " " + word + " of beer on the wall");
     console.log(count + " " + word + " of beer,");
     console.log("Take one down, pass it around,");
     count = count - 1;
     if (count > 0) {
         console.log(count + " " + word + " of beer on the wall.");
     } else {
         console.log("No more " + word + " of beer on the wall.");
     }

 }
</script>
</body>
</html>


Versão 2: A versão apresentada no livro, mas agora com as variáveis palavra e contador em português + outputs para o ecrã através da instrução document.write:
Ver no Github

<!doctype html>
  <html lang="pt">
  <head>
    <meta charset="utf-8">
    <title>99 bottles of beer com um ciclo while</title>
  </head>
<body>
<script>
  var palavra = "bottles";
  var contador = 99;
  while (contador > 0) {
     document.write(contador + " " + palavra + " of beer on the wall" + "<br>");
     document.write(contador + " " + palavra + " of beer," + "<br>");
     document.write("Take one down, pass it around," + "<br><br>");
     contador = contador - 1;
     if (contador > 0) {
         document.write(contador + " " + palavra + " of beer on the wall.");
     } else {
         document.write("No more " + palavra + " of beer on the wall.");
     }
 }
</script>
</body>
</html>

Versão 3: Igual à versão 2 com uma pequena "melhoria". Descobre qual é?
Ver no Github.

<!doctype html>
<html lang="pt">
<head>
    <meta charset="utf-8">
    <title>99 bottles of beer com um ciclo while</title>
</head>
<body>
    <script>
        var palavra = "bottles";
        var contador = 99;
	while (contador > 0) {
	   if (contador == 1) {
	      palavra = ("garrafas");
           }
           document.write(contador + " " + palavra + " of beer on the wall" + "<br>");
           document.write(contador + " " + palavra + " of beer," + "<br>");
           document.write("Take one down, pass it around." + "<br><br>");
           contador = contador - 1;
	   if (contador > 0) {
    document.write(contador + " " + palavra + " of beer on the wall.");
           } else {
document.write("No more " + palavra + " of beer on the wall.");
           }
        }
    </script>
</body>
</html>


Ver repositório no Githubhttps://github.com/lpitta/99bottles



Sobre a letra da música "99 bottles of beer"

Este site apresenta a referida letra da musica escrita em +1500 linguagens de programação diferentes:

A Wikipedia tem uma pequena entrada sobre esta canção: en.wikipedia.org/wiki/99_Bottles_of_Beer

No Youtube surgem algumas musicas com esta letra: veja esta ou esta.





Popularidade das Linguagens de Programação atuais

Publicado a 06/02/2019, 11:38 por Luis Pitta -org-   [ atualizado a 06/02/2019, 11:47 ]

O site Tiobe  calcula mensalmente um índice de popularidade de Linguagens de Programação.

"The ratings are based on the world-wide availability of skilled engineers, courses and third party vendors. The popular search engines Google, MSN, Yahoo!, and YouTube are used to calculate the ratings."

Estatística ao longo dos anos 1989-2019

Programming Language2019201420092004199919941989
Java121114--
C2122111
C++3433223
Python475102021-
Visual Basic .NET511-----
C#657830--
PHP7645---
JavaScript888719--
SQL9--6---
Ruby10101022---
Objective-C1134045---
COBOL252015113918
Lisp28131614862
Pascal1991414965314

Estatistica em janeiro 2019

Jan 2019Jan 2018ChangeProgramming LanguageRatingsChange
11Java16.904%+2.69%
22C13.337%+2.30%
34changePython8.294%+3.62%
43changeC++8.158%+2.55%
57changeVisual Basic .NET6.459%+3.20%
66JavaScript3.302%-0.16%
75changeC#3.284%-0.47%
89changePHP2.680%+0.15%
9-changeSQL2.277%+2.28%
1016changeObjective-C1.781%-0.08%
1118changeMATLAB1.502%-0.15%
128changeR1.331%-1.22%
1310changePerl1.225%-1.19%
1415changeAssembly language1.196%-0.86%
1512changeSwift1.187%-1.19%
1619changeGo1.115%-0.45%
1713changeDelphi/Object Pascal1.100%-1.28%
1811changeRuby1.097%-1.31%
1920changePL/SQL1.074%-0.35%
2014changeVisual Basic1.029%-1.28%

Retirado de ctp.di.fct.unl.pt/miei/lap/ em janeiro/2019



1-10 of 99