À medida que você redimensiona a página, esses elementos de bloco se encaixam graciosamente. Eu configurei algumas instâncias diferentes de consultas de mídia em uma folha de estilos externa. Isso torna mais fácil manter o controle de estilos quando voltar a editar algo mais tarde.

 
 
 
Jake Rocheleau
 
Escritor Freelancer e Desenvolvedor Web
  Hudson, Massachusetts, EUA  [email protected] Meu portfolio • @jakerocheleau 
 
  
 
 

Antes de entrarmos no CSS detalhado, quero explicar mais sobre o uso de microdados. Se você olhar de perto eu coloquei atributos dentro de muitos elementos diferentes com os nomes Tipo de item, itemscope, e itemprop. Tudo isso se relaciona ao projeto Schmea, que espera oferecer uma estrutura de dados para a web.

Formatando Microdados Úteis

Todos os principais mecanismos de busca, incluindo Google, Yahoo! E Bing, aceitaram o Schema como a melhor sintaxe para marcação de dados. Ao rotular detalhes sobre você, ajuda esses mecanismos de pesquisa a exibir resultados relacionados ao seu conteúdo on-line. Vamos detalhar como configurá-los.

O atributo itemscope é aplicado a qualquer contêiner que contém informações sobre um item de esquema. Isso sempre é seguido pelo atributo itemtype, que neste cenário está descrevendo uma pessoa. Dentro deste wrapper div posso rotular qualquer conteúdo usando itemprop junto com qualquer um dos detalhes listados em sua página de documentação.

O método recomendado é incluir o conteúdo dentro de uma tag span em vez de anexar diretamente ao elemento. Quando você está rotulando algo como uma foto, você deve anexar itemprop ao img elemento diretamente. Mas caso contrário, você terá uma marcação mais limpa envolvendo seus dados em tags span.

Quanto é muito?

Eu diria que não há limite para a quantidade de detalhes que você pode entrar. Os microdados estão disponíveis para ajudar os computadores a reconhecer pessoas, organizações, produtos e outros itens em um contexto on-line. Quanto mais informações você puder oferecer, melhor.

Vale a pena manter e abrir a mente e ver como você pode usar esses microdados em aspectos do seu próprio site. Se você passar de 10 a 15 minutos passando pela documentação do Schema, é muito mais fácil do que você imagina. Podemos ver dois exemplos sólidos da demonstração de currículo:

 
 
Conjunto de habilidades
 
 
Desenvolvimento
 
 
HTML5 / CSS3
 
JavaScript e jQuery
 
Backend do PHP
 
Bancos de Dados SQL
 
Wordpress
 
Pligg CMS
 
Algum objetivo-C
 
 
 
 
Programas
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel e phpMyAdmin
 
Xcode 4
 
 
 
 

Ao listar minhas várias habilidades, configurei um novo contêiner que define o esquema ItemList. Não havia nenhum tipo de qualificação ou experiência para listar sob uma Pessoa, então esta é uma alternativa segura. O valor aqui é que o Google pode entender cada itemListElement está relacionado entre si. Neste caso, temos uma lista de idiomas e software com os quais sei trabalhar.

 
 
Artigos recentes
 
  10 métodos de retorno úteis para CSS e Javascript • Publicado em Julho de 2012
 
  Reescrevendo URLs no WordPress: Dicas e Plugins • Publicado em Julho de 2012
 
  Otimização JPEG Para A Web - Ultimate Guide • Publicado em Julho de 2012
 
  9 truques para projetar o boletim informativo HTML perfeito • Publicado em Maio de 2012
 
  Guia para testes A / B com o Otimizador de website do Google • Publicado em Março de 2012
 
 

Outro bom exemplo é a listagem de artigos encontrada na parte inferior. Existe uma configuração de esquema para artigos e posts, todos relacionados ao conteúdo encontrado online. Eu indiquei o URL do artigo e a data de publicação que são informações mais do que suficientes para esses rastreadores de mecanismo de pesquisa.

Lembre-se de que os microdados tratam da formatação de conteúdo para serem organizados por computadores. Este currículo de página única é o exemplo perfeito para definir características sobre uma pessoa específica. Estes não serão úteis em todos os sites, mas é uma metodologia empolgante para entender.

Estilos CSS Relativos

Nesta última seção, vamos dar uma olhada em como estilizar toda esta página. No topo da nossa folha de estilo, estou definindo algumas redefinições iniciais e propriedades básicas de elementos. Isso inclui cabeçalhos, itens de lista e efeitos de foco de link de âncora..

* margem: 0; preenchimento: 0;  html height: 101%;  body background: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); tamanho da fonte: 62,5%; fundo de preenchimento: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; cor: # 454545; tamanho da fonte: 3.6em; margem inferior: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; cor: # 484848; tamanho da fonte: 2.5em; margem inferior: 10px; text-decoration: sublinhado;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; cor: # 777; font-weight: normal; tamanho da fonte: 1.8em; margem inferior: 10px;  h4 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; cor: # 656565; intensidade da fonte: Negrito; tamanho da fonte: 1,75; margem inferior: 4 px;  p família da fonte: "Balthazar", "Droid Serif", Times New Roman, serif; cor: # 565656; tamanho da fonte: 1.8em; Altura da linha: 1.4em; margem inferior: 15px; preenchimento esquerdo: 35px;  pequeno font-family: "Balthazar", serif; cor: # 656565; tamanho da fonte: 1.6em; display: bloco; margem inferior: 6px;  ul display: bloco; estilo de lista: nenhum;  ul li padding-left: 45px; list-style-type: nenhum; alinhamento vertical: top; background: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px sem repetição; margem inferior: 5 px; font-family: "Balthazar", serif; cor: # 666; tamanho da fonte: 1.6em; Altura da linha: 2.3em;  img border: 0; max-width: 100%;  a color: # 5582d6; text-decoration: nenhum;  a: hover text-decoration: underline;  

Nada muito interessante, exceto algumas das fontes personalizadas. Eu também peguei um ícone de marcador exclusivo em vez de usar o padrão “disco”. Você pode tentar pesquisar em um diretório como o Icon Finder ao tentar localizar um design semelhante.

/ ** layout do núcleo do grupo ** / #w margin: 0px 50px; preenchimento: 20 px 40 px; top de preenchimento: 35px; fundo: #fff; min-width: 260px; max-width: 900px; border-bottom-right-radius: 8 px; border-bottom-left-radius: 8px; -webkit-border-bottom-left-radius: 8 px; -webkit-border-bottom-right-radius: 8 px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px;  cabeçalho largura: 100%;  / ** @ configurações pessoais de grupo ** / #info float: left; margem inferior: 12px;  #photo float: certo;  #photo img -webkit-border-radius: 3px; -moz-border-radius: 3px; raio de fronteira: 3px; -webkit-box-shadow: 0 2px 4px rgba (0, 0, 0, 0,2); -moz-box-shadow: 0 2px 4px rgba (0, 0, 0, 0,2); box-shadow: 0 2px 4px rgba (0, 0, 0, 0,2); background-color: #fff; border: 1px solid #ccc; preenchimento: 5px;  

Existem apenas algumas áreas de blocos importantes na página que requerem atenção. Claro que o div wrapper é configurado com margens extras e preenchimento. Além disso, a largura máxima é limitada a 900px porque qualquer tamanho maior parece que a página tem muito espaço em branco. Eu também usei cantos arredondados na parte inferior da página para um efeito mais suave nos olhos.

Design Responsivo

Possivelmente, o aspecto mais crucial deste currículo on-line é a funcionalidade responsiva. Eu tenho cinco configurações de pontos de interrupção diferentes para obter vários efeitos ao redimensionar a janela do navegador.

@media somente tela e (max-width: 740px) h1 font-size: 4.5em;  h3 tamanho da fonte: 2.2em;  h2 display: bloco; texto-alinhar: centro;  #info float: nenhum; display: bloco; texto-alinhar: centro;  #photo float: nenhum; display: bloco; texto-alinhar: centro;  #w preenchimento: 20 px 15 px;  p preenchimento: 0;  

A inicial 740px está certo em torno de onde a imagem da foto irá colidir com o nosso texto de cabeçalho. Em vez de deixar a foto cair no lado direito, limpamos os dois elementos e centralizamos todo o layout. Também aumentamos o tamanho do texto do cabeçalho para deixar um impacto mais sólido.

À medida que a janela fica menor, removi algum preenchimento extra da div de invólucro e dos parágrafos. O próximo problema que encontramos depois do cabeçalho é da lista de habilidades UL. Eu divido a abordagem de duas colunas e, em vez disso, tenho itens de lista flutuando ao lado um do outro.

@media only screen e (max-width: 570px) ul li exibição: inline-block; preenchimento esquerdo: 15px; Largura: 140px; posição de fundo: -5px 0px; margem direita: 6 px; Altura da linha: 1.7em;  # skills-left, skills-right margem-bottom: 15px;  

Isso também requer o reposicionamento de muitas das propriedades de texto padrão. Temos que atualizar a altura da linha e reposicionar o ícone de marcador de cada item da lista. Eu defini uma largura fixa para que a grade pareça mais organizada até o próximo ponto de interrupção.

Codificação para Smartphones

As últimas três consultas de mídia são pequenas, mas muito importantes. Quando você alterna entre o modo paisagem e retrato, o iPhone redimensionará qualquer navegador móvel. Este é também o caso da maioria dos dispositivos Android e telefones Windows Mobile.

@media only screen e (max-width: 480px) ul li largura: 120px;  #w margin: 0 20px;  tela apenas @media e (max-width: 320px) #w margin: 0 10px;  / ** apenas para iPhone ** / @media screen e (max-device-width: 480px) ul li largura: 150px;  

Quando atingimos 480px ou menos, removemos mais um preenchimento do wrapper e também redimensionamos os itens da lista novamente. Em seguida, em 320px, removi parte do espaço de margem fora do documento. Você ainda pode ver o plano de fundo texturizado, mas não é muito importante em uma viewport vertical tão fina.

Por fim estou usando largura máxima do dispositivo para segmentar o dispositivo iPhone em si ou qualquer outra tela móvel com largura máxima de 480 px. Neste caso, quero atualizar os itens da lista um pouco mais para que eles preencham a tela inteira. Isso afetará apenas as listagens de habilidades na visualização de paisagem, já que o retrato é muito magro para perceber diferenças.

• Demonstração
• Download do Código Fonte

Pensamentos finais

Trabalhar na Internet geralmente exige pelo menos algum tipo de portfólio online. Quando você pode vincular a uma única página resumida com todos os detalhes organizados juntos, isso mostra que você está falando sério. Empregadores sérios e clientes em potencial se apaixonarão por essa demonstração carismática de profissionalismo em web design.

Espero que você possa tirar alguns pontos-chave deste tutorial. Freelancers em qualquer local do mundo podem se promover com um pouco de esforço técnico. Sinta-se à vontade para fazer o download do código-fonte demo acima e compartilhar suas opiniões sobre este artigo em nossa área de comentários.