Vocês perceberam que a internet está ficando linda, não é mesmo? Com estas novas atualizações das linguagens, os sites estão ficando muito mais interativos e bonitos. O HTML5 veio para revolucionar a internet, com novas tags e recursos, sincronização com outras linguagens. Abaixo selecionei diversos sites que são lindos e que fazem um bom uso do HTML5.
Quando se cria um blog não pensamos muito no layout que queremos usar, queremos mesmo é escrever e mostrar nosso conteúdo para o mundo seja ele bom ou não, a não ser que você já trabalhe com design e saiba que é extremamente importante ter um layout que possa dar ao seu blog/site as características corretas.
Quando estamos pensando em criar um layout para um blog ou site, temos que definir diversos aspectos antes mesmo de começar a desenhar ou meter a cara no código, não podemos criar por criar, sem definir conceitos. Se fizermos isso nosso layout não ficará bom e assim ficaremos trocando sempre, fazendo assim, seu blog perder as características.
Uma dica que tenho a vocês é: não use templates da web (perdi minha chance de ter anunciantes deste tipo, mas enfim). Não tenho nada contra quem usa ou algo do gênero, eu até entendo que compensa mais ter um template que você pagou 10 dólares ou até que não pagou nada do que ter que contratar um webdesigner, que é certamente mais caro, mas se você usa um template baixado ou até comprado você corre risco de ter apenas alguns milhares de blogs com o mesmo layout que o seu e acho que você não quer isso (mas se quer, vá em frente).
Seu blog fala sobre o quê?
Você sabe sobre o que seu blog fala e em qual nicho ele se encaixa? Ótimo. Isso é um passo importante, pois se seu blog trata de um assunto sério e mais formal não podemos deixá-lo todo colorido, e vice-versa, se seu blog é de humor você tem que dar uma animada nele, mas quando digo animada não digo para usar muitas cores e nem muitas fontes em seu texto, apenas um toque de diversão a mais.
Um exemplo de layout que faz um ótimo contraste com o assunto que trata é o Ferramentas Blog, do Marcos Lemos. Layout desenvolvido por Cláudio Sanches.
Quando esta parte do nicho de seu blog é definida o próximo passo é definir os conceitos, e é isso que irei falar agora.
Por que devo definir conceitos?
Com disse na introdução, é importantíssimo definir conceitos antes de criar seu layout, para que ele não fique sem sentido e com poucos sentimentos. Vocês podem achar que estou falando besteira, mas o sentimento dentro de um projeto é extremamente importante, um projeto no vaco, como podemos falar, é um tiro no pé se você quer que seu blog cresça e que tenha uma maior relevância.
Se conceitos forem aplicados seu projeto terá um peso a mais, pois quando alguém perguntar “quais conceitos que utilizou para criar este layout?” você terá uma boa resposta, repleta de sentimentos e detalhes sobre aquele projeto que criou, fazendo assim, um resumo destrinchado de seu projeto.
As cores...
O enigma das cores: quais definir? Qual se encaixará melhor em meu layout? Será que esta cor será muito forte para uma tela? E o contraste? Nossa, quantas perguntas. Mas vamos lá. Então, quando alguém me diz “ei kelvin, dá uma olhadinha aqui no meu layout e vê se tá bom, rapidin, rapidin”. Eu olho e digo o que estou vendo, sempre sou sincero, por isso muitas vezes as pessoas ficam p**** comigo, mas é normal, já me acostumei.
Cores é algo muito pessoal, você certamente gosta de tal cor e ninguém pode mudar isso, por este mesmo motivo não posso indicar cores. Eu, por exemplo, gosto de layouts mais cleans e minimalistas, amo branco, mas uma corzinha no layout é sempre boa. Devemos sempre trabalhar com o contraste (aliás, já tratei isso aqui no blog, leia) para que seus leitores tenham um interesse em ler seu conteúdo, mesmo que o conteúdo não esteja bom a legibilidade é importantíssima.
O posicionamento
Outra questão que é sempre abordada entre os blogueiros (participe do grupo de blogueiros) é o posicionamento dos elementos das páginas. Muitos blogs utilizam o conteúdo a esquerda e a sidebar à direita, mas isso não quer dizer que você deva seguir este padrão, seja ousado, mude, se diferencie dos demais. Mas isso também não quer dizer que você deve utilizar a sidebar do lado esquerdo e o conteúdo do lado direito, é apenas uma dica, que pode ser seguida se você achar melhor.
Quais linguagens utilizar?
No momento a internet está sofrendo muitas mudanças, do nada os sites começaram a ficar bonitos e interativos, sabe por que do nada? Há uns 7/8 anos a internet era cinza, sem cor, morta, dificilmente víamos sites bonitos (existiam?) e podemos dizer que esta grande rede de computadores interligados a internet evoluiu muito rápido, os sites ficaram muito bonitos, com cores chamativas, etc.
Mas enfim, a dúvida é sobre as linguagens, o que posso dizer é, aposte nas linguagens que estão surgindo e mudando a web, no caso HTML5 & CSS3, mas claro que não só estas duas, Javascript, PHP e outras podem entrar nesta lista, veja a que pode melhor atendê-lo e usufrua.
Enfim, galera. Acho que muitas dicas ainda podem ser dadas, como o artigo ficou um pouco extenso vou ficando por aqui, mas ainda teremos muitos artigos relacionados com este, adoro este assunto e voltarei com ele. Se vocês acham que falei alguma besteira ou querem complementar informações deixem nos comentários, lerei todos e assim que puder reponderei. Abraços e até mais.
@font-face, uma novidade que surgiu depois da vinda da atualização do CSS3, com este recurso você pode utilizar qualquer tipografia que você já tem em seu computador ou que você pode comprar na internet. Percebendo este recurso, diversos sites criaram seus layouts em HTML5 e CSS3 com o recurso da @font-face e por isso vou mostra-lhes exemplos que certamente vos inspirarão para criar seus layouts com estes conceitos.
Você como webdesigner deve estar ciente, site é para os usuários e não para seu cliente (pessoa que contratou você webdesigner). Você pode fazer o mais belo layout, a melhor programação e o mais profissional site para agradar seu cliente, mas depois de certo tempo toda essa gratidão e sorriso de orelha a orelha, vai se tornar em reclamação e seu cliente está com a razão! Você errou.
Um bom profissional web sabe, site é para os usuários e não para o cliente. Do que adianta todo um projeto, se o foco está incorreto, não vai chegar a lugar algum. Sempre pense em que vai acessar e não siga os “gostos” do seu cliente, se esses forem contraditórios aos que a sua pesquisa aponta.
Para alcançar o pico da montanha, o aventureiro conhece seu equipamento, sua capacidade, seus limites e como chegar lá. Você webdesigner tem que seguir os mesmos princípios: Conhecer o ramo do seu cliente, saber quem frequenta e/ou precisa dos serviços dele e aí sim, traçar o objetivo. Lógico que não somos obrigados a conhecer exatamente todos os ramos, mas se contratado para desenvolvimento do projeto, precisa buscar essas informações através de: pesquisas, enquetes, observações, etc... Com tudo isso em mãos e com o foco nos clientes do seu cliente, acerta o alvo.
Com toda a certeza as pesquisas tornam o projeto extenso, mais trabalhoso e cansativo. Pare, pense, antes tudo isso no começo, e um “final feliz” para ambos ou um “final triste” e estressante, seja para você ou seu cliente.
Então seja um profissional, mas aquele que se preocupa com seu nome, com a internet, com os clientes e principalmente as pessoas que vão usufruir dos benefícios de um site.
Está precisando de inspiração? Hoje trago diversas dicas para você se inspirar, pois, na verdade um webdesigner sem inspiração não é nada, se você não tem criatividade não vai adiantar querer sem um webdesigner bem-sucedido, por isso inspire-se com as seguintes dicas.
Fique Gelo
Todo mundo sabe que de cabeça cheia ou por livre e espontânea pressão ninguém consegue realizar nada com qualidade ou que seja, de certo modo proveitoso, por esse motivo aconselho que você procure fazer o que gosta: uma trilha no mato, andar de bicicleta, ir tomar aquele banho de rio, ou seja, se junte a natureza. SOMENTE APÓS realizar algum desses passeios continue a Ler.
Saiba o que realmente vai fazer
Antes de começar a desenvolver um layout ou mostrar para o cliente como “vai ficar” seu site, pergunte tudo o que ele vai colocar no site, de idéias mostre sites parecidos ao final é mais do que provável que já tenha imaginado algo.
Elaborando layout
Nessa altura do campeonato busque por fontes que demonstre o que você pretende passar ao usuário do site, hoje em dia com o Google fontes se tornou muito fácil esse procedimento. Trabalhe alternativas de cores interagindo com o logotipo do cliente mais não se esqueça de deixar simples e leve, lembre-se um site com muitas firulas deixa o usuário confuso.
E também de uma olhada nesses sites de inspiração:
Se você deseja ser webdesigner, tenho certeza que quer ser um ótimo webdesigner e com estas dicas que separei tenho certeza que você irá começar na carreira bem instruído, ou se você já é webdesigner, você poderá melhorar com estas dicas.
Hoje em dia todos querem se tornar um webdesigner, é razoavelmente fácil, pois existem inúmeros tutorias e vídeo aulas espalhados pela internet. Mas será que só isso faz com que a pessoa saiba realmente desenvolver um site? Abaixo vocês podem ver três tópicos que irão te ajudar na fase de aprendizagem:
Estudo teórico
Primeiro você precisa conhecer sim a teoria para aplicar na prática assim como: cores, fontes, diagramação etc. Varias vezes perguntei para a pessoa qual era a cor do amor e ela me respondeu "VERMELHO", só que vermelho é a cor da paixão, já o ROSA é a resposta correta.
Estude o significado das cores, o que cada cor passa para quem está olhando, estude fontes adequadas para site de banda, site de jornal, site de imobiliária, estude diagramações corretas de layouts, duas colunas, três colunas, com ou sem sidebar.
Fazer um planejamento antecipado é mais do que aconselhável, como por exemplo, saber o porque do search (caixa de pesquisa) ali, no topo do site. Procure ter o porque de tudo que está e onde está no site que vai desenvolver caso seja preciso pesquise sites similares e entenda a diagramação dele, e faça um briefing completo, não sabe o que é briefing?
Tempo: super importante você reservar um tempo todo dia para desenvolvimento do site, mas não exagere, você precisa de idéias novas e criatividade, sempre é bom ter algum diferencial dos outros sites.
Cronograma: formule um cronograma o qual deve seguir durante a criação do site marcando as etapas já cumpridas. Saber o que deverá ser feito e o que já foi realizado é muito bom no processo de criação de um site.
Treinamento: todo mundo sente dificuldade em fazer alguma coisa e saiba que no começo nenhum webdesigner tinha conhecimento de tudo, então quanto mais você fazer e refazer vai reter aprendizagem.
Profissionalismo
Para se tornar um webdesigner profissional você não precisa só de estudo, planejamento, tempo, seguir cronogramas e treinar muito. Você precisa conhecer seus clientes os quais deve ter o tratamento da melhor forma possível.
Seguir o cronograma e cumprir corretamente os prazos estabelecidos deve ser sua lei principal, como você não gosta de comprar algo o qual deve chegar dali cinco dias e chega em um mês, seu cliente também não vai gostar de ser “enganado”.
Mostrar o que está fazendo com relatórios mensais ou até mesmo semanais a seu cliente é muito bom, demonstra profissionalismo, e como está sendo realizado o desenvolvimento do site demonstrando que o valor pago é mais do que justo.
Realizar sempre reuniões podendo ser até mesmo para a entrega dos relatórios e aproveitando para conhecer seu cliente e o que a empresa dele busca, pois quanto mais à cara do cliente mais satisfeito ele vai ficar.
O assunto de hoje é variáveis. Afinal, O que são variáveis? Na programação, uma variável é uma entidade (uma posição, frequentemente localizada na memória) capaz de reter e representar um valor ou expressão. Enquanto as variáveis só "existem" em tempo de execução, elas são associadas a "nomes", chamados identificadores, durante o tempo de desenvolvimento. Então, Variável é uma entidade que pode armazenar algo, seja um número, letras, símbolos etc...
Strings são as variáveis no PHP, elas são compostas de $ no início e letras, números e símbolos. Veja um exemplo de string: $nome Como você pode ver temos uma string denominada nome. As strings não podem ter no início algum número, só é permitido letras e sobrelinha (understroke para os que não sabem...), além de não é permitido ter acentuação.
Exemplo: $123feijaocomarroz (Errado), $_123feijaocomarroz (Certo), $feijaocomarroz123 (Certo). Geralmente as strings que começam com sobrelinha são strings com funções do PHP (Como por exemplo $_GET["y"], que explicarei o que essa string faz mais pra frente), mas isso não quer dizer que você não possa fazer uma string que comece com sobrelinha, como fizemos no exemplo anterior.
Como colocar algum texto numa Variável? Você pode colocar algum texto, número ou símbolo numa variável da seguinte maneira: $variavel = "exemplo"; Como podem ver, coloquei um igual a frente da variável e coloquei entre aspas a palavra "exemplo", e assim colocamos na variável $variavel a palavra exemplo.
Podemos colocar um texto mais outro texto que está em outra variável. $variavel = "exemplo"; $variavel2 = $variavel."2"; Como podem ver, quando declarei a variável $variavel2 coloquei a variável $variavel junto com um ponto e coloquei entre aspas o número 2, assim declarada a $variavel2 com "exemplo2". Ou seja, quando você declarar uma variável e colocar uma outra variável seguida de um ponto, você vai poder colocar algum texto entre aspas ou outra variável. $variavel = "exemplo"; $variavel2 = "2"; $variavel3 = $variavel.$variavel2; Como vocês viram nesse exemplo, a variável $variavel3 ficará com o conteúdo da variável $variavel e da variável $variavel2.
Vamos ao Primeiro Exercício? Então, vamos fazer um exemplo de variáveis que vai ser declarada a variável $x com o valor de 5, $y com o valor de 10 e $z com o produto da soma de $x e $y e mostrar o seguinte para o usuário "O Valor de x é $x, o valor de y é $y e o resultado da soma de x e y é $z.". Então, vamos lá?
Começando o Script para começar, como disse na última aula, temos que avisar ao Apache que vamos colocar comandos para ele executar. Então começamos o código com <?php
<?php
Agora vamos declarar as variáveis $x e $y, que no caso $x é 5 e $y é 10.
<?php
$x = 5;
$y = 10;
Agora, como faremos a soma desses dois números? Simples, é só declarar a variável $z com a soma de $x com $y. Faremos isso declarando $z com $x+$y.
<?php
$x = 5;
$y = 10;
$z = $x+$y;
Agora vamos escrever ao usuário que "O Valor de x é $x, o valor de y é $y e o resultado da soma de x e y é $z.", como faremos isso?
Lembra da função que usamos na última aula de PHP, a função echo()? Então, vamos usar ela. primeiramente colocaremos o seguinte na função:
echo("O Valor de x é [...]
Agora colocaremos aquele ponto que usamos nos exemplos anteriores, para juntar o texto com a variável $x:
echo("O Valor de x é ".$x.[...]
OBS: Você viu que fechei as aspas antes de colocar o ponto? isso é para que junte a variável, e não simplesmente mostre ao usuário um ponto.
Agora colocamos novamente entre aspas a frase até a variável:
echo("O Valor de x é ".$x.", o valor de y é [...]
Novamente colocaremos o ponto e a $variavel, e faremos isso até o fim da função onde fechamos os parênteses e colocamos ponto-e-virgula.
echo("O Valor de x é ".$x.", o valor de y é ".$y." e o resultado da soma de x e y é ".$z);
E assim colocamos no código que estávamos fazendo.
<?php
$x = 5;
$y = 10;
$z = $x+$y;
echo("O Valor de x é ".$x.", o valor de y é ".$y." e o resultado da soma de x e y é ".$z);
E colocamos, para parar de executar o código PHP, fechamos a tag <?php com ?>
<?php
$x = 5;
$y = 10;
$z = $x+$y;
echo("O Valor de x é ".$x.", o valor de y é ".$y." e o resultado da soma de x e y é ".$z);
?>
E assim salvamos como string.php na mesma pasta que criamos na aula passada(c:/wamp/www/cursophp) e executamos acessando http://localhost/cursophp/string.php.
AVISO: Lembrando que o WampServer tem que estar ligado, ou seja, aparecendo o W Verde na barra de tarefas.
O que o navegador vai mostrar é o seguinte: O Valor de x é 5, o valor de y é 10 e o resultado da soma de x e y é 15. O que o Apache Fez? Quando começou a execução do código, que foi declarada a primeira variável, o Apache criou uma tabela, e 1 coluna aonde ele colocou a primeira variável, isso na Memória RAM do seu computador. ficou mais ou menos desse jeito:
x
5
Dai quando foi declarada a segunda variável ele criou outra coluna, e ficou assim:
x
y
5
10
Dai quando foi declarada a terceira variável, o apache leu as variáveis x e y, para fazer a soma, e assim ficou a declaração da variável: $z = 5+10; Assim, foi feita a soma que o resultado foi 15. Assim o Apache criou outra coluna:
x
y
z
5
10
15
Depois disso, o comando foi de escrever a frase para o usuário, então o Apache leu as três variáveis e colocou aonde estava sendo pedido: O Valor de x é 5, o valor de y é 10 e o resultado da soma de x e y é 15 E assim o código terminou e o Apache terminou de processar o código.
Espero que vocês tenham gostado dessa aula e lembrem-se pessoal, amanhã tem sorteio de 2 pen drivers aqui no DE, corram que ainda dá tempo. Bom Carnaval a todos e até a próxima aula do curso.
Iniciamos aqui uma aula básica de como mexer e brincar com PHP e falamos como instalar o WAMP/XAMP no Windows. Um problema que muitos deparam ao começar a usar Linux/Ubuntu é como instalar o Apache, MySQL, PHPMyAdmin, entre outros, e por mais que pareça complexo de instalar, é fácil demais e você pode fazer isto em questão de segundos e instalando o LAMP via terminal da maneira mais fácil do mundo.
Para instalar, é muito simples. O amigo Gustavo Marttosfez uma postagem em seu blog explicando tudo da maneira mais simples possível, e da maneira mais simples possível para se configurar. Recomendo que leia o post todo depois instale e garanto comigo mesmo que rodou com sucesso.
Agora você pode usufruir do jeito que quiser e desejar o seu LAMP e começar a programar e estudar seu PHP com as postagens aqui do blog. :)
Primeiramente vou me apresentar: Sou João Paulo Polles, tenho 16 anos, sou estudante (meio obvil não é?), trabalho como Web Designer e Programador Web. Hoje estou começando aqui uma série, onde ensinarei vocês a programarem em PHP.
Introdução
O que significa PHP? PHP significa PHP: Hypertext Processor (Isso mesmo! o Primeiro P de PHP significa PHP, estranho, não?).
Primeiramente o PHP tinha surgido como um pacote de programas em CGI criados por Rasmus Lerdorf, em 1994 com o nome de Personal Home Page Tools, para substituir um conjunto de scripts Perl (Siglas estranhas para Você? Vocês podem saber mais sobre CGI e Perl na wikipédia que usava para o desenvolvimento de sua página pessoal. Com o tempo o PHP foi se popularizando e hoje é a linguagem ServerSide (Linguagem que éinterpretada no Servidor) mais utilizada no Mundo. O PHP não é a unica Linguagem para Desenvolvimento Web, tem outras liguagens como já mencionamos o CGI, Pear, Asp, Asp.NET, JSP dentre outras.
Para eu começar a aprender PHP preciso de que?
Primeiramente, você precisa saber HTML (Para construir a Página Web) e CSS (Para Fazer o Estilo do Site). Além disso você terá que ter 2 Programinhas necessários para poder desenvolver em PHP: Bloco de Notas (OPA! Você ja tem isso, que bom!) e o Wamp Server (Caso você use Windows) ou o Xampp for Linux (Caso você use alguma distribuição Linux, mas vamos explicar para usar o Wamp Server).
Você já ta com vontade de começar a Programar em PHP?
Já que você já tem essa vontade, vamos começar a programar. Hoje vamos fazer um script em PHP que escreva no Navegador (o programa que você usa para acessar as páginas na internet: IE, Google Chrome, Opera, dentre outros...) a Escrita "Olá Mundo!".
Começando o Script
Para começar o script abrimos o bloco de notas e vamos lá. Para começar precisamos que o Apache perceba que tem que interpretar aquele comando. Como Fazemos isso? Para isso todos os comandos em PHP que fazermos precisa estar entre as tags <?php e ?>.
Então começamos o código escrevendo:
<?php
Agora vamos utilizar a nossa primeira função do PHP: A função echo(). Nessa Função tudo que estiver entre aspas será escrito para o usuário.
Ex:
<?php
echo("Olá!");
?>
Resposta:
Olá!
OBS: Você viu que depois da função echo() coloquei um ponto-e-virgula? É que para informar ao Apache que paramos de usar aquela função.
OBS2: Ah, mais uma coisa, o Apache é o programa que interpreta os códigos em PHP.
Então para fazer o php escrever "Olá Mundo!" no navegador, precisamos
usar essa função.
<?php
echo("Olá Mundo!");
Agora Fechamos a Tag <?php com ?>.
<?php
echo("Olá Mundo!");
?>
Assim salvamos o arquivo em C:/wamp/www (que é a pasta onde o Apache interpreta os arquivos que estão em PHP). Então antes de você salvar o arquivo, crie uma pasta em C:/wamp/www com o nome "cursophp". Dai Salve o Arquivo em C:/wamp/www/cursophp com o nome "olamundo.php".
OBS: Todos os arquivos que tiverem a extenção ".php" serão interpretados pelo Apache.
Depois disso (se você ainda não o fez) inicie o WampServer clicando em "start WampServer" no Menu Iniciar (Menu Iniciar > Todos os Programas > WampServer > start WampServer). Depois disso espere mais ou menos 10 segundos, e irá aparecer um icone com um formato de um "W" verde na barra da tarefas (Caso esteja Verde é que o Wamp já foi iniciado, se estiver laranja está iniciando ou se estiver vermelho quer dizer que está parado).
Logo após isso abra o seu navegador e Digite na barra de endereços: http://localhost/ (que é o link que acessa ao WampServer). Então já digitado, digite cursophp/ (Aquela pasta que criamos, isso quer dizer que queremos os arquivos contidos nessa pasta) e depois digite "olamundo.php" (o arquivo que nós criamos), depois de digitado "http://localhost/cursophp/olamundo.php" tecle enter.
Assim no navegador vai ser escrito o seguinte:
Olá Mundo!
Então, vocês gostaram desse script? Quer Mais? Então até o próximo post do Curso de PHP do Designer Effects na Próxima Semana.
Acho que muitos de vocês que estudam Webdesign sabe que sem o CSS nada sai com beleza certo? Ele que dá a vida aos seus projetos, com as cores, formatações de tipografias e outras cosas bem legais. Mas vocês sabem trabalhar bem com as folhas de estilos? FOLHAS DE ESTILOS? Sim sim, este é o nome em português do CSS.
Organize seu CSS
O primeiro passo é deixar seus css organizado, é o mesmo do que seu quarto, quando está tudo bagunçado você não acha nada, e, se isso acontece em seu css como você irá achar alguma propriedade lá dentro com tantos e tantos códigos? Por isso organize seu css, faça endentações e deixe espaços entre suas propriedades.
Qual é melhor de ser visto e entendido? O segundo certo? Fica muito mais organizado e melhor de se entender o que está sendo passado para quem tem que editar.
Use comentários...
Mas não exagere. Os comentários em seu css é muito utilizado para ser mais fácil a localização de tal propriedade, com eles você pode deixar seu css mais organizado. Mas, por favor não exagere, isso pode pesar e muito em seu arquivo.
Os comentários no css são utilizados em base do seguinte elemento: /* SEU COMENTÁRIO */
Veja exemplos:
/* CORPO DO LAYOUT */
body {
background: #fff;
margin: 0;
color: #222;
}
/* MENU */
.menu {
background: #ccc;
border-bottom: 2px solid #ccc;
border-top: 1px solid #ddd;
}
IDs ou Classes?
Muitos tem estas dúvidas, usar ID (#) ou Classe (.). Na verdade você pode utilizar as duas, só que é mais recomendado utilizar as IDs (que é feita com o sinal de #) em elementos que apareçam apenas uma vez (como o cabeçalho, menu, sidebar, etc...) em seu arquivo html, e, as classes (que é feita com um ponto) em elementos diversos (como por exemplo .anuncio).
MAIÚSCULA ≠ minúscula
Se você utiliza uma class, como por exemplo .Anuncio, você deve utilizá-lo assim, se colocar como .anuncio terá erro no css e as propriedades não serão aplicadas.
Lembre-se da hierarquia
Todos que estudaram o básico de HTML deve lembrar das famosas headings (h1 à h6), elas devem sempre estar em hierarquia e não podemos ter mais de um h1 em nosso arquivo HTML, pois isso atrapalha no SEO (search engine optimization).
Desta forma você fará com que todos estes elementos tenham a mesma tipografia.
Teste seu site em todos os browsers
Com os novos browsers (navegadores) conseguem ler quase todos os novos elementos como o CSS3 e HTML5, a gente até esquece dos navegadores antigos como o IE (internet explorer) que não podemos mentir que muita gente (a maioria são os leigos) ainda utiliza, por isso sempre procure usar elementos que faz os browsers antigos lerem.
Aqui termino este post com estas diversas dicas, espero que tenham gostado e que vocês comentem, com dúvidas, dicas, sugestões, ameaças e até críticas. Um forte abraço a todos, até mais!
Links são importantes em várias coisas. Tanto em textos ou em seu projeto de site/programa/app/aplicativo/whatever, o link é de extrema importância para cada um de nós. Hoje colocar um endereço escrito invés de algo que redirecione, é algo irregular -- praticidade é regra. Ninguém quer copiar o link e por no navegador, quer algo expresso, que por acaso, nada é de se esperar que redirecionar é melhor. Clica no link e pronto, não é mais prático?
Aprender a mexer nisso é algo fundamental, que é bem simples. A tag é identificada como "<a>", e pode ser manuseada de várias formas. Como vocês -- creio eu que muitos que estão lendo sejam isto --, não sabem usar HTML direito, isto é fundamental para vocês, que querem aprender algo de HTML, ou pelo menos, escrever em alguns lugares -- é algo quase raro você ver um editor de textos que não tenha coisas automáticas.
Usando a tag
Usar ela é bem simples, é algo mágico e nada é relativo ao de demorar séculos. Algo que aprendi em 30 minutos de uso -- isso na primeira vez de uso. Peguei a tag, e sai usando, que recentemente, havia aprendido no Blogger como utilizá-la -- sim, pelas configurações.
Para usar, você, como sempre, deve abrir a tag, mas não é só abrir, tem mais procedimentos. Veja um exemplo:
Viram que, eu coloquei mais coisas dentro da tag. O que acontece, é o seguinte: quando você usa, você tem que por a URL/Site que você vai redirecionar. Para isso, você deve abrir a tag <a> normalmente, mas antes de fechar, deve por a variável " href="link" " do lado do "a". Depois você por isto, você pode fechar, e depois, escrever ali o nome que quer que apareça no texto. Há também mais coisas que se deve por, que vou apresentando -- no caso, são os atributos.
Atributos da tag <a>
É claro, e evidente, que há atributos. Há vários, como "target", "title", dentre outros, mas vou citar só como adicioná-los e alguns que deve recordar para sempre.
No exemplo acima que eu dei, eu pus o "href". Isto é um atributo. Os atributos devem ser postos que nem o "href", ou seja, tudo no mesmo local (na abertura da tag). Não se deve por um colado no outro, que, ao utilizar os atributos pondo as aspas, assim que fechar, obrigatoriamente se deve ser visto que é obrigatório um espaço. Veja um exemplo:
Bem simples. Coloquei também ali as tags que você deve conhecer por si só. São as mais utilizadas, e é de extrema importância. Sim, eu digo da "title" e "target".
A "title" diz de cara do que se trata. Quando você vai passar o mouse por cima do link, vai amostrar o que você escreveu nesse atributo, caso não ponha, nada se aparecerá. Nem há mistérios do que por, mas, por via de dúvidas, pode tirar via comentários conosco.
Há também a "target", que é um pouco mais difícil. Nesse atributo, você vai escolher a forma e onde vai abrir seu link. Abrir em nova janela é o maior destaque já visto sobre este tributo, mas embora seja o mais famoso, há outros que você vai gostar mais. Futuramente você vai aprendendo, mas tome nota que para deixar abrir em uma nova janela, é só utilizar "target="_blank" ", por exemplo:
É uma boa dica de se aprender, mas que vou dar só uma prévia porque isto, aprofundaremos mais tarde, que é algo que precisa de mais atenção. Mas, vejamos aqui como usar, no caso, é só uma dica rápida. Saca só este exemplo:
<a href="http://designereffectsbr.blogspot.com/"><img src="link da img" /></a>
Nota-se que invés de se por algo escrito entre a tag, eu pus uma tag de imagem -- sim, o que está de negrito. É só fazer tudo normal, mas ao invés de por um texto entre a tag <a>, eu ponho "<img src="link da img">".
É bem simples, mas por acaso, precisa de mais um link, sim, o da imagem. Você vai ter que pegar o link da imagem na internet, que você colocou em algum canto, e colocar no lugar de "link da img", e pronto, a imagem foi colocada.
Não é complicado, é algo simples, mas é algo chato de se solucionar caso haja algum problema. Alguma dúvida ou tudo fora esclarecido? Se tiver, não se espante, hesite em nos comentar sempre que for necessário!
Há um legado de iniciantes aqui querendo aprender o triplo de sua própria vontade para se tornar um grande blogueiro, ou apenas um web designer. Não sou "o fod**" no quesito, mas conheço bem -- sou mais da galera do PHP e do CocoaTouch e Cocoa (ambos para sistemas da Apple) --, mas também, sei coisas que, além de aprender dia a dia no colégio, é o básico para a sobrevivência de todos no mundo da edição de sites.
Falando em iniciantes, no blog, há um tempinho, nosso amigo Kevin já havera criado o post "o que é HTML?", e para muitos, é bom ler.
Tags que deve conhecer
Há um universo de tags padrões, que vem no HTML por natureza, e há aquelas que você cria, que nesse caso, provem de grandes empresas, como por exemplo, a Google com suas ferramentas para sites/blogs em que ela cria suas próprias tags, que por exemplo, é "<g:ferramenta>". Vejamos aqui umas que você deve conhecer se lembrar sempre:
<p>: Ao utilizar esta tag, você automaticamente gera um parágrafo, usando, como por exemplo, desta maneira: "<p>Este é um parágrafo</p>". Nota-se que se deve fechar a tag com uma "/" antes do "p", caso não feche o parágrafo, ele continuará.
<br />: Pule uma linha pondo isto. Só por isto, e tchan, linha pulada -- como podem averiguar, até para pular linha depende-se disto de alguma tag.
<div></div>: O efeito dela é no estilo. Você pode por "<div id="">" ou por "<div id"" class"">" ou "<div style=''>" para utilizar. Usando "id", você vai pegar uma propriedade do arquivo CSS e aplicar, que no caso, vai gerar o estilo que você gerou usando aqueles códigos no CSS, já no "class", vai usar daquela certa classe provindo daquela propriedade, e no "style", você vai criar um estilo sem depender de um arquivo CSS, mas aí já é HTML avançado.
<font></font>: Sem mais delongas, isso você altera o estilo da letra, de certa forma que, só muda coloração, se é em negrito, sublinhado, a fonte, tamanho, e outros demais. No uso, você tem que por que abrir com "<font>", mas invés de fechar direto, ponha os atributos. Existem "type", "color", "size", e outros -- sendo que aqueles são os mais importantes. "type" você muda a fonte, "color", a coloração, e "size" o tamanho.
<h1> - <h6>: Esses são os tão falados "headings". Nisso, você faz títulos, tendo 6 tamanhos. O 1, provavelmente, é o maior, o 2 é o segundo mais usado na internet, e o 3 é o mais usado. Tem de 1 à 6, então, é só mudar o número para usar. Para usar, é só por assim: <h3>Heading3</h3>. No caso, onde fica o "Heading3", você coloca seu texto.
<b></b>: Coloca o texto em negrito. Se deve usar assim: "<b>Texto em negrito</b>".
<i></i>: Deixa o texto em itálico. Se usa da mesma forma que o negrito.
<u></u>: Deixa o texto sublinhado. Se usa da mesma forma que o negrito e itálico.
<del></del>: Deixa o texto riscado (como este). É bem útil quando se deseja fazer uma piada ou quando você quer negar o que escreveu, pois está errado.
<big></big>: Bom para quem quer deixar o texto maior para destacar algo.
<small></small>: Faz o mesmo que o <big>, só que o efeito é ao contrário, onde você diminui o texto.
<strong></strong>: Tem o mesmo fim que "<b>", mas, pela W3Schools, é mais correto utilizar o <strong> do que o <b>. Daí vai com a sua vontade própria.
Estrutura do HTML
Sempre há aquela estrutura de sempre, e o próprio post sobre o que é HTML já há a estrutura, mas por fim, algo mais detalhado é melhor.
Obrigatoriamente, se deve usar deixar nesta ordem -- acho bom você até gravar isso, porque se não sabe isto, você vai pagar mico.
<html></html>: Necessita para verificar se é HTML. Num futuro qualquer, que é algo bem mais avançado, vocês vão entender porque se necessita isso porque há várias linguagens como PHP, C, C#, Python, e a falta disso pode resultar em algo catastrófico.
<head></head>: Significa que você está editando coisas do cabeçalho do blog. Não se deve por nada ali além de scripts e estilos do CSS, por exemplo, se você por algo ali, nada aparecerá.
<title></title>: Já notou na região de título no seu navegador (ou até mesmo na aba) que há um nome ali escrito? O que está escrito ali, aparecerá dependendo do que você escrever entre essa tag.
<body></body>: Dessa tag você começa os inventos. Com isso, você pode começar a produção do seu site, porque ali, você já pode levantar o que vai aparecer para as pessoas.
Sacaram? É bem simples fazer isso. No início, como até eu achei, é meio complicado, mas nada que uma estudada em HTML em uma hora por dia ajude. Mexo nisso há 3 anos e meio, e até hoje eu não sou bom o suficiente porque eu sou meio largado, mas agora eu sei bastante e cá entre nós, isso não é mistério algum. Enfim, deu pra entender? Alguma dúvida? Compartilhe conosco via comentários para nossa equipe ajudar, e se a nossa equipe não ajudar, ainda tem os outros leitores. Vamos ver como se saem e boa sorte :D.
O Cascading Style Sheets (CSS) é uma "folha de estilo" desenvolvido pela World Wide Web Consortium e é utilizada para dar estilos as páginas web, e dão estilos a linguagens de marcação (como XML, HTML e XHTML). O CSS é uma linguagem para poder dar efeitos diferentes e evitar a cópia de seu HTML futuramente, pois cada CSS é diferente do outro e isso ajuda a ter sites diferentes.
Sintaxe
O CSS tem uma sintaxe muito simples utiliza palavras em inglês para especificar os nomes de cada propriedade que existem na página.
As regras básicas do css consiste em ter todos os estilos dentro de uma chave {, depois de um nome de estilo como por exemplo o comando color que serve para demarcar a cor que vai ser utilizada no texto, e depois do comando você tem que utilizar o símbolo de dois pontos : para que o navegador leia que já começou os estilos do CSS, depois dos estilos você deve colocar o símbolo de ponto e vírgula ; e quando já fechou todos as propriedades do css usa novamente a chave } para fechar seu estilo de css, abaixo você pode ver alguns exemplos de css.
Exemplos
Veja um exemplo que usa o body (corpo) do HTML para dar estilos.
body {
font-family: Arial, Verdana, sans-serif;
background-color: #FFF;
}
No css acima você lê:
Font-family = uma família de fontes que determina em primeiro plano a Arial, em segundo plano o Verdana e em terceiro as fontes sans-serifadas.
Background-color = determina a cor de seu background (fundo), e neste fundo com o código hexa-decimal de #FFF que significa que é a cor branca, para saber mais cores hexa-decimais veja esta tabela de cores criada pelo site MXStudio.
Existem várias outras propriedades de css, que vamos passar em outros posts, acho que neste post deu para entender um pouco o que é css, mais se ainda existir dúvidas, comentem que vamos respondê-las, fiquem com Deus e forte abraço.
HTML é uma linguagem de computador desenvolvida para permitir a criação de sites. É bem fácil de aprender e ela é bastante poderosa na hora da criação de sites. O HTML sempre está em fase de revisão e evolução para atender às demandas e exigências do público internauta que cresce sob a direção da W3C, a organização encarregada de projetar e manter a língua.
O HyperText Markup Language (HTML)
HyperText (HiperTexto) é o método pelo qual você se move na internet, ou seja, você pode ir a qualquer lugar na internet sempre que desejar, clicando apenas em links.
Markup (Marcação) são etiquetas ou tags, que dizem a um browser como publicar uma página na web, ou seja, o browser interpreta essas etiquetas e desenha a página.
Como isso funciona?
HTML é composto de uma série de códigos curtos digitado em um arquivo de texto pelo autor do site - estas são as tags. O texto original é salvo como um arquivo HTML e é visualizado através de um navegador, como por exemplo o Internet Explorer ou Mozilla Firefox. Este navegador lê o arquivo e traduz em texto de um forma visível/legível.
Tags e Etiquetas
Por vezes os termos elemento ou tag, de uma forma errada, são usados indistintamente. Um elemento é composto por duas etiquetas: uma para abrir e outra para fechar.
Todas as tags são construídas da mesma forma. A etiqueta inicia-se com o sinal de menor "<" seguido do nome do elemento e termina com o sinal de maior ">". A forma da etiqueta para a abertura de um parágrafo é: <p>. A tag que fecha o elemento diferencia-se apenas por possuir uma barra "/" antes do nome do elemento: </p>. O conteúdo fica entre as etiquetas de início e fim:
<p>Este é um pequeno parágrafo.</p>
Alguns elementos não precisam de uma tag para fechar porque não incluem qualquer tipo de conteúdo e são por isso denominados elementos vazios. É assim que, por exemplo, o elemento de pular linha <br> não requer uma etiqueta de fechar.
Atributos
Os atributos são outro elemento importante da linguagem HTML. Um atributo é utilizado para definir as características de um elemento e é colocado no interior da tag de abertura do elemento. Por exemplo, para atribuir a cor a uma palavra utiliza-se o elemento FONT em conjunto com o atributo COLOR:
<font color="red">seu texto em vermelho</font>. O sinal de igual e as aspas são fundamentais pois atribuem um valor a um atributo. Para alterar a cor, mude a palavra destacada em vermelho para a cor desejada. Obs: A cor deve ser escrita em inglês.
Você também pode aplicar estilos em suas etiquetas, para isso você deve usar o atributo "style" que serve para aplicar estilos CSS diretamente no HTML, veja um exemplo:
<div style="color:red;">...</div>. Viu que é exatamente o mesmo efeito do primeiro atributo, mais este foi usado como estilo em CSS, só que não é muito recomendado para websites, porque pode dar alguns erros e é bem difícil de concertar, por isso recomendo que escreva CSS no CSS.
A utilização de letras minúsculas ou maiúsculas no nome dos elementos, tags e atributos é indiferente para a interpretação que os browsers fazem delas. Por exemplo: <p>...</p> é a mesma coisa que <P>...</P>
Se for escrita uma etiqueta que não exista em HTML ou que um determinado browser não entenda essa etiqueta, a mesma será ignorada não produzindo qualquer saída.
Alinhamento
Numa página da web existem quase sempre múltiplos elementos que nunca se devem sobrepor. Os elementos devidamente aninhados são sempre independentes uns dos outros. Veja-se o seguinte exemplo em que tudo está arrumado ou alinhado:
<a> <b> <c> </c> </b> </a>
Agora uma situação em que há sobreposição e uma falta de alinhamento:
<a>
<b>
</a>
<c>
</b>
</c>
O básico de um site HTML
Os elementos referidos abaixo são os mais básicos e aqueles estritamente necessários para programar uma página em HTML.
<html> </html> Definem o início e o fim da página.
<head> </head> É o cabeçalho da página e, normalmente, não aparece na janela do site.
<title> </title> Este elemento está alinhado no HEAD e escreve o título da página na barra de título em cima da janela do browser.
<body> </body> Contém o conteúdo principal da página.
<!--Coloque aqui os seus comentários --> Serve para inserir notas ou comentários sobre a página e não são mostrados na janela do browser.
O documento mais simples em HTML, também conhecido como documento mínimo, terá a seguinte estrutura:
<html>
<head><title>Este é o nome da página</title>
<!-- informação extra sobre este documento que não irá aparecer na página mas no cabeçalho -->
</head>
<body>
O body contém todo o texto e todas as imagens que constituem a página
</body>
</html>
Quando se está a escrever a página muitas vezes sente-se a necessidade de fazer alguns comentários a uma parte específica do código, para tal utilizam-se as tags, os comentários não têm qualquer fechamento.
Obrigado a quem leu até o fim deste artigo, qualquer dúvida a respeito deixe nos comentários que iremos ajudá-los.
Kevin Oliveira
Everton Bronoski
Bruno De Blasi
