Pesquisar este blog

sexta-feira, 11 de março de 2016

Internet - a evolução da internet

Sempre que pensamos em internet temos em mente a palavra Globalização, pois ao publicarmos algo na internet esse "algo" publicado cria vida própria, já não podemos ter controle do que irá acontecer apos o clique no botão "Compartilhar". E algo pequeno muitas vezes sem pretensão alguma, se torna algo IMENSO.
"A internet não tem fronteiras"
Já dizia meu primeiro professor de informática nos anos 90.
O termo "internet" surgiu na década de 70 e naquela época era algo muito mais restrito do que a internet que temos hoje (tanto nos seus meios de acesso como no seu conteúdo). Como imaginar naquela época que um dia iriamos acessar a internet através de um celular, Tablets e computadores (só pra termos uma ideia da tecnologia daquela época, a IBM, que já era uma grande empresa do ramo de equipamentos de informática, só lançou seu primeiro computador pessoal em 1981 e os primeiros computadores pessoais - PC surgiram em 1971).
Quem criou a internet na realidade não a criou para as finalidades as quais fazemos uso da mesma hoje. Não, realmente não foi para acessar redes sociais e nem para socializar que a internet foi criada, e pra quem pensou que a internet foi criada para vender produtos, pasmem, o objetivo também não foi esse.
A internet foi criada em época de Guerra (Guerra Fria) e segundo histórias contadas, foi desenvolvida como um meio de facilitar a comunicação entre bases de guerra. Vale lembrar que o primeiro computador digital eletrônico com nome de ENIAC surgiu em 1946. E na década de 60 que foram sendo desenvolvidas as primeiras trocas de pacotes por rede. Para saber mais detalhes sobre as primeiras redes de computadores, devemos ler sobre o órgão ARPA, que era a instituição responsável pela tecnologia nos Estados Unidos na época da Guerra Fria. Sim como podemos perceber esse processo foi lento mas continuo, ainda na década de 70, foram realizadas as primeiras conexões intercontinentais (Estados Unidos e Noruega), nessa época também tivemos a criação dos primeiros vírus de computador, a idealização dos endereços eletrônicos (e-mail) e os primeiros SPAN (as maravilhas da internet). O protocolo TCP/IP também nasce nessa década. Vale lembrar que nessa época a internet era utilizada por grandes empresas e os endereços para acesso ainda era bem complicado, o uso da internet se baseava na troca de documentos pela rede e não para acesso de "sites" como vemos hoje. Só muito mais tarde em 1989 surge o conceito de www (world wide web- Mundo conectado em rede) proposto por Tim Berners Lee, em 1990 criou-se o protocolo HTTP que tornou o uso do WW possível e ainda nesse ano surge a linguagem HTML (Hiper Text Markup Language - Linguagem de marcação de hiper texto) e foi ai que surgiu o uso da internet para o publico, empresas privadas e particulares. Para tornar o uso da internet mais simples e tornar assim possível esse uso da internet pelo publico a empresa Internet Assigned Numbers Authority (IANA), foi a responsável pela gestão dos nomes dos domínios. A IANA era mais uma empresa Americana, pois quem financiou o inicio da internet foram os Estados Unidos. O HTML foi o grande salvador nessa história toda pois essa linguagem permitia criar as páginas, os links, e com o tempo com a necessidade de imagens, sons, cor foram implementando novas tags, tags de formatação de texto, formatação de alinhamento e a internet começou a se tornar atraente. Os sites eram escritos de forma complexa e toda atualização necessária, se tornava uma reconstrução total e reescrita completa de códigos e mais códigos.
Me lembro de quando iniciei minha vida digital, em meados dos anos 90, os sites eram estáticos e não se via vídeos na internet, pois a velocidade de transmissão de dados era muito baixa (internet discada, ou usa a internet ou usa o telefone...), para baixar um arquivo de foto, muitas vezes ficava-se horas aguardando o tal Download terminar, ah internet como eu aprendi a ser paciente com você! Os sites eram 'quadrados', quadrados com imagens e texto. Somente no final dessa década comecei a ver vídeos em Flash em sites o que se tornou uma febre mais tarde onde se encontrava sites inteiros desenvolvidos em flash onde tudo na tela interagia com o passar do cursor do mouse.
Em 1995 Håkon Wium Lie e Bert Bos apresentaram o CSS (Cascading Style Sheets - folhas de estilo) que foi apoiada pela W3C. Isso tornou possível o uso da linguagem HTML para estruturar as páginas e não mais para a sua formatação. Com isso, podiam-se centralizar todas as formatações em um bloco de códigos único facilitando, por exemplo, alterar a cor dos links de uma página ou de um conjunto de páginas em um simples e único código. Essa aplicação de CSS no lugar de formatar com o HTML também não se deram de um dia para o outro. Foi necessário todo um tempo para que os navegadores pudessem ser desenvolvidos de maneira a aceitar esses códigos e também para que os desenvolvedores se atualizassem e fizessem uso dessa tecnologia. E assim como o HTML foi evoluindo até o HTML5, o CSS também sofreu evoluções até chegar ao que temos hoje. Esse é um resumo da história da internet, passado de forma simples com objetivo apenas de tentar explicar o quanto evoluímos e certamente ainda vamos evoluir nesse assunto. E foi isso que me encantou nesse mundo. O eterno desafio de tentar acompanhar esse ritmo de informações e tecnologias. 

terça-feira, 8 de março de 2016

Desenvolvendo para Web, hora de testar meu HTML (utilizando Firefox)

Hora de testar meu HTML

Quando estamos desenvolvendo um código HTML testar é algo fundamental para sabermos se as coisas realmente estão ficando do modo em que planejamos. Acontece que não basta testar em apenas um navegador, e não adianta testar em uma só resolução estamos hoje vivendo uma época de grande diversidade de modos de acessar a internet e temos obrigação de atender bem o nosso usuário, esteja ele em um Notebook, Tablet ou Smartfone. 

A dica de hoje é TESTE MUITO o seu código e eu resolvi facilitar um pouco seus testes com uma ferramenta que simula em seu navegador as resoluções mais utilizadas pelas usuários e lhe permite ver como seu projeto vai se sair em cada um desses tamanhos de vídeos. Vamos lá ver como isso funciona então.

No navegador Firefox Complemento WEB DEVELOPER, uma ferramente bacana que lhe permite entre outras coisas visualizar seu projeto em tamanhos de vídeo diferentes, simulando um Smartfone ou Tablet por exemplo. Além dessa maravilhosa função ele ainda faz uma varredura em seu código CSS, HTML e Javascript e lhe indica se os mesmos possuem erros de sintaxe e se estão de acordo com a W3C (O World Wide Web Consortium é a principal organização de padronização da World Wide Web).
Como utilizar esse recurso:

  • Instale o Componente em seu Firefox através do Menu ► Complementos, como na imagem a seguir:

Componentes do Firefox

  • Digite o nome do complemento WEB DEVELOPER e digite Enter.


Procurando o componente Web Developer

  • Na imagem vimos que o componente que iremos utilizar é o primeiro da lista de complementos, clique em INSTALAR para instalar o componente e aguarde o processo.
  • Após instalar o componente reinicie o navegador clicando em Reiniciar agora.



  • Agora já estamos prontos para desfrutar dos recursos do componente a barra de ferramentas do componente aparece na imagem a seguir circulada em preto, se não aparecer clique com botão direito do mouse na barra de ferramentas do navegador e habilite a barra de ferramentas do WEB DEVELOPER.


Aparência do componente


  • Do lado direito da barra de ferramentas do WEB DEVELOPER você terá acesso ao resultado da analise dos códigos HTML, CSS e Javascript que é analisado e se tiver erros teremos o x no lugar da marca v. Como na imagem abaixo:


Foram verificados os códigos HTML, CSS e Javascript

  • Em RESIZE podemos escolher outras resoluções para ver nosso projeto.


Opção Resize
  • Escolha a opção VIEW RESPONSIVE LAYOUTS para ver seu projeto em tamanhos de vídeos diferentes.


Visualizando seu projeto em formatos diferentes de vídeo
Firefox Componente Web Developer

terça-feira, 1 de dezembro de 2015

Programar é bom! Mas saber gerenciar o seu sistema é fundamental!

Programar é bom! Mas saber gerenciar o seu sistema é fundamental!

Vamos falar sobre gerenciamento de projetos.
Essa é a parte essencial de um bom projeto e sem um bom gerenciamento o projeto costuma se tornar muito mais complexo e e demorado. Ter boa praticas na hora de pensar nos caminhos que seu projeto deve seguir do inicio ao fim é fundamental e um mal gerenciamento pode até mesmo comprometer o resultado de seu projeto, isso até mesmo quando estamos trabalhando sozinhos.
Muitas vezes iniciei projetos sozinha e mesmo tendo uma boa ideia em mente tive dificuldades em realizar os projetos que por fim foram esquecidos e deixados de lado depois de muitos faz e desfaz, codifica e re-codifica, por se tornarem muito demorados, muito complicados e até mesmo me perder durante o desenvolvimento. Em grupo então, ai sim, programar "na louca" é ficar batendo cabeça!
E por já ter enfrentado todos esses problemas por falta de um bom gerenciamento que hoje eu acho fundamental ter conhecimentos de estratégias que possam ajudar esse processo e facilitar e até mesmo salvar um projeto.
Uma ferramenta legal para ajudar é conhecer a PMI, um Instituto de Gerenciamento de Projeto que tem como objeto apontar quais são as boas práticas para gerenciamento de um projeto. O assunto é levado muito a sério por esse instituto que oferece treinamento e certificações ao profissionais que queiram aperfeiçoar suas técnicas em gerenciamento.
A dica de hoje é conheça um pouco mais sobre PMI (Project Management Institute) e ai vai um bom artigo para iniciar ou melhorar seu gerenciamento de projetos.
O link é: https://brasil.pmi.org/brazil/AboutUS/WhatisPMI.aspx

quinta-feira, 12 de novembro de 2015

Ferramenta On-Line para Diagramas

Ferramentas para facilitar documentação de sites e sistemas

Outro dia eu estava usando um computador que não era meu e precisa elaborar um diagrama de caso de uso, de um projeto o qual eu estava trabalhando. Então pensei vou ter que ir para minha casa fazer o diagrama, volto mais tarde. E então achei na internet uma ferramente que me ajudou bastante, uma ferramenta on-line, que não necessitava de instalações e nem mesmo um cadastro demorado e por isso resolvi compartilhar aqui essa solução.
A ferramenta se chama Cacoo e oferece uma quantidade incrível de possibilidades, desde UML, a Diagramas de Banco de dados a até mesmo protótipos de sites e sistemas, para pc ou mobile e tudo em Português!
O uso é bem simples basta clicar e arrastar sobre os objetos que quiser adicionar ou mover do seu diagrama, e o cadastro/ login pode ser feito pelo facebook.

quinta-feira, 24 de setembro de 2015

quarta-feira, 2 de setembro de 2015

POO - 03 Orientação a Objetos - O que é Herança, Visibilidades e encapsulamento

POO - 03 Orientação a Objetos - O que é Herança, Visibilidades e encapsulamento

Vamos de mais PHP e programação orientada à objetos. Agora vamos entender os termos Herança,  Visibilidade e Encapsulamento.

Visibilidade - é a forma como o atributo pode ser acessado e visualizado. Temos 3 tipos de visibilidade que podem ser trabalhadas nos atributos: Public, Private, e Protected.
public - aqui qualquer arquivo ou classe tem acesso a ver e alterar
private - somente a própria classe tem acesso ou visibilidade a essa propriedade, o acesso a essa propriedade só pode ser feito por meio de métodos..
protected - é como uma mistura da visibilidade public e private, de dentro da classe ele é acessado como o public pelos métodos, de outros objetos essa propriedade não poderá ser acessada diretamente o que faz essa propriedade assumir característica de uma visibilidade private quando acessado de outra classe que a herde.

Encapsulamento - é a possibilidade de visualizar e alterar informações.O aluno pode ver sua nota mas não pode digita-la para altera-la no sistema. Encapsular é uma forma de proteger as informações que não podem ser manipuladas por todos que acessem a mesma. Já que o aluno pode apenas visualizar a sua nota e não pode altera-la, não posso deixar essa informação dentro de um atributo declarado como public, pois o public permite que seja passado um novo valor facilmente por um usuário mal intencionado por exemplo.

Herança - é a característica de se poder passar propriedades de uma classe para outra. Na prática saberemos que uma classe carrega heranças de outras através da palavra chave extends.
Fica assim:
class nome_da_classe_que_recebe_a_herança extends nome_da_classe_pai {

Práticas e analise da classe MediaAluno() :

Essa analise tem como objetivo exibir na prática e identificar todos os termos vistos até o momento para um melhor entendimento dos mesmos e também para ver como todos esses termos se fazem necessário para um bom dialogo entre membros de uma equipe de desenvolvimento.

OBS: Aqui todos os comentários de código serão colocados com // no inicio do mesmo ou estando entre os símbolos de barra asterisco /* comentário */
Os textos em vermelho são apenas explicativos para fazer a prática não copiar os textos em vermelho ou comente os mesmos colocando // ao inicio do mesmo. Exemplo //esse é um atributo

arquivo MediaAluno.class.php essa classe é a classe pai (classe pai é uma classe que sede suas características e propriedades para outra classe através de herança).

<?php 
// declarando a classe, inicio da classe 
class MediaAluno{
private $nome;  //esse é um atributo com visibilidade public 
protected $turma; //esse é um atributo com visibilidade protecte
public $nota1;
public $nota2;
private $media; // esse é um atributo com visibilidade private
/*o valor do atributo $media não pode ser alterado por um usuario, só pode ser alterado por um método!*/

public function CalcularMedia($a, $b) {
//esse é o inicio do método CalcularMedia
    $this->nota1 = $a;
//o $this acessa elementos dessa classe
    $this->nota2 = $b;
    $this->media = ($this->nota1 + $this->nota2)/2;
    return $this->media;   
}// fim do método CalcularMedia()
}
// final da classe

// fim do código 
?>


Ótimo, agora vamos iniciar nossos primeiros testes:
TESTE 1:
$teste1 = new MediaAluno(); // instanciei a classe
$teste1->nota1 = 7;  // atribui valor em $nota1 
echo $teste1->nota1; // exibe o atributo $nota1

Salve e execute o arquivo no localhost e vera o seguinte resultado: 7

Então continuando o teste faça:
$teste1-> turma = "5A";  //atribui o valor em turma
echo $teste1->turma; // exibe o valor de turma

No teste acima vai dar erro na linha do $teste1-> turma = "5A"; isso porque o atributo $turma foi definido como protected, tente apagar essas duas ultimas linhas e atribuir um valor para a propriedade nome, e também dará erro por ser um elemento privado (private).

Como atribuir um valor para a propriedade nome e turma então? Vamos com mais um teste:
Agora nosso arquivo vai ficar assim: 
<?php 

class MediaAluno{
private $nome;  
protected $turma; 
public $nota1;
public $nota2;
private $media; 

public function CalcularMedia($a, $b) {
//esse é o inicio do método CalcularMedia
    $this->nota1 = $a;
//o $this acessa elementos dessa classe
    $this->nota2 = $b;
    $this->media = ($this->nota1 + $this->nota2)/2;
    return $this->media;   
}// fim do método CalcularMedia()

// agora teremos mais um método
public function testar($a,$b){
    $this->nome = $a; // valor passado pelo parâmetro do método ($a)
    $this->turma = $b;
    echo "O aluno/a eh:".$this->nome;// exibe o $nome
    echo"<br>"; // apenas uma quebra de linha
    echo "a turma eh: ".$this->turma;
}

}
// final da classe
$teste1 = new MediaAluno();
$teste1->nota1 = 7;
echo "<br>";
echo $teste1->nota1;
echo "<br>";
$teste1->testar('Laura', '4B'); // passa os valores por parâmetro
// os valores estão entre aspas pois é texto, separados por virgula
// Laura = $a     e     4B = $b


//echo $teste1->turma;
// fim do código 
?>

Agora basta salvar e executar o código no localhost e veremos que tudo irá funcionar normalmente.

TESTE 2:
Crie um arquivo FilhaDoMedia.class.php e escreva o seguinte código:

<?php

include "MediaAluno.class.php"; // inclui o arquivo 

class VerMedia extends MediaAluno {
/* note no class temos um extends então o VerMedia herda as propriedades de MediaAluno (classe do arquivo MediaAluno.class.php)
*/

    public function VA() {
//método VA
        $teste2 = new MediaAluno(); //instanciar a classe MediaAluno
        echo "a media eh:" . $teste1->CalcularMedia(10, 6); 
// chamar o método CalcularMedia do arquivo MediaAluno.class.php
        $teste2->turma = "Turma 1C"; // passa o valor para a turma
        echo "<br>";
        echo $teste2->turma; // exibe a turma
        echo '<br>';
         
    }
}

$t = new VerMedia();

$t->VA();
?>

Salve e execute o arquivo FilhaDoMedia.class.php no localhost

Agora vamos passar um valor para o $nome, assim:
Basta acrescentar a linha abaixo dentro do método VA() abaixo do echo "<br>";

$teste2->nome = "Rita";
echo $teste2->nome;

Salve e execute o arquivo no localhost, e então... Deu erro né. Pois é então o Private só pode ser acessado via método e dentro do próprio arquivo, e o protected já pode ser trabalhado por método fora e dentro do seu arquivo.
Pois então agora sim chegamos ao fim desse post, espero ter ajudado e até o próximo post!

sexta-feira, 28 de agosto de 2015

HTML5 - 02 Tags parágrafos, quebras de linhas e como trabalhar com folhas de estilos CSS

HTML5 - 02 Tags de parágrafo, quebras de linhas, destacando trechos e texto e uso de CSS no seu HTML

Chegou a hora de começarmos a trabalhar nosso HTML com uma as tags mais utilizadas e além disso tornar tudo mais colorido e bonito fazendo uso das folhas de estilo (CSS). Se ainda não viu o ultimo artigo HTML5 - 01  veja e conheça como é a estrutura básica de uma página web.
As tags desse artigo são: br, p, strong e em.

A primeira coisa a saber, é que criar um novo parágrafo é algo totalmente diferente de dar uma quebra de linha <br> (break line). Um novo parágrafo é o inicio de uma nova sentença em um texto, uma quebra de linha pode ocorrer dentro da sentença quando se tem o objetivo de fazer com que o texto ocupe menos espaço horizontalmente.

Para a tag <p> que é utilizada para determinar os parágrafos temos a finalização </p> no fim do parágrafo.
Exemplo:
<p> Minha sentença ficará dentro das tags e aqui estamos vendo como isso ocorre </p>

Exemplo dentro de uma página HTML:
<!DOCTYPE html>

<html>
    <head>
        <title>Título da página</title>
        
    </head>
    <body>
        <p>
            O HTML é utilizado para criar páginas web e ele vem evoluindo conforme as necessidades e novas formas de navegar na internet e as novas formas de se conectar a internet.
        </p>
        <p>
            O mundo de informações online faz com que as pessoas estejam constantemente conectadas e que todos queiram acessar essas informações de forma cada vez mais rápida. O HTML precisa ser eficiente e eficaz e também precisa trazer resultados cada vez mais bonitos e eficazes para atender essas novas necessidades.
        </p>
    </body>
</html>


Como vimos no código acima os parágrafos podem e devem organizar as sentenças de um texto, assim como fazemos quando escrevemos uma redação, dividindo o texto em parágrafos.

Já na quebra de linha utilizamos o <br>
Exemplo:
Esse texto ficara na linha de cima
<br> esse texto a frente da tag br ficará na linha abaixo
no html fica: 
<!DOCTYPE html>

<html>
    <head>
        <title>Título da página</title>
        
    </head>
    <body>
      Agora vamos praticar...
      Esse texto foi escrito na linha abaixo
      Esse texto esta na terceira linha
      <br> agora utilizei o br
    </body>
</html>
Realizando esse código podemos ver o seguinte resultado:
Como visto no exemplo acima a quebra de linha só acontece com o uso da tag <br>. Mesmo pulando de linha com a tecla enter no teclado na hora de escrever o código, mesmo assim a linha 1 e a segunda linha ficam na mesma linha quando visualiza-se o resultado no navegador.
Agora vamos utilizar a quebra de linha e o parágrafo no mesmo arquivo:
Código: 
<!DOCTYPE html>

<html>
    <head>
        <title>Título da página</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
      Esse texto foi escrito na linha 1
      Esse texto esta na segunda linha
      <br> agora utilizei o br
      <p>
          Esse é uma parágrafo escrito com a tag p do HTML e agora podemos ver o efeito do parágrafo e da quebra de linhas juntos no mesmo arquivo.
      </p>
    </body>
</html>
Resultado: 

<strong> - tag para destacar um trecho de um texto tornando o mesmo com aspecto em negrito, essa tag também necessita ser finalizada.
Exemplo:
          <p> Esse é um parágrafo escrito com a tag p do <strong> HTML </strong> e agora podemos ver o efeito do parágrafo e da quebra de linhas juntos no mesmo arquivo.   
 

Diferenças entre <strong> e <b> 

A tag strong veio com objetivo de realmente destacar um texto ou trecho de um texto. A tag <b> era utilizada apenas para deixar um texto ou trecho de texto em negrito e foi descontinuada no HTML5, isso porque a tag strong foi julgada como mais semântica para a necessidade de destacar textos e o mais importante é que esta tag <strong> consegue indicar para os buscadores que esta parte do texto é mais importante (mais um ponto para o SEO).

<em> - a tag em é para texto enfatizado e gera um efeito de texto em itálico, essa tag também precisa ser finalizada.
Exemplo:
          <p> Esse é um <em> parágrafo</em> escrito com a tag p do <strong>HTML </strong></p>
E agora podemos ver o efeito do parágrafo e da quebra de linhas juntos no mesmo arquivo.    
a palavra "parágrafo" esta na tag <em> e a palavra "HTML" esta em <strong>.

Conhecendo as folhas de estilo

No HTML algumas tags sevem como "caixas" que envolvem os conteúdos e que podemos utiliza-las como parâmetro para que o CSS formate apenas uma parte do conteúdo de uma pagina web(<p></p> ou <body></body>, outras tags são para inserção de elementos na página como imagens ou outros elementos, também podemos utilizar essas tags como parâmetros para criar um efeito nesse elemento.
Veremos na prática como isso funciona.
Incorporado à página, a forma mais indicada para se trabalhar com o CSS na própria página, seria utiliza-lo dentro da tag <HEAD></HEAD>, iremos declarar uma tag style no head e dentro do style ficará nossas formatações.
O uso da tag Style dentro do head torna mais fácil localizar os estilos para alterar seus ajustes facilitando a manutenção, caso seja necessário realizar manutenção. Mas veremos que há como trabalhar com o CSS em arquivo externo e isso facilita ainda mais as manutenções desses estilos.
Exemplo:
<!DOCTYPE html>

<html>
    <head>
        <title>Título da página</title>
        <style>
            em{color: red;background-color:green}
            strong{color: blue;}
        </style>
    </head>
    <body>
      <p>
          Estou <em>treinando</em> meus conhecimentos em <strong>HTML</strong> e CSS.
      </p>
    </body>
</html>
No exemplo acima temos uma tag Style que utiliza-se das tags em e strong para passar um ajuste na cor da fonte. O código fica assim:  Parâmetro{ ajustes:valor; }
Sempre entre os sinais {} ficaram os ajustes, se for necessário passa-se um valor após o sinal de dois pontos. O ponto e virgula; é utilizado para separar um ajuste de outro ajuste se for necessário passar mais de um ajuste para o mesmo parâmetro.
em{color: red; }       em{color:red; background-color:green}
No caso desse exemplo Color é a cor da fonte e Background-color é a cor de fundo.
Resultado:
Tente colocar a palavra CSS em Strong e veja que o mesmo efeito da palavra HTML será aplicada à palavra CSS.
Como vimos a barra de títulos apresenta erros pois algumas palavras nela possuem acentos, vamos ver como resolver isso com a tag meta no próximo artigo. Até lá!