[série] A estrutura e a semântica do HTML5 – parte 1

Olá pessoal!
Irei postar aqui uma série que esmiúça a estrutura do HTML5 e sua semântica. O texto original pertence ao Edu Agni, ele é consultor especialista em User Experience, trabalha com isso há 11 anos. Entre outras coisas, o cara é curador da área de design e multimídia da Campus Party Brasil (um dos maiores eventos de tecnologia do mundo). Espero que apreciem. Será dividido em 3 partes. Segue a primeira.

A estrutura e a semântica do HTML5 – parte 1

Se você quer se aventurar com o HTML5, entenda aqui a sua estrutura básica, a semântica das principais novas marcações e algumas ferramentas. Sempre gosto de salientar para as pessoas que a maior evolução do HTML5 foi na sua semântica. A maior parte dos profissionais que vêm trabalhando com HTML estão muito  preocupados com aquelas animações pirotécnicas (que dependem muito mais de javascript do que do HTML), e sequer entendem o significado das marcações.

Bem, não caia nessa! Primeiro, as primeiras coisas… se você está querendo se aventurar pelo mundo encantado do HTML5, preste atenção: vou explicar aqui o que mudou na estrutura básica, falar sobre a semântica das principais novas marcações, e dar umas dicas de ferramentas para você trabalhar 😉

Estrutura básica, Doctype e Metadados

Olhando para a estrutura básica de código do HTML5, você vai perceber que ela se mantem praticamente idêntica à versão anterior, com excessão do Doctype e da Metatag Charset.

<!DOCTYPE html>
<html lang="pt-br">
   <head>
       <meta charset="utf-8"/>
       <title>Entendo a estrutura e semântica do HTML5</title>
   </head>
   <body>
       <p>Olá mundo!</p>
   </body>
</html>

Doctype e o elemento HTML

Document Type Defination (DTD, ou simplesmente Doctype) é uma instrução que informa ao navegador qual é a especificação do código que está sendo usada no documento, e deve ser declarado antes da tag <html>.

Na versão anterior do HTML, a declaração do Doctype era mais extensa e difícil de decorar, havendo a necessidade de referenciar para o navegador o arquivo DTD com as definições daquela especificação:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

No HTML5 a inserção do Doctype foi simplificada, e a responsabilidade de buscar as definições da especificação fica por conta do próprio navegador:

<!DOCTYPE html!>

Após a declaração do Doctype, iniciamos o código HTML. Na árvore de elementos do código, a tag principal é a <html>, que comporta todos os outros elementos filhos.

<html lang="pt-br">

É na tag <html> que declaramos o idioma principal do documento, através do atributo (que pode ser usado também em outras tags do documento). Na tag <html> também podemos inserir atributos como o xmlns (XML Namespace), como quando usamos em nossa página elementos da FBML (Facebook Markup Language):

<html lang="pt-br" xmlns:fb="http://www.facebook.com/2008/fbml">

Metadados

Continuar lendo

Anúncios

CSS – Trabalhando com Folhas de estilo na web (introdução)

Olá pessoal!

Estou voltando a trazer um conteúdo para quem está iniciando os estudos em criação de sites. Neste tópico, trago um slide com uma introdução ao CSS, as famosas folhas de estilo, item hoje indispensável no desenvolvimento de conteúdo para a web.

Desde já agradeço sua visita e espero que seja proveitoso o conteúdo. Em breve disponibilizaremos mais materiais em slides, PDF e vídeos no Youtube. Fique a vontade para perguntas, críticas e/ou elogios nos comentários ou através do e-mail professordanielbrandao@gmail.com

5 funções do WordPress para você conhecer e usar

functionsNão seria exagero dizer que “há mais funções no WordPress, do que sonha nossa vã filosofia”. As funções do WordPress são basicamente divididas em funções criadas especificamente para serem usadas em templates, conhecidas como Templates Tags, além das funções da API de plugins, relativas a ações e filtros usados principalmente para desenvolvimento de plugins, e por fim as funções que vamos ver neste artigo, usadas para criar as funcionalidades com recursos que estão presentes no WordPress.

Vamos ver algumas das dezenas de funções do WordPress que podem ajudá-lo no desenvolvimento do seu site sem que você precise recorrer a plugins de terceiros, que em alguns casos, podem tornar o carregamento do seu site mais demorado e prejudicar seu posicionamento em pesquisas e a navegação de seus visitantes.

Todas as alterações serão feitas apenas no arquivo functions.php, localizado na sua pasta do seu template WordPress. Para quem nunca usou editou esse arquivo, podemos dizer que ele funciona como um plugin dentro do seu tema. Ele adiciona funções únicas para seu  WordPress.

Se usadas corretamente, as funções utilizadas neste arquivo podem fazer maravilhas para o seu site WordPress, acelerando o desenvolvimento e atualização, umas vez que você pode ter todos os códigos em um só arquivo.

Por ser tão importante, antes de você editar o arquivo, faça um backup não só do arquivo, mas também da sua base de dados, mantenha esse backup num local seguro e faça os testes de preferência numa instalação de testes (fazê-lo no seu site pode interferir na experiência do usuário).

 

5 excelentes funções muito usadas no WordPress

1) Adicionar código do Google Analytics

Você pode colar o código uma vez em seu arquivo functions.php e nunca mais terá de se preocupar com isso novamente. Basta colar o código Google Analytics onde diz cole Google Analytics e pronto.

Será adicionanda uma ação ao wp_footer, que vai inserir automaticamente os códigos do Analytics em todas as páginas que você tem a função wp_footer.

1
2
3
4
5
6
7
8
9
<?php
add_action('wp_footer', 'add_googleanalytics');
function add_googleanalytics() { ?>
// Cole o código do Google Analytics aqui
<?php } ?>

2) Alterar o gravatar padrão no WordPress

Você pode substituir o “homem misterioso” exibido nos comentários de seu blog por um gravatar personalizado, que fixe a sua marca na mente de seus visitantes e dê ao seu site um toque de exclusividade. Tudo que você precisa fazer é colar os seguintes códigos:

1
2
3
4
5
6
7
add_filter( 'avatar_defaults', 'newgravatar' );
function newgravatar ($avatar_defaults) {
$myavatar = get_bloginfo('template_directory') . '/images/gravatar.gif';
$avatar_defaults[$myavatar] = "WPBeginner";
return $avatar_defaults;
}

Não se esqueça de fazer o upload de uma imagem personalizada para a pasta de imagem do seu tema. Também mude o nome do gravatar para a sua marca. Uma vez que você carregar a imagem e as funções, então visite: WP-Admin »Configurações» Discussão.

3) Data dinâmica do copyright no rodapé

Muitas vezes você vai se deparar com sites com datas no copyright desatualizados (normalmente localizados no rodapé). Alguns sites mostram o ano corrente, como sua data de direitos autorais, onde o correto é exibir o período de seus direitos autorais tal como: © 2006 – 2010. Para isso, basta colar o seguinte código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function comicpress_copyright() {
global $wpdb;
$copyright_dates = $wpdb->get_results("
SELECT
YEAR(min(post_date_gmt)) AS firstdate,
YEAR(max(post_date_gmt)) AS lastdate
FROM
$wpdb->posts
WHERE
post_status = 'publish'
");
$output = '';
if($copyright_dates) {
$copyright = "© " . $copyright_dates[0]->firstdate;
if($copyright_dates[0]->firstdate != $copyright_dates[0]->lastdate) {
$copyright .= '-' . $copyright_dates[0]->lastdate;
}
$output = $copyright;
}
return $output;
}

Uma vez que você adicionar essa função, em seguida, abra o arquivo footer.php do seu template e adicione o código abaixo onde você quer exibir a data dinâmica do copyright:

1
<?php echo comicpress_copyright(); ?>

Esta função analisa a data de seu primeiro e do seu último post.

4) Ativar adsense shortcode

Se você você não usa uma quantidade muito grande de bloco de anúncios, você pode adicionar o Adsense em qualquer lugar do seu conteúdo apenas com o uso desse shortcode.

Basta criar um shortcode usando esta função:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function showads() {
return '<div id="adsense"><script type="text/javascript"><!–
google_ad_client = "pub-XXXXXXXXXXXXXX";
google_ad_slot = "4668915978";
google_ad_width = 468;
google_ad_height = 60;
//–>
</script>
<script type="text/javascript"
</script></div>';
}
add_shortcode('adsense', 'showads');

Caso precise, você pode criar outros shortcodes para blocos de anúncios diferentes, como “adsense1″ e “adsense2″ por exemplo.

5) Adicionar campos Perfil dos Autores

Se você quiser criar uma página de autor mais versátil, com mais informação do seus autores, o código a seguir mostra como adicionar campos Facebook, Twitter e outros.

1
2
3
4
5
6
7
8
9
function my_new_contactmethods( $contactmethods ) {
// Add Twitter
$contactmethods['twitter'] = 'Twitter';
//add Facebook
$contactmethods['facebook'] = 'Facebook';
return $contactmethods;
}
add_filter('user_contactmethods','my_new_contactmethods',10,1);

A função acima irá adicionar campos no cadastro dos autores, com o resultado parecido com isto:

funcoes-wordpress

Você deverá chamar estes novos campos em seu templates, provavelmente haverá um arquivo chamado author.php, e basta editá-lo inserindo o código abaixo no local que deseja exibir o campo:

1
<?php echo $curauth->twitter; ?>

Web – Acessibilidade e Cores

Oi Pessoal! Estou postando um texto que fala sobre este tema: Utilização de cores na web. Com as multiplataformas que temos hoje (Computadores de mesa, notebooks, tablets e celulares), o conceito de desenvolvimento web vai além de criar uma página robusta e confiável. Hoje vamos além, adaptando os conceitos para atender pessoas de diferentes formas e estilos. O texto a seguir é do blog do pessoal da agência Princi Web.

img-coresE aí, pessoal! Vamos falar sobre a Acessibilidade Web, mas desta vez vamos focar no assunto cores. Sim, pois muita gente ainda não sabe que adaptar certas mudanças no seu layout, em relação às cores, podem fazer muita diferença para quem está acessando o seu site.

As cores são interpretações que nossa visão leva até o cérebro da luz refletida nos objetos. Cores podem transmitir sensações diferentes dependendo de sua aplicação, podem indicar um segmento de mercado (por exemplo infantil e alimentício) e muitas outras funções. Como designers, precisamos aprender a usá-las com sabedoria para que elas não virem inimigas do seu negócio, mas sim favoreçam-no. Como já dissemos nos posts anteriores, usar boas práticas de acessibilidade no seu layout, tanto em tipografia como em cores, beneficia e facilita o acesso a todos os usuários de uma maneira geral, não apenas os menos aptos, até porque a percepção de cores varia de pessoa para pessoa. Continuar lendo

Trabalho Final – Programação Visual Gráfica

Olá pessoal, tudo tranquilo?

Irei postar alguns trabalhos feitos na finalização do curso de Assistente de Programação Visual Gráfica, da escola SENAI em Vilhena-RO. Os trabalhos foram baseados na identidade visual de uma marca/empresa/instituição, onde deixei livre para os alunos escolherem as marcas a serem desenvolvidas.

De antemão dou PARABÉNS à toda a turma que desenvolveu bem, de um modo geral, suas habilidades na prática de edição visual gráfica. Continuem neste mesmo pique e irão longe.

Imagem inline 3

Aluna: Talessa

Aluna: Marilene

Aluna: Marlene Costa

Aluna: Stelany

Imagem inline 11

Aluno: William

Modelo de trabalhos – mídia impressa e digital

Olá for all!

Como trabalho final, passei a meus alunos dicas de como montar a identidade visual de uma empresa, em uma campanha de divulgação de produtos e/ou serviços. Postarei aqui, alguns exemplos de panfletos e banners, em formato para web e impressão, para que sigam e entendam como montar estes trabalhos.

Panfleto formato padrão

Modelos de banner para web

 

Modelo de banner impresso

Modelo capa da rede social FACEBOOK

Modelo Backgroud (fundo) para rede social TWITTER