nov 28, 2017 0

Criando URL Amigáveis com PHP e htacess

Atualmente com o SEO cada vez mais presente para mecanismos de busca e relevância de páginas, um ponto importante para otimização e também para uma melhor experiência do usuário é a chamada URL Amigável. Por exemplo, uma loja que exibe as informação de um produto teria uma URL assim:

A) http://www.minhaloja.com.br/produto.php?codigoProduto=1234 ou
B) http://www.minhaloja.com.br/produto.php?cod=produto-teste
C) http://www.minhaloja.com.br/categoria.php?categoria=27

Para os exemplos citados acima, eu poderia reescreve a URL da seguinte forma:

A) http://www.minhaloja.com.br/produto/1234
B) http://www.minhaloja.com.br/produto/produto-teste
C) http://www.minhaloja.com.br/categoria/acessorios

Além disso, essa técnica é útil para SEO para otimizarmos a palavra chave na URL. Dessa forma, uma URL comum seria:

D)http://www.meusite.com.br/pagina.php?page=375

Otimizada:

D) http://www.meusite.com.br/desenvolvimento-de-sistemas

Para tal, vou mostrar como fazer o apontamento no arquivo .htacess e posteriormente ler o parâmetro com PHP.

Primeiramente, verifique se a reescrita de URL está habilitada em seu servidor. Uma vez habilitada, devemos escrever a regra de redirecionamento no arquivo .htaccess, ficando dessa forma:

 

.htaccess

1
2
3
4
5
6
7
8
9
    RewriteEngine On
    #Exemplo A
    RewriteRule ^produto/([0-9]+)$ produto.php?codigoProduto=$1
    #Exemplo B
    RewriteRule ^produto/([A-Za-z]+)$ produto.php?cod=$1
    #Exemplo C
    RewriteRule ^categoria/([0-9A-Za-z]+)$ categoria.php?categoria=$1
    #Exemplo D
    RewriteRule ^([0-9A-Za-z]+)$ pagina.php?page=$1

Explicando o código, escrevemos a regra de reescrita começando com RewriteRule. Em seguida, utilizei expressões regulares para definir que tipos de caracteres devem ser inseridos para que a regra valha. Em seguida, eu escrevo qual é o arquivo que deve ser lido de fato e com o parâmetro que informei na url com $1. (Caso deseje mais parâmetros na url, a escrita será parecida, mas informando as variáveis incrementando da seguinte forma: $1, $2, $3 e assim por diante. é importante que escreva corretamente qual é o nome do parâmetro corretamente e também a ordem que receberá os parâmetros na URL.

Agora, no arquivo PHP a leitura é feita como um parâmetro GET comum, da seguinte forma:

 

arquivo PHP teste.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    <?php
    //Exemplo A
    $produto = $_GET['codigoProduto'];
    echo $produto;
 
     //Exemplo B
    $produto = $_GET['cod'];
    echo $produto;
 
     //Exemplo C
    $categoria = $_GET['categoria'];
    echo $categoria;
 
     //Exemplo D
    $pagina = $_GET['page'];
    echo $pagina

É isso pessoal, espero que tenham gostado. Se tiverem sugestões, por favor escrevam!

Até a próxima.

maio 12, 2016 1

Ajax + PHP Retornando HTML e JSON

Vou mostrar neste artigo como realizar chamada de uma função PHP via Ajax utilizando método GET através de um evento de clique de botão de uma maneira simples. Neste pequeno tutorial iniciante vou exemplificar uma página HTML contendo o JQuery que executará a chamada via Ajax, a função PHP que fará qualquer coisa retornando primeiramente o HTML a ser impresso e depois retornando um Array em JSON.

 

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<html>
	<head>
		<!-- Incluindo a biblioteca JQuery na página-->
		<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
		<title>Este é um teste Ajax</title>
 
		<!--Chamada Ajax para execução de nossa função php-->
		<script>
			$(document).ready(function() {
				//Declaração da minha função que retornará o HTML
				$("#btnGeraHtml").click(function () { 
					var variavel = $("#numParagrafos").val(); //pegou o valor digitado no input texto
					$.ajax({
						type: "GET", //método escolhido
						url: "funcao.php", //arquivo php chamado
						data: "funcao=html&valor="+variavel,
						dataType: "html",//tipo de função a ser retornada
						error: function(){
							$("#retorno").html("Erro ao carregar HTML! Tente de novo!");
						},
						success: function(html){
							$("#retorno").html(html);
						}
					});
				});
 
				//Declaração da minha função que retornará o JSON
				$("#btnGeraJson").click(function () {
					var variavel = $("#numParagrafos").val(); //pegou o valor digitado no input texto
					var conteudo = "";
					$.ajax({
						type: "GET",
						url: "funcao.php",
						data: "funcao=json&valor="+variavel,
						dataType: "json",
						error: function(){
							$("#retorno").html("Erro ao carregar JSON! Tente de novo!");
						},
						success: function(dados){	 
							 for(j=0;j<dados.length;j++) {
								  conteudo = conteudo + dados[j];
 
							 }
							 $('#retorno').html(conteudo);
 
						}
					});
				});
			});
		</script>
	</head>
 
	<body>
		<h1 style="float: left; width: 100%; text-align: center; font-size: 30px; color:#555">Gerador de Parágrafos.</h1>
		<input type="text" id="numParagrafos" placeholder="Digite o número de parágrafos a serem gerados" style="width: 500px; padding:10px; font-size: 15px; border: 1px solid #999; float: left; margin: 10px 20px;" />
		<input type="button" value="Gerar utilizando Ajax com retorno HTML" id="btnGeraHtml" style="float: left; margin: 10px 20px; padding: 10px 20px; color: #fff; background: #333;cursor:pointer" />
		<input type="button" value="Gerar utilizando Ajax com retorno JSON" id="btnGeraJson" style="float: left; margin: 10px 20px; padding: 10px 20px; color: #fff; background: #333;cursor:pointer" />
		<div id="retorno" style="position:relative; width: 980px; margin: 20px auto;    overflow: hidden;"></div>
	</body>
</html>

Lembrando que o foco aqui não é CSS nem padrões de desenvolvimento e sim apenas mostrar o funcionamento do Ajax com dois tipos de retorno diferentes.

Basicamente a estrutura acima possui um script que chama duas funções diferentes ao clicar em dois botões identificados pelo seus ID’s escritos na página HTML. A partir daí escrevi a mesma função de duas formas diferentes utilizando o retorno diferente mas que fazem a mesma coisa. O primeiro botão simplesmente retorna o HTML montado e simplesmente imprime na página enquanto que o segundo retorna o JSON estruturado para tratar e daí então imprimir.

Explicando sucintamente o código, na primeira linha de cada função ele pega o valor do input digitado no texto e a partir daí seta os parâmetros para a requisição Ajax, no qual se colocam os parâmetros de método (GET/POST), a url a ser chamada (No nosso caso o arquivo PHP funcao.php), as variáveis que utilizarei na minha função pelos métodos GET e/ou POST, o tipo de retorno (HTML / JSON) e o retorno em caso de erro ou sucesso.

No retorno do tipo HTML simplesmente insiro o que criei na minha função PHP na div de ID retorno enquanto que no retorno do tipo JSON eu faço um contador que percorre meu JSON e grava cada índice na variável conteúdo e depois imprime tudo.

Agora o nosso arquivo PHP fica assim:
 

PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php 
	if($_GET['funcao']=='html') {
		funcaoAjaxHtml($_GET['valor']);	
	} elseif($_GET['funcao']=='json') {
		funcaoAjaxJson($_GET['valor']);	
	}
 
	//função pega o número de parágrafos desejados e adiciona à página por html.
	function funcaoAjaxHtml($numero) {
		$html = "";
		for($i=1;$i<=$numero;$i++) {
			$html .="<p id='paragrafo_".$i."' class='texto'>Este é o parágrafo ".$i." gerado via Ajax para testar o retorno <b>HTML</b>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel nibh sapien. Nullam blandit arcu sit amet lectus molestie posuere. Nulla varius augue a sem egestas, congue lobortis augue euismod. </p>";
		}
 
		echo $html; // com o echo, o valor da variável é o retorno da minha função ajax do tipo HTML.
	}
 
	//função pega o número de parágrafos desejados e adiciona à página por json.
	function funcaoAjaxJson($numero) {
		$paragrafos = array();
		for($i=1;$i<=$numero;$i++) {
			array_push($paragrafos,"<p id='paragrafo_".$i."' class='texto'>Este é o parágrafo ".$i." gerado via Ajax para testar o retorno com <b>JSON</b>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel nibh sapien. Nullam blandit arcu sit amet lectus molestie posuere. Nulla varius augue a sem egestas, congue lobortis augue euismod. </p>");
		}
 
		echo json_encode($paragrafos); // utilizo o echo para retornar meu array, porém em formato json.
	}
?>

O arquivo PHP possui basicamente uma verificação para identificar qual função chamar de acordo com os parâmetros que enviei no meu ajax. As duas funções criadas em PHP fazem a mesma coisa, geram o número de parágrafos conforme digitado pelo usuário na tela. A diferença é que um incrementa numa variável $html que será impressa (retorno HTML) e a outra insere num vetor cada parágrafo gerado e depois transforma em JSON e imprime. Vale lembrar que o ‘echo’ utilizado no código é o retorno da requisição Ajax realizada.

Bom, basicamente é isso. Qual a melhor utilizar? Depende do que precisa, o que eu sugiro é utilizar o JSON quando retornar uma lista de usuários para imprimir numa tabela por exemplo, enquanto que o retorno HTML pode ser utilizado para devolver um cálculo ou algo assim. Espero que ajude. Qualquer coisa estou à disposição!

Até a próxima!

mar 14, 2016 0

Homepages diferentes para Usuários Logados e Não Logados

Olá, recentemente precisei trabalhar em uma rede social com WordPress e BuddyPress e precisei fazer muitas customizações e alterações no fonte. Uma delas que vi que seria importante compartilhar era setar uma página inicial diferente para quando o usuário estivesse logado ou não. Para isso, nenhum plugin me ajudou, embora existam plugins como o Peter’s Login que redirecionam após o login para uma página específica. Mas eu queria que a homepage mesmo já fosse uma diferente quando, por exemplo, o usuário escolhe por permanecer registrado. Eu vi várias formas de fazer isso, mas a maioria causava eu loop de redirecionamentos e então a melhor maneira que encontrei foi a seguinte:

 

1
2
3
4
5
6
7
 
<?php 
    if (is_front_page() && is_user_logged_in()) {        wp_redirect ( home_url("/pagina-desejada") );
        exit;
    }
?>

 
Este trecho de código foi adicionado no início do arquivo index.php no diretório do meu tema (localizado em /wp-content/themas/<seu-tema>).
 
Você pode alterar este arquivo de duas formas: Alterando via FTP acessando com seu usuário e senha e navegando até o diretório (Geralmente a raíz do site fica dentro de um diretório chamado public_html ou httpdocs. Dessa forma, a partir deste diretório, você encontrará o diretório citado acima).
 
A segunda forma de alterar é diretamente pelo admin do WordPress. Acessando o painel de administração naquele link wp-admin, você terá do lado esquerdo um menu chamado:
“Aparência”->”Editor”
 
Seleção_117
 
Ao clicar no menu, você se deparará com uma tela como a mostrada abaixo. Na caixa de seleção no topo estará seu tema selecionado, e logo a baixo uma lista de arquivos. Clique no arquivo “Modelo de Página Principal” (Logo abaixo do nome estará escrito index.php, certifique-se de que é o arquivo correto.
Espero que ajude, eu demorei para encontrar uma solução, achei esta simples, mesmo que não seja a “melhor solução do mundo”.
 
Seleção_118
 
Clicando no arquivo, basta inserir o código acima na primeira linha do arquivo e estará funcionando.
  
Deixem dúvidas, sugestões e até ajustes nos comentários abaixo. Até a próxima!
 
Gustavo

mar 01, 2016 0

Instalando e configurando Homestead

Eu tive um problema quando comecei a usar o Laravel nos hrefs e src da pasta public quando criava uma rota como Usuarios/create em ambiente localhost. Inicialmente eu utilizava o Laravel diretamente com apache fazendo com que a aplicação pudesse ser vista no navegador como localhost/<meu-projeto>/public. Em rotas e views com apenas um nível, não havia problema algum, eu apontava no href e no src normalmente. Quando me deparei com uma rota como a citada acima, os apontamentos saíam todos errados pois era como se o diretório base tivesse mudado (Ex no caso de Usuarios/create, eu deveria apontar o que estava em imagens dentro de public da seguinte maneira: ../imagens ao invés de somente imagens). O problema de fazer isso, é que para cada nível eu precisaria fazer um layout no blade diferente e isso geraria um trabalho maior. Foi então que resolvi usar o Homestead.

A documentação do Laravel me ajudou muito a instalar e configurar, mas algumas coisas não estavam totalmente escritas e por isso resolvi criar este post. Segue a documentação para o Homestead:

https://laravel.com/docs/5.1/homestead

Obs: Eu utilizo Linux como sistema operacional para desenvolvimento. Vamos lá, passo a passo:

1º Instalar VirtualBox e Vagrant

2º Após instalar os dois programas, executar o seguinte comando para adicionar a pasta do laravel ao vagrant

~$ vagrant box add laravel/homestead https://atlas.hashicorp.com/laravel/boxes/homestead

Este comando irá fazer download e é um passo que pode demorar alguns minutos.

3º O próximo passo é configurar as chaves SSH. Para tal, caso não possua a aplicação instalada, pode executar este comando para instalar

~$ sudo apt-get install openssh-client

Caso já possua, basta aplicar o comando a seguir para configurar uma chave

~$ ssh-keygen -t rsa -C “your@email.com”

Ao executar, será pedido o nome do arquivo e configuração de senha. Aqui é onde tive problema, eu preciso mover o arquivo id_rsa e id_rsa.pub do diretório pessoal /Home/<seu-diretorio-inicial>/ para o diretório  ~/.ssh . Enquanto eu não fiz isso, minha máquina virtual não funcionou.

4º A documentação do Laravel mostra duas formas de configurar o Homestead, sendo uma de forma global e outra dentro do projeto. Eu tentei instalar do primeiro modo, mas tive muitas dificuldades, então acabei optando pela segunda opção, até porque no arquivo Homestead.yaml eu tive que configurar a pasta do projeto. Dessa forma, executei o seguinte comando dentro da pasta do projeto contendo Laravel

~$ composer require laravel/homestead –dev

Este comando instalará o Homestead dentro de seu projeto, com isso, precisamos gerar os arquivos Vagrantfile e Homestead.yaml. Para isso, executamos o seguinte comando:

~$ php vendor/bin/homestead make

5º Precisamos agora configurar o arquivo Homestead.yaml com nossos parâmetros locais. O arquivo conterá estas linhas que devem ser alteradas de acordo suas informações locais (Arquivo criado no diretório raíz de seu projeto).



ip: “192.168.10.10”  -> IP Local para acessá-lo
memory: 2048
cpus: 1
provider: virtualbox

authorize: ~/.ssh/id_rsa.pub  ->Local onde está o arquivo pub (expliquei para colocá-lo na pasta ~/.ssh

keys:
– ~/.ssh/id_rsa ->Local onde está o arquivo pub (expliquei para colocá-lo na pasta ~/.ssh

folders:
– map: ~/Code ->Diretório de seu projeto
to: /home/vagrant/Code

sites:
– map: homestead.app
to: /home/vagrant/Code/Laravel/public ->Diretório de seu projeto / public


Uma informação importante neste passo é que o IP informado no arquivo acima deve ser também incluído no arquivo /etc/hosts da seguinte maneira:

192.168.10.10  homestead.app

6º O último passo é só para subir a máquina virtual com o comando abaixo que fará com que o endereço http://homestead.app esteja disponível com a aplicação.

~$ vagrant up

 

Bom, basicamente é isso, todas as dificuldades que eu tive estão resumidas sob a tentativa de minimizar os erros. Se tiverem alguma dúvida ou correção, enfim, podem entrar em contato.

Até mais


 

fev 18, 2016 0

Erro “fatal: The remote end hung up unexpectedly”

Olá pessoal, este erro aconteceu comigo ao comitar uma branch com o comando

$ git push

EU não soube muito bem o que fazer, até que procurando na internet, vi que estava relacionado ao tamanho de arquivo enviado pois alguns servidores proxys não suportam a codificação “Transfer-Encoding: chuncked” usado pelo git em requisições POST quando o pacote enviando contém algum arquivo com mais de 1MB de tamanho. Gerando o erro abaixo:

Counting objects: 2332669, done.
Delta compression using up to 16 threads.
Compressing objects: 100% (360818/360818), done.
error: RPC failed; result=22, HTTP code = 411
fatal: The remote end hung up unexpectedly
Writing objects: 100% (2332669/2332669), 483.30 MiB | 114.26 MiB/s, done.
Total 2332669 (delta 1949888), reused 2330461 (delta 1949349)
fatal: The remote end hung up unexpectedly

Para resolver este problema é relativamente simples. Basta aumentar o tamanho máximo de envio de cada arquivo com o comando:

$ git config –global http.postBuffer 157286400

 

Problema resolvido!

Dúvidas, sugestões, enfim, deixem nos comentários. Valeu!

fev 16, 2016 0

Princípios de HTML

O HTML ou HyperText Markup Language é uma linguagem de marcação extremamente utilizada, ainda mais com o crescimento do desenvolvimento de sistemas onlines, websites e aplicativos mobile. Além do HTML, estão presentes num sistema online ou website o JavaScript e o CSS, além do Ajax e JQuery que complementam e resultam em toda interatividade na página. Para entender melhor o conceito de uma página web e como cada uma dessas tecnologias se conversam fazendo uma comparação ao corpo humano. Dessa forma:

HTML -> Ossos e articulações. O HTML contém toda a estrutura da página que diz o que é o quê desde às mais antigas e primitivas como listas, links, tabelas, parágrafos, etc até os mais recentes como cabeçalho, menu, rodapé, seção e etc.

CSS -> Roupas e acessórios. O CSS é responsável pelo estilo da página, cores, tamanhos, transformações, efeitos e etc, tudo que personaliza uma estrutura é de função do CSS. Para conhecer mais sobre CSS, visite a categoria de CSS.

JavaScript -> Movimentos e dinâmica do corpo. O Javascript é responsável por interações na página sem conversar com o servidor, ele pode criar inúmeras dinâmicas de páginas, e pode ter funções completas sem precisar recarregar a página e, pelo contrário, ele perde toda alteração feita ao recarregar uma página. O desenvolvimento desta tecnologia, surgiu o Ajax, que tornou possível a comunicação com o lado servidor sem precisar recarregar uma página que se tornou muito útil, pois consultas podem ser feitas dinamicamente, tornando o carregamento da página mais rápido. Para saber mais de Javascript, clique aqui e para saber mais de Ajax, clique aqui.

Após este pequeno resumo, vamos focar apenas no HTML neste post. Ele funciona por meio de tags que o identificam e que formam sua estrutura. Toda página possui um cabeçalho () e um corpo () no qual o cabeçalho contem informações sobre links, CSS, Javascripts, Palavras-chaves, nome da página, Codificação e etc, enquanto que no corpo ficam todas as informações que o navegador irá mostrar ao usuário.

O nosso primeiro exemplo mostra uma página que dei o nome de “Iniciando com HTML – ex 1” e que simplesmente coloco um título e um parágrafo com um pequeno texto.

1
2
3
4
5
6
7
8
9
<html>
    <head>
        <title>Iniciando com HTML - ex 1</title>
    </head>
    <body>
        <h1>Hello World!!!</h1>
        <p>Esta é minha primeira página utilizando HTML, meu primeiro parágrafo simples.</p>
    </body>
</html>

Copie este código, cole num arquivo texto simples e o salve como ex1.html. Em seguida, abre-o em um navegador de sua escolha.

Algumas observações são importantes: nota-se que para toda tag que eu “abro”, uma tag de fechamento é necessário e esta tag possui “</>” enquanto que a abertura possui apenas “<>”. Além disso, não há nenhuma personalização nos textos escritos como fonte, cor e tamanho a não ser das características de tags que utilizei. Este é o exemplo mais simples no qual espero que tenha entendido a simplicidade do HTML. A seguir, escreverei as tags mais importantes e comuns numa página:

  1.  <p> -> Parágrafo de um texto
  2. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    <html>
        <head>
            <title>Iniciando com HTML - Parágrafos</title>
        </head>
        <body>
            <h1>Trabalhando com parágrafos</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam magna dolor, vulputate sed elementum at, posuere ut dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae cursus odio. Aliquam hendrerit malesuada lorem, non blandit magna sollicitudin et. Maecenas vestibulum diam nec tempus ultricies. Phasellus nec metus vestibulum, facilisis mauris eleifend, bibendum nunc. Cras aliquam, turpis ut luctus dictum, felis mi faucibus odio, ac placerat ante elit in nunc. Vestibulum et arcu scelerisque odio tincidunt imperdiet at non elit. Duis maximus condimentum pulvinar. Fusce interdum dictum arcu, quis tristique felis ullamcorper nec. Mauris lectus lectus, viverra quis vehicula non, consectetur sit amet tortor. Suspendisse ultricies quam augue, vel lobortis ligula congue a. Mauris quis placerat velit, non aliquet ligula. Nam at risus vitae augue venenatis eleifend.</p>
     
    <p>Sed tincidunt massa ac velit commodo, ut condimentum neque tempus. Integer rutrum diam vitae enim facilisis, vel molestie turpis bibendum. Cras viverra suscipit commodo. Vestibulum posuere consequat nisl pretium aliquet. Fusce convallis magna non magna consequat vulputate. Praesent scelerisque finibus ipsum quis dictum. Aliquam accumsan eros metus, eu aliquam sapien imperdiet in.</p>
        </body>
    </html>
  3. <h1>, <h2>, <h3>, <h4>, <h5>  e <h6>  -> Definem títulos de um texto e possuem diferentes tamanhos e semânticas, sendo <h1> o maior e o <h6> o menor, como mostrado abaixo.
  4. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
    <html>
        <head>
            <title>Iniciando com HTML - Headers</title>
        </head>
        <body>
            <h1>Cabeçalho 1</h1>
            <h2>Cabeçalho 2</h2>
            <h3>Cabeçalho 3</h3>
            <h4>Cabeçalho 4</h4>
            <h5>Cabeçalho 5</h5>
            <h6>Cabeçalho 6</h6>
        </body>
    </html>
  5. <a> -> Utilizado para links. Acompanha atributos que definem o destino do link e a forma de abertura sendo o href e o target. São utilizados da seguinte maneira.
  6. 1
    2
    3
    4
    5
    6
    7
    8
    9
    
    <html>
        <head>
            <title>Iniciando com HTML - Links</title>
        </head>
        <body>
            <a href="http://www.google.com">Este é um link normal direcionando para o google</a><Br />
            <a href="http://www.google.com" target="_blank">Este é um link normal direcionando para o google abrindo em outra aba</a>
         </body>
    </html>
  7.  <table>, <tr> e <td> -> Estas tags se referem à tabelas, sendo table a tabela em si, tr cada linha e td cada coluna. Veja um exemplo de como são construídas as tabelas.
  8. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    <html>
        <head>
            <title>Iniciando com HTML - Tables</title>
        </head>
        <body>
            <table border="1">
                <tr>
                   <td> Esta é a primeira coluna da primeira linha</td>
                   <td> Esta é a segunda coluna da primeira linha</td>
                </tr>
                <tr>
                   <td> Esta é a primeira coluna da segunda linha</td>
                   <td> Esta é a segunda coluna da segunda linha</td>
                </tr>
            </table>
         </body>
    </html>
  9.  <ul> e <li> -> Estas tags se referem à listas, sendo ul a lista em si e li cada item da lista. Veja um exemplo de como são construídas as listas.
  10. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    <html>
        <head>
            <title>Iniciando com HTML - Listas</title>
        </head>
        <body>
            <ul>
                <li> Esta é o primeira item da lista</li>
                <li> Esta é o segundo item da lista</li>
            </ul>
         </body>
    </html>
  11.  <img> -> Esta é a tag para inserir imagens na página. Ao utilizar esta tag, é necessário utilizar o atributo src que contém o endereço da imagem que pode ser absoluto (http://) ou relativo (de acordo com a localização da página atual). Além disso, é muito comum utilizar os atributos alt e title para inserir informações da imagem. Exemplo
  12. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    <html>
        <head>http://gustavofrancisco.com.br/wp-admin/tools.php
            <title>Iniciando com HTML - Imagens</title>
        </head>
        <body>
            <img src="http://moodle.clip.pt/pluginfile.php/5059/coursecat/description/IT.jpg" alt="Este é o alt da imagem" title="Este é o title da imagem - Caminho absoluto" /> 
            <img src="img/img_exemplo.jpg" alt="Este é o alt da imagem" title="Este é o title da imagem - Caminho relativo" /> 
     
         </body>
    </html>
  13.  <div> -> Esta é, na minha opinião, uma das tags mais importantes. Ela é utilizada para iniciar um bloco qualquer. Ela não possui uma visualização direta, mas é extremamente importante no momento de criar uma página para definir caixas e as personalizá-las com as cores, posicionamento e etc. Veja um exemplo da importância das divs, e para melhor ilustrar, inseri uma pequena informação do CSS.
  14. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    
    <html>
        <head>http://gustavofrancisco.com.br/wp-admin/tools.php
            <title>Iniciando com HTML - DIVs</title>
        </head>
        <body>
            <div style="float: left; border: 1px solid #ccc; background: #f0f0f0; width: 40%">
                <h1> Este é o título da div 1</h1>
                <p> Aqui eu insiro um texto da div 1 informando qualquer coisa. Para explicar o CSS brevemente, por exemplo, o float: left significa que deixarei ela flutuando à esquerda, o border inserindo uma borda de 1px contínua na cor cinza, o background informando uma cor cinza clara no fundo e width 40% informando que minha div terá 40% do tamanho da tela</p>
            </div>
            <div style="float: right; border: 1px dotted #333;width: 40%">
                <h2> Este é o título da div 2</h2>
                <p> Aqui eu insiro um texto da div 2 informando qualquer coisa. Para explicar o CSS brevemente, por exemplo, o float: right significa que deixarei ela flutuando à direita, o border inserindo uma borda de 1px pontilhada na cor cinza e width 40% informando que minha div terá 40% do tamanho da tela</p>
            </div>
         </body>
    </html>

Acredito que estas sejam as tags mais importantes e utilizadas na criação de páginas. Espero que tenha entendido o raciocínio de como funciona o HTML e que consiga utilizar tudo que passei alinhando sua criatividade, testando as tags dentro de outras e conferindo o resultado. Gosto de dizer que qualquer página pode ser construída de diversas formas, sabendo combinar os elementos e o CSS é possível construir qualquer coisa.

Baixe o conteúdo do código escrito neste post contendo todos os exemplo clicando aqui.

O que não pode perder

Até mais, espero ter ajudado!

fev 01, 2016 0

Apresentação

Olá a todos, este é o primeiro artigo do blog que pretendo escrever para ajudar todos os desenvolvedores com problemas que eu tive que enfrentar, muitos deles inclusive tive que pensar numa solução contando com pouca ajuda na web.

Gostaria de registrar que não sou nem nunca serei o dono da razão, posso postar alguma solução que não seja ideal ou dar uma opinião que transmita falta de confiança Caso isso aconteça, será um prazer que compartilhe comigo em prol do conhecimento universal e caso discorde de alguma coisa que ler por aqui, podemos promover uma discussão saudável.

Espero que curtam e que seja proveitoso para todos nós