PHP - Aula2 - Funções

Oque é?
A declaração de funções no PHP é feita a partir da palavra reservada function seguida do nome da função e de sua lista de argumentos, enquanto o corpo da função é delimitado por chaves {  }, entre as quais deve ficar todo o conjunto de instruções a ser executado quando a função for invocada.


Para que serve?
Funções são usadas para criar pequenos trechos de códigos isolados que podem exibir um resultado ou apenas executar uma rotina. Sua principal vantagem é condensar uma parte do código e torná-lo reutilizável em vários pontos diferentes.

Toda função deve ter um nome e possuir um delimitador de parâmetro que são identificados dentro dos parênteses.


Estrutura de uma função:

function nomeDaFuncao($var1, $var2, $var3...){
    //aqui vem o que deseja que ela faça
}


Função com valores, parâmetros, argumentos:
Quando falamos que uma função tem parâmetros ou argumentos, isto significa que vamos passar para ela valores, sejam se texto, numero, data, entre outros, e vamos solicitar que ela trate estes valores, vejamos abaixo.

function oi($n){
    echo "Oi ".$n;
}

function somar($x, $y){
    echo $x+$y;
}


Função sem valores, parâmetros, argumentos - rotina:
Quando chamamos uma função de rotina, é por que não passamos nenhum parâmetro para ela, ela executa um comando pré-definido sem precisar que passemos nada para ela, vejamos abaixo.

function bemVindo(){
    echo "Olá seja bem vindo!";
}

function diasSemana(){
    echo "Segunda - Terça - Quarta - Quinta - Sexta - Sábado - Domingo";
}


Como chamar ou executar nossas funções
Caso nossa função necessite da passagem de parâmetros faremos assim:
 
somar(1015);
Informaremos os valores da soma neste caso e nosso resultado na tela sera: 25.


Caso nossa função não necessite da passagem de parâmetros faremos assim:
 
bemVindo();
Apenas chamaremos o nome da função e resultado na tela sera: Olá seja bem vindo!.


Vídeo da aula2




Site com o resultado do código acima:






Espero que tenham gostado e até a próxima!

PHP - Aula1 - Introdução

O que é o PHP?
PHP é o acrônimo para Hypertext Preprocessor, uma linguagem gratuita de programação muito utilizada principalmente para o desenvolvimento web. Em nossos encontros focaremos no PHP para desenvolvimento web.



Como ele é codificado?

Um arquivo PHP possui a extensão .php, mas isso pode variar dependendo da configuração do servidor. Ele é escrito em conjunto com o HTML como abaixo.


<!DOCTYPE html>
<html>
  <body>
    <h1>PHP - Aula1</h1>
    <p>PHP é uma linguagem de programação muito semelhante a linguagem HTML e C.<br>Ele é criado entre as tags do HTML</p>
    <?php
      $nome = "André";
      echo "Meu nome é ".$nome; 
    ?>
  </body>
</html>


Quando trabalhamos com PHP tudo é processado por um servidor web que interpretara e retornará o resultado que será exibido no browser. Sendo assim não é possível visualizar o código de uma aplicação rodando no seu navegador sem um servidor instalado.


Alguns servidores para download:
XAMPP - WAMP

Alguns servidores online FREE (links verificados em: 11/11/2018)
INFINITY FREE - 000WEBHOST


Vídeo da aula1



Site com o resultado do código acima:





Espero que tenham gostado e até a próxima!

Color CC

Neste novo jogo desenvolvido pela Webdre Design você deverá contaminar toda a tela com uma mesma cor e para isso você deverá escolher a cor certa.

Neste desafio com limites de toques e cores muitas vezes semelhantes somente os melhores conseguiram ir até o fim.

Color Chemical Contaminated.
(
Contaminação química das cores)













Z Racing

Primeiro APP Android criado pela Webdre Design, seu objetivo é ir o mais longe possível sem atingir os obstáculos e nem ser pego pela polícia.



No atual momento ele esta no modo ALFA para testes internos, caso você queira ser um testador envie um email para nós com seu nome e email cadastrado em seu dispositivo Android.

Contato por email: contato@webdre.com.br ou pelo formulário

Link para acessar o APP: https://play.google.com/apps/testing/wdd.zracing

Se você já é um testador, deixe aqui seu comentário.

O que é 'Mobile First' e por que isso é importante?

Basta olhar em volta que você verá é uma nação móvel. E todas essas pessoas com seus dispositivos firmemente na mão, indo de uma lado para outro sempre conectados e não estão apenas se conectando com amigos e familiares. Eles também estão envolvidos com suas marcas favoritas ou estão procurando um negócio local para atender às suas necessidades. Este é o momento em que o gigante do mecanismo de busca se tornou um plano para se mudar para uma abordagem de classificação móvel. Então, o que isso significa exatamente para seus negócios e seus planos de SEO?

O que é 'Mobile-First'?
O Google sempre olhou os sites apenas na forma como eles aparecem nos desktops, mas hoje ele tem focado sua indexação primeiramente nos dispositivos mobile "Mobile-First". Quanto ao código isso ajuda a eliminar códigos desnecessários, Pois focamos no código mobile.

Como isso afeta o SEO?
Se você é proprietário de uma empresa com um site de desktop e celular separado, sua classificação será afetada se o conteúdo for diferente. Por exemplo, uma versão móvel do seu site com muito menos conteúdo que o seu site da área de trabalho também não será classificada. Uma solução que vale a pena considerar é ter um único site com um design de site responsivo, referindo-se a um site projetado para se adaptar a qualquer tela que esteja sendo visualizada por um pesquisador.

O seu site deve ser amigável?
Algumas empresas realmente têm mais envolvimento dos usuários de desktops, por isso a simpatia móvel nem sempre é uma prioridade. No geral, no entanto, mais consumidores estão usando seus dispositivos móveis para procurar informações comerciais e tomar decisões de compra. De acordo com um estudo, metade de todos os usuários móveis fazem uma compra em um negócio local que eles encontram online. Além disso, o Google vem implantando constantemente recursos, de verificação de página, projetado para incentivar a compatibilidade com dispositivos móveis.

Veja alguns ajustes relacionados com SEO que você pode fazer para melhorar o recurso móvel do seu site:
  • Preste atenção aos tempos de carregamento da página (os usuários móveis geralmente esperam que as páginas sejam carregadas em alguns segundos)
  • Otimize seu site para pesquisadores locais, já que quase 60 por cento das buscas móveis têm intenção local
  • Otimize imagens para telas menores (imagens maiores podem diminuir a velocidade da sua página)
  • Reduza a desordem de conteúdo para permitir o uso de espaço em branco para aumentar a legibilidade em telas menores
  • Remova o código fonte desnecessário para evitar atrasos com cargas de página
  • Deixe espaço para os dedos em torno de botões e ícones para reduzir o risco de cliques acidentais em outros links, especialmente em páginas onde os clientes estarão completando compras e entrando informações de pagamento
  • Otimize suas páginas com títulos descritivos, parágrafos curtos e pontos de bala (os usuários móveis tendem a olhar todos os títulos primeiro e depois leem)

O Google insiste em classificar as páginas da Web a partir de uma perspectiva móvel, caso contrário seu site não terá um grande impacto nos rankings. Eles também estrearam uma atualização de algoritmo denominado Mobilegeddon, que dá prioridade aos sites que se apresentam bem em telas móveis. O que tudo isso significa é que manter um olho em como o conteúdo ressoa com os usuários móveis não é mais opcional é prioridade.

Você já otimizou o conteúdo de seu site?
Se precisar de ajuda com este objetivo, entre em contato com a nossa equipe.

Design Responsivo - Estrutura Base

Vamos entender na prática como tudo funciona

Como vimos no post anterior estamos trabalhando com WOT, como vamos desenvolver para diversos dispositivos então temos que ter um ponto de partida.

Em 03 de Novembro de 2009, Luke Wroblewski publicou uma matéria com o titulo "Mobile First", nesta publicação ele defende a ideia de se iniciar o projeto e seu código pelo menor dispositivo até o maior, exe.: iniciamos pelo celular, depois tablet e finalizamos com o desktop.

Em minhas postagens vamos desenvolver tudo seguindo o padrão "Mobile First".

HTML5 e CSS3

Tenho como base neste tema, Design Responsivo, que estou publicando para pessoas que já tem um conhecimento no assunto, por menor que seja e querem se atualizar. Sendo assim pode ser que eu vá direto ao ponto em alguns momentos e para quem não sabe nada de HTML5 e CSS3 vai ficar faltando conteúdo, Se isso acontecer, comenta na postagem, estou aqui para te auxiliar.

Estrutura base:
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>Titulo</title>
  5. <meta name="description" content=" ">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. </head>
  8. <body>
  9. Conteudo...
  10. </body>
  11. </html>
Esta é a nossa base, quero detalhar melhor a linha 6 onde temos nossa meta VIEW PORT.

A W3C propôs em Setembro de 2011 a utilização da @viewport para definir os valores das propriedades: zoom, width e orientation que mais adiante foi substituído pela metatag viewport.

Aqui temos alguns ajustes a fazer no código acima antes de continuar, estes ajustes não são obrigatórios são sugestões de diversos autores, programadores e minha também.

As versões do Internet Explorer anteriores a 9 não dão suporte as tags do HTML5 que vamos ver, sendo assim temos um pequenos ajuste a fazer, segue o código a baixo onde adicionei as linhas 7, 8 e 9.
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>Titulo</title>
  5. <meta name="description" content=" ">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <[!--if lt IE 9]>
  8. <script src="js/html5shiv.js"></script>
  9. <[endif]-->
  10. </head>
  11. <body>
  12. Conteudo...
  13. </body>
  14. </html>
Segue a link do arquivo HTML5Shiv para você baixar e colocar em seus estudos e projetos. Este arquivo faz com que o IE reconheça as tags do HTML5.

Continuando, temos mais uma boa pratica a ser feita, como falei anteriormente, não é obrigatória, é apenas uma sugestão.

Quando o HTML foi criado as tags foram criadas com padrões de: tamanho de fonte, quebra de linha, margem espaçamentos, e foi criado um CSS para normalizar tudo isso ou resetar tudo isso, esse conceito foi criado por Eric Meyer em 18 de Abril de 2007, é uma folha de estilo que redefine os padrões das tags,  posteriormente Nicolas Gallagher e Jonathan Neal criaram uma versão desta folha de estilo e deram o nome de normalize, segue abaixo o código atualizado mais uma vez com o arquivo RESET.CSS, este feito por mim, linha 10 foi adicionada.
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>Titulo</title>
  5. <meta name="description" content=" ">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <[!--if lt IE 9]>
  8. <script src="js/html5shiv.js"></script>
  9. <[endif]-->
  10. <link rel="stylesheet" href="css/reset.css">
  11. </head>
  12. <body>
  13. Conteudo...
  14. </body>
  15. </html>
Agora nosso código base esta pronto, segue link para o código.

Em nosso próximo post vamos falar sobre as tags do HTML5

Até a próxima!

Design Responsivo - Introdução

Na publicação anterior falamos sobre a historia do HTML CSS e JavaScript, com ela vimos a evolução a varios acontecimentos para chegarmos neste post RWD.

Se não viu, da uma olhada no post anterior


Um pouco mais de história, bem breve!

Maio de 2010, Ethan Marcotte faz uma publicação que iria mudar a forma filosófica de pensar Web e do desenvolvimento de Layouts.

Ele começa sua publicação com a seguinte frase:


"O controle que os designers tem no meio de impressão e muitas vezes desejam no meio da web é simplesmente uma função da limitação da página impressa. Devemos adotar o fato de que a web não possui as mesmas limitações  e devemos aceitar o refluxo e o fluxo das coisas"

John Allsopp, "A Dao of Web Design"





Uma coisa que devemos mudar em nossos conceitos antes de continuarmos é que Responsivo não quer dizer apenas que devemos adaptar um layout, "Faz caber ai!", vai mais longe do que isso. Ele deve deixar de fácil uso toda a área visual do site, ser renderizado de forma que acomode o conteúdo em resposta a todas as características do dispositivo onde ele esta sendo acessado.

Quando falamos Responsive Web Design falamos de:
Viewport, Grid View, Media Queries, Images e Vídeos Flexíveis

Como base para o desenvolvimento vamos utilizar:
HTML5, CSS3 e JavaScript

Nosso alvo: 

Todas os dispositivos, Temos hoje dois conceitos que que não pretendo discutir afundo mas vou apenas trazer um breve resumo, com o meu ponto de vista.


Internet das Coisas (IoT) e Web das Coisas (WoT)



Em poucas palavras, IoT nada mais é que uma extensão da Internet atual, que proporciona aos objetos do dia-a-dia (quaisquer que sejam), mas com capacidade computacional e de comunicação, se conectarem à Internet.




WoT é um termo usado para descrever abordagens, estilos de arquitetura de software e padrões de programação que permitem que objetos do mundo real façam parte da World Wide Web. A WoT fornece uma camada de aplicação que simplifica a criação de aplicativos para a IoT.

IoT é proporcionar uma conexão a internet para todas as coisas e WoT é proporcionar uma aplicação para todas as coisas.
Andre L.P.

Tudo isso torna a vida do Designer (me permita sempre que eu usar a palavra designer, compreender todos aqueles que atuam na criação da aplicação, sejam eles programadores, gestores, designers...) muito mais difícil, não "só um site" ou "só um app", temos que fazer ele estar presente em tudo, e quando digo tudo, é tudo mesmo, tudo que se conecte a internet.

Computadores, Tablets, Celulares, SmartTV, Relógios, Geladeiras, Rádios, Óculos, enfim, uma infinidade de Coisas.

Agora já temos uma base mesmo que simples para entender o que é RWD.

Em meu post inicial coloquei algumas bibliografias, em sua maioria com um conteúdo bem teórico do assunto, pretendo a partir da próxima postagem ser mais prático e dar muitos exemplos de código no decorrer do nosso aprendizado, em caso de duvidas ou sugestões deixe seu comentário.

Até a próxima!