Jump to content

Thiago ArteWeb

Members
  • Content count

    10
  • Joined

  • Last visited

Community Reputation

0 Comum

About Thiago ArteWeb

Informações Pessoais

  • Sexo
    Masculino

Contato

  • Twitter
    @webdesignemfoco
  • Facebook
    www.facebook.com/webdesignemfoco
  • Site Pessoal
    http://www.webdesignemfoco.com
  1. Thiago ArteWeb

    Action POST na consulta SQL

    Cara não entendi, pq verificar se é GET ou POST. Por que não escolhe um dos dois?
  2. Thiago ArteWeb

    Dados entres páginas

    Esse artigo aqui trata exatamente disso: passagem de parâmetro através de url amigáveis. Veja se ajuda. http://www.webdesignemfoco.com/blog/Passando-parametro-atraves-de-URLs-amigaveis/
  3. Thiago ArteWeb

    trocar altura e largura iframe

    Cara, vou dar a minha opinião como eu faria: - Eu não incluiria toda a tag <iframe> no banco, e sim somente os valores dos atributos. Então criaria as colunas width, height, src (obs.: frameborder já está deprecated no html5) na tabela do banco. Então ficaria assim: <?php $mysqli=new mysqli('servidor','usuario','senha','banco'); $sql = $mysqli->prepare("select * from tabela"); $sql->execute(); $sql->bind_result($id,$width,$height,$src); while ($sql->fetch()) { echo "<iframe width='$width' height='$height' src='$src' allowfullscreen></iframe>"; } ?>
  4. Thiago ArteWeb

    Aprendendo MySqli

    Artigo e vídeo-aula sobre à nova extensão MySQLi para PHP. Lembrando que a antiga extensão não estará mais disponível após o lançamento do PHP7. http://www.webdesignemfoco.com/blog/Introducao-ao-MySQLi/
  5. Thiago ArteWeb

    Sistema de login com sessions

    Artigo e vídeo-aula sobre como fazer um sistema de login básico em PHP e MYSQL utilizando sessions. http://webdesignemfoco.com/blog/Login-com-sessions/
  6. Thiago ArteWeb

    Criando um botão mobile

    Olá pessoal, na vídeo-aula de hoje, ensinarei como desenvolver um botão mobile utilizando as seguintes ferramentas web: https://youtu.be/RvUGkBeUarU
  7. Thiago ArteWeb

    Criando um FAVICON personalizado

    Olá pessoal, nessa vídeo-aula ensinarei como criar um FAVICON personalizado em COREL e DREAMWEAVER. https://youtu.be/NCvlGRFgiAY
  8. Thiago ArteWeb

    Sombreamento em fotos

    Pessoal, abaixo envio uma vídeo-aula instrutiva sobre duas formas de fazer o efeito de sombreamento em fotos, uma via css e uma via CorelDraw. Espero que gostem. https://youtu.be/7pwC2eeQMP8?list=PLbnAsJ6zlids-3Zr6yQLrgu_UQ3SLyM-t
  9. Thiago ArteWeb

    Criando um header para SEO

    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: 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: 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. 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. 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. 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: 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. 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. Eu finalizo deixando o seguinte código de cabeçalho, que no meu modo de ver é o ideal: 5.Vídeo-aula https://youtu.be/9JcORwRj5OM Obrigado.
  10. 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: Vantagens da versão mobile: Maior liberdade no design: na medida em que você tem um site exclusivo para cada versão, você pode alterar com maior liberdade. 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. 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: 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: 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: 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. 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. 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. 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: https://youtu.be/seXTLl83Tu0 Obrigado.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.