Ir para conteúdo
Fórum Script Brasil

Webdesignemfoco.Com

Membros
  • Total de itens

    23
  • Registro em

  • Última visita

Posts postados por Webdesignemfoco.Com

  1. Primeiro, crie uma página por exemplo: seusite.com.br/mensagens.php. Dentro dessa página mensagens.php você colocará uma meta refresh da página, tipo isso:

    <meta http-equiv="refresh" content="30">

    Crie uma tabela no mysql onde você ira inserir a mensagem para o caminhoneiro.

    Dentro da página mensagens.php você vai colocar também:

    <?php

    $sql=mysql_query('select * from nome_da_tabela');

    $row = mysql_num_rows($sql);

    $result=mysql_fetch_array($sql);

    if ($row > 0)

    {

       echo $result['mensagem'];

      echo "<audio controls>
      <source src='musica.ogg' type='audio/ogg'>
      <source src='musica.mp3' type='audio/mpeg'>
      Your browser does not support the audio element.
    </audio>";

    }

    ?>

    Daí quando você inserir uma mensagem na sua tabela do mysql, o $row vai ser maior que zero e vai acionar o audio e exibir a mensagem.

    Lembrando que o caminhoneiro vai ter que deixar a página mensagens.php aberta no tablet.

    Espero ter ajudado.

  2. Dá uma pesquisada sobre session também. Mais ou menos assim:

    session_start();

    if ($chkuser == false)
    {

            $_SESSION['login'] = true;

             echo"<script language='javascript' type='text/javascript'>alert('Login e/ou senha incorretos');window.location.href='login.html';</script>";
             die();
    }

    else

    {

    }

  3. Cara não precisa disso, pensa em algo assim:

    session_start();

    $result = mysql_query("SELECT * FROM nome_da_tabela where Login = '$login' and Senha = '$senha'");

    if(mysql_num_rows($result) > 0)
        {
         $Login = $result["Login"];
         $Senha = $result["Senha"];

       $_SESSION['autenticacao'] = true;

        }
    else{ 

    $_SESSION['autenticacao'] = false;
    echo "<script>alert('Você não está logado')</script>";

    ---------------------------------------------------------------

    Nas páginas internas você coloca assim:

    session_start();

    if ($_SESSION['autenticacao'] == true)

    {

    }

    else

    {

    echo "<script>

    alert('Você não está logado');

    window.location.href = 'paginadelogin.php';

    </script>";

    }

  4. Boa tarde a todos.

    Hoje estarei discorrendo um pouco sobre a construção de um cabeçalho de qualidade voltado para Search Engine Optimization (SEO). Primeiramente cabe salientar que essa é a minha visão do que seja o ideal baseado na minha experiência e estudo, podem existir visões diferentes da minha

    1. Primeiramente o que é header?

    O header ou cabeçalho são as informações iniciais do seu website. Através do cabeçalho explicamos para o nosso navegador a maneira com que queremos que nosso site seja visualizado e interpretado.

    No contexto da programação, o header são todos os elementos presentes entre as tags <head></head>.

    Vamos ao trabalho então.

    2. Elementos header off Page

    Os elementos que citarei abaixo, eu considero elementos off Page. Isso porque, no meu modo de ver, eles podem ser iguais para todas as páginas. Eu costumo fazer o seguinte, crio um arquivo header.php e insiro todos os elementos abaixo nesse arquivo e nas páginas do site referencio esse arquivo com um <?php include (‘header.php’); ?>. Isso facilita muito a manutenção. Imagine em um site com cem páginas quando você desejar mudar nome do arquivo css, você terá que abrir cem páginas para mudar esse arquivo em cada página. Criando um arquivo externo você não tem esse problema.

    Veja abaixo os elementos header off Page:

    2.1 Meta Charset

    A tag charset serve para explicar para o nosso navegador como ele irá ler os textos do nosso site, ou seja, a maneira como ele irá codificar nossos caracteres. No Brasil utilizamos da seguinte maneira:

    Meta Charset

    Se não utilizarmos dessa maneira, os acentos e caracteres especiais típicos da língua portuguesa não serão codificados da maneira correta.

    2.2 Meta Viewport

    Hoje em dia, o layout responsivo é o melhor modelo de layout, conforme já explicado no outro POST, logo a tag Viewport é essencial para abertura correta do nosso site nas diferentes resoluções.

    Ela é setada da seguinte maneira:

    Meta Viewport

    2.3 Meta Author

    A tag meta author não é tão essencial para o SEO, mas é importante para concretizar a autoria da página. Uma página sem meta author é a mesma coisa de um livro sem assinatura de um escritor.

    Meta Author

    2.4 Links Rel

    Os links de cabeçalho são importantíssimos. Hoje não admite-se mais atributos inline. Devemos sempre setar nossos arquivos externos como CSS.

    É sempre importante também indicar o Favicon do site. Muitas linhas de estudo defendem que o Favicon é um critério importante no SEO.

    Links rel

    2.5 Scripts

    Da mesma forma que os links, os scripts devem ser setados para arquivos externos. Nada de códigos Javascript ou JQuery inline.

    Scripts

    3. Elementos  header on Page

    Agora vou citar os elementos header on Page que na minha opinião são os mais importantes quando o assunto é SEO. Esses elementos devem ser diferentes de uma página para outra, logo devem ser inseridos em cada página e serem alterados de uma página para outra.

    3.1 Tag Title

    A tag title deve ser muito bem pensada na sua confecção. Ela é a principal tag de localização dos mecanismos de busca para seu site e ela deve ser única em cada página. Quanto mais para a esquerda, maior valor tem a tag do seu título. Por exemplo:

    1- Title: ‘Açougue – venda de carnes de todos os tipos’

    2- Title: ‘Bife de boi na promoção – Açougue’

    Enquanto que na title 1 temos uma relevância maior para o empreendimento como um todo, ou seja, a açougue, no title 2, temos um foco voltado para um produto específico que é o bife de boi. Essa é a maneira como os mecanismos de busca visualizarão seu site, a grosso modo é claro.

    3.2 Meta Description

    É a descrição do seu site. É a forma com que seu site aparecerá nos mecanismos de busca. Ele é setado da seguinte maneira:

    Meta Description

    3.3 Meta Keywords

    Apesar de algumas linhas de pensamento afirmarem que as keywords não influenciam nos mecanismos de busca, eu prefiro errar pra mais, então gosto de inserir a meta keywords.

    Meta Keywords

    4. Conclusão

    Um cabeçalho bem feito é um grande passo para uma boa classificação nos mecanismos de busca como Google, Yahoo e Bing.

    5. Vídeo-Aula

    Para explicar melhor o tema, desenvolvi uma vídeo-aula sobre o tem.

  5. Cara, isso não dá pra fazer em php puro, você vai ter que usar JQuery. Acredito que seja mais ou menos assim:

    1. <head>
    2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    3. <script type="text/javascript">
    4. jQuery(document).ready(function(){
    5. jQuery('#iddoseuform').submit(function(){
    6. var dados = jQuery( this ).serialize();
    7.  
    8. jQuery.ajax({
    9. type: "POST",
    10. url: "paginadeprocessamento.php",
    11. data: dados,
    12. success: function( data )
    13. {
    14. alert( data );
    15. }
    16. });
    17.  
    18. return false;
    19. });
    20. });
    21. </script>
    22. </head>
  6. O crescente aumento dos dispositivos móveis como tablet e smartphones revolucionou a forma com que os webdesigners programam os sites. Atualmente, ao criar um site deve-se pensar em pelo menos três resoluções diferentes, uma voltada ao smartphone, outra ao tablet e uma terceira para os notebooks e desktops.

    Nesse contexto, durante o desenvolvimento de um website vem sempre a dúvida na cabeça, como desenvolvo um website para dispositivos móveis? O que fazer? Fazer um site responsivo ou um site mobile?

    Antes de entrarmos na discussão, cabe conceituarmos dois termos muito falados quando o assunto é websites para dispositivos móveis.

    Diferença entre site responsivo e mobile

    Versão mobile:

    Consiste em criar um site único para notebooks e desktops e outro site exclusivo para celulares. Em suma, podemos dizer que serão criados dois websites, ou seja, teremos duas páginas distintas para cada link do site. Por exemplo teremos www.umsitea.com.br para desktop e mobile.umsitea.com.br para mobile. Em termos de programação, a diferença é que implementaremos uma biblioteca do JQuery conhecida como SiteMobile. Veja no código abaixo um exemplo:

    Código Jquery site mobile

    Vantagens da versão mobile:

    1. Maior liberdade no design: na medida em que você tem um site exclusivo para cada versão, você pode alterar com maior liberdade.
    2. Menor possibilidade de erros: desenvolvendo um site exclusivo, você investe todo o conhecimento naquela versão, assim as possibilidades de erro são menores e mesmo que elas ocorram, não vão atrapalhar a versão desktop.
    3. Requer menos conhecimento em programação: para desenvolver um site mobile, o programador não necessita ter um conhecimento muito aprimorado em HTML e CSS. O mesmo site que ele já faz para desktop ele fará bem parecido, porém com tamanho de fonte e ícones em tamanhos diferenciados.

    Versão responsiva:

    A versão de um site responsivo consiste numa série de ferramentas de programação no sentido de estilizar seu website para as diversas resoluções. A versão responsiva exige do programador um conhecimento profundo sobre HTML e CSS. A utilização de media queries é fundamental. Alguns exemplos do que aplica-se no site responsivo:

    CSS responsivo

    Viewport para design responsivo

    Reparem nos detalhes, primeiro o uso de @media queries, ou seja, a mesma class container recebe atributos diferentes para resoluções diferentes. Segundo, a maior parte das divs recebe float: left e position: relative, esqueça position: absolute para sites responsivos, e as medidas são setadas em porcentagens. Além disso o html recebe no cabeçalho a meta name=viewport que tem a função de apoiar a abertura do site em todos os dispositivos conforme estipulado pelo CSS.

    Vantagens da versão responsiva:

    1. Melhor indexação pelos mecanismos de busca: os websites com a versão responsiva são melhor indexados pelos motores de busca como (Google, Yahoo e Bing). Eu comprovo isso com o alerta exibido pela ferramenta WebmasterTools do Google em relação a  primeira versão do nosso site www.webdesignemfoco.com que possua uma versão mobile, ao contrário do que é hoje em que o site é responsivo. Reparem no alerta:

    Erro de fix mobile do webmaster tools

    Logo fica claro que os mecanismos de busca não gostam da idéia de se redirecionar um site para outro como ocorre nas versões mobile.

    1. Menor trabalho na confecção: fica claro que desenvolver um website é bem mais fácil que dois, então a versão responsiva é menos trabalhosa.
    2. Fácil manutenção: enquanto no site mobile é necessário alterar um texto duas vezes, por exemplo, afinal são dois websites, na versão responsiva tudo que alterar no site já será alterado automaticamente em todas as versões.

    Qual dos dois é melhor?

    Veja abaixo um comparativo feito pelos programadores da Webdesign em Foco.

     

    Mobile

    Responsivo

    Indexação no Google

    7

    10

    Manutenção

    5

    10

    Facilidade na solução de erros

    9

    8

    Trabalho para confecção do website

    5

    9

    TOTAL

    26

    37

    Conclusão

    Apesar do site responsivo exigir do programador um conhecimento mais apurado no tocante a HTML e CSS, ele é o modelo ideal na atualidade.

    Vídeo-aula

    Confira também nossa vídeo-aula explicativa sobre esse tema:

  7. Hoje vamos falar sobre vetorização de logomarcas. Como exemplo eu utilizei a logomarca da HP.

    Mas o que é vetor?

    Vetor é o código fonte de um design gráfico, é como se pegássemos a fonte de um site ou do Windows por exemplo. O vetor é a origem de uma logomarca ou de algum layout.

    Por que vetorizar?

    As vantagens de se ter um arquivo vetorizado são muitas. Eu diria que um design de qualidade não é possível sem a vetorização dos elementos. É verdade que algumas logomarcas são bem complexas de se vetorizar, principalmente as que envolvem design 3D, diversos efeitos como dêgrades inversos, dentre outros. Ainda assim é possível vetorizar.

    Quais as vantagens de se vetorizar?

    1. Eliminar o velho e bom fundo quadrado branco, ou seja, poder utilizar o fundo vazado.
    2. Reduzir o tamanho do projeto. Vetor quase não ocupa espaço (na maior parte dos casos).
    3. Liberdade de cores, posso colorir as mais variadas partes do elemento como quiser.
    4. Diversificação do uso, posso pegar por exemplo, só o bonequinho da logomarca da Vivo, sem a frase 'VIVO' e colocar como timbrado em um ofício, por exemplo.

    Logo, digo que design sem vetor não tem sentido e na maior parte dos casos não tem qualidade.

    Vídeo-aula

    Na vídeo-aula abaixo vou explicar em detalhes como vetorizar a logomarca da HP, ou seja, como redesenhar a logomarca da HP para que tenha total liberdade no design.

    Logomarca da HP no CorelDraw para download

    Abaixo eu deixo o link para baixar a logo da HP no Corel jé em vetor.

    Download da logomarca da HP no Corel

    Espero que tenham gostado, deixem os comentários e curtam, eles são muito importantes para nós.

    Artigos Relacionados

    Vídeo-aula sobre multiplicação de elementos e como colocar uma imagem no círculo

  8. Acredito que seja mais ou menos assim:

    Página do formulário

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

    <head>

        <title>Página de formulário</title>
     
    </head>


      
    <body>

        <form action="criararquivo.php" method="post">
            Data inicial: <input name="datainicial" id="datainicial" type="text" />
            Data final: <input name="datafinal" id="datafinal" type="text" />
            <input type="submit" value="Enviar">
        </form>
        
    </body>


    </html>

     

    Arquivo criararquivo.php

    <?php

    $sql=mysql_query ('select *...');

    $dir='pastaquedeseja/nomedoarquivo.txt';

    $arq=fopen($dir, 'a');
        
    fwrite($arq, $sql);

    ?>

  9. Bom dia pessoal,

    estou iniciando um Curso de CorelDraw X7 com algumas dicas para facilitar os profissionais do ramo do design, seja webdesigner ou designer gráfico. No Canal do Youtube é possível visualizar a aula na íntegra.

    Nessa primeira aula estarei ensinando como colocar imagens dentro de figuras geométricas, ou seja, colocar uma foto dentro de um circulo ou dentro de qualquer outra figura e como duplicar elementos.

    PowerClip do Corel

    Essa função de inserir imagens dentro de figuras geométricas no CorelDraw é conhecida como PowerClip.

    Como fazer?

    1. Abra a tela principal do CorelDraw
    2. Clique na ferramenta 'Elipse' a esquerda do programa
    3. Desenhe um círculo qualquer na área do Corel
    4. Aperte Ctrl + tecla "i" do teclado para importar uma imagem qualquer
    5. Clique na tela do Corel para importar a imagem
    6. Clique com botão esquerdo na imagem 
    7. Vá em Objeto >> PowerClip >> Colocar dentro do Recipiente
    8. Pronto, sua imagem já está dentro da figura geométrica
    9. Gostaria de editar e acertar a imagem dentro da figura geométrica? Clique com botão direito na imagem e aperte Editar Powerclip
    10. Acerte a imagem dentro da figura geométrica.
    11. Aperte Ctrl no teclado e o botão esquerdo para voltar a tela principal.

    Resultado Final

    Inserir foto dentro de um círculo

    Veja essa aula na integra no vídeo abaixo:

    Obrigado.

  10. Bom dia pessoal,
    hoje vamos falar sobre um elemento importantíssimo para o design responsivo. Antes de mais nada vamos conceituar o que vem a ser webdesign responsivo.
     

    Design responsivo


    Design responsivo consiste numa série de técnicas de programação no intuito de fazer com que o website se acomode corretamente em todas os tipos de resolução de tela, seja smartphone, tablet, notebook ou PC.
    O sites devem ser projetados para 03 resoluções mínimas (480px, 768px e superior a 768px). Com isso conseguimos envolver a maior parte dos monitores existentes atualmente.
     

    Diferença entre SITE MOBILE e SITE RESPONSIVO


    A principal diferença entre um site mobile e um site responsivo é que o site mobile é uma versão a parte somente para dispositivos móveis, ou seja, no desenvolvimento são criados dois websites, um exclusivo para dispositivos móveis e outro exclusivo para desktop. Já o site responsivo consiste em um único site para atender a todas as resoluções. Em sua confecção o layout responsivo é mais trabalhoso de se programar, entretanto é de mais fácil manutenção e melhor indexação pelos mecanismos de busca.
     

    E o elemento PICTURE do HTML5 nessa história?


    É nesse contexto que se dá a importância do elemento PICTURE. Bem, não podemos imaginar um site responsivo sem imagens responsivas. Simplesmente definir a imagem com o atributo width: 100%; não basta para confeccionar um layout responsivo.
    No desenvolvimento de um site responsivo é necessário pensar no tamanho que essas imagens impactarão sobre a tão sofrida rede de dados dos nossos smartphones. Para tanto, definir o width: 100%; resolverá o problema do encaixe do design, entretanto não resolverá a questão do tamanho em kb das imagens e seus impactos sobre as lentas redes de dados brasileiras.
     

    Utilizando o PICTURE


    Por experiência, digo que há que se ter cuidado ao utilizar o elemento PICTURE, isso porque nem todos os navegadores reconhecem seu atributo SOURCE. Vejamos o exemplo abaixo da forma correta de se utilizar tal elemento:
    Elemento Picture HTML5

    1ª e 8ª Linhas: sempre é bom deixar o elemento PICTURE dentro de uma div.
    2ª e 7ª Linhas: início da tag PICTURE.
    3ª Linha: source da tag PICTURE específica para smartphone, alí conterá a imagem para celular.
    4ª Linha: source da tag PICTURE específica para tablete.
    5ª Linha: source da tag PICTURE específica para desktop.
    6ª Linha: a sexta linha é importantíssima. Como já foi falado, diversos navegadores não reconhecem o SOURCE da tag PICTURE, logo devemos inserir a sexta linha, o clássico img para evitar esse problema.

    Pessoal, espero que tenham gostado.

    Obrigado.

×
×
  • Criar Novo...