Skip to content

Instantly share code, notes, and snippets.

View profburnes's full-sized avatar

Prof. Anderson Burnes profburnes

View GitHub Profile
@profburnes
profburnes / htaccess
Created September 27, 2017 13:11
Exemplo simples de .htaccess para URL Amigáveis
RewriteEngine on
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteRule ^(.*)$ index.php?param=$1
@profburnes
profburnes / formatar_valores.js
Created July 22, 2017 11:17
Formatar Valores com JS
//forma simples de formatar valores
function formatar(valor) {
valor = valor.replace(".","");
return parseFloat(valor.replace(",","."));
}
@profburnes
profburnes / cache.manifest
Created July 21, 2017 04:36
manifest.json
CACHE MANIFEST
js/jquery-3.2.1.min.js
js/materialize.js
@profburnes
profburnes / sw.js
Created July 21, 2017 04:34
Service Worker
//nome do cache
var cacheName = 'akiexpress';
//arquivos a serem cacheados
var filesToCache = [
"index.html",
"categoria.html",
"carrinho.html",
"produto.html",
"imgs/logo.png",
@profburnes
profburnes / criando_menu_resposivo_sem_javascript.md
Last active May 6, 2023 23:39
Criando Menu Responsivo sem Javascript

Criando um Menu Responsivo sem Javascript

Criar menus responsivos com CSS 3 JavaScrit não é uma tarefa difícil, ainda mais se voc utilizar o jQuery. Mas e se voc não tiver conhecimentos em JavaScript? Vou ensinar um meio básico e simples de fazer um menu responsivo sem a ajuda de JS, utilizando apenas CSS e HTML. O Menu não ficará aquelas coisas, lindo, porém ficará funcional e se você possui conhecimentos em CSS poderá adicionar formatação e até animações ao mesmo.

O HTML

Vou criar um menu com listas em um elemento nav para começar, a formatação fica por sua conta, aqui vai uma bem simples, acompanhando o exemplo. Utilizei o Font-Awesome para utilizar o ícone do menu responsivo. Vamos ao HEAD:

<!DOCTYPE html>

Começando com Media Queries

Antigamente existiam somente computadores Desktop e Notebooks com resoluções parecidas, 60x480, 800x600, 1024x600 e assim por diante. Com o tempo foram surgindo placas de vídeo melhores, monitores de diversos tamanhos e os sites começaram a ficar estranhos e mal acomodados em diversas resoluções.

Nos últimos 10 anos, os Smartphones e Tablets foram popularizados, trazendo diversos dispositivos com incontáveis resoluções de tela, menores que as telas dos computadores Desktop. Outros dispositivos como TVs e Projetores também começaram a fazer parte de uma extensa lista de dispositivos.

Para isso, o HTML trouxe os Media Types que definiam para qual dispositivo um CSS seria aplicado. Com este é possível definir por exemplo, um CSS somente para impressão, onde podemos retirar imagens de fundo e cores fortes para que o usuário possa realizar uma impressão gastando menos tinta ou deixando a impressão mais legível.

Um outro Media Type aplicaria um CSS a TVs, ou Projetor ou um Handheld

@profburnes
profburnes / Comecando_com_CSS.md
Last active September 19, 2022 20:32
Instrodução ao CSS

Começando a Trabalhar com CSS3

O CSS (Cascading Style Sheets) é uma linguagem para formatação de páginas HTML e outras linguagens de marcação. Com ela podemos definir tamanhos, cores, fontes e outros relacionados a apresentação desses documentos ao usuário. A versão 3 do CSS ainda possui suporte a sombras, efeitos de transição, animações, que podem deixar o site mais apresentável, sem a necessidade de flash ou outross artifcios.

Básico - Formatando as Tags

Vamos tomar como exemplo o código abaixo:

<!DOCTYPE html>
<html>
<head>
  <title>Página com CSS</title>
  <meta charset="utf-8">
@profburnes
profburnes / Criacao_e_Registro_de_Sidebars.md
Last active April 7, 2017 14:26
Como criar e registrar sidebars no Worpress

Criação e Registro de Sidebars

Os sidebars servem para adicionar locais onde poder ser inseridos widgets no seu tema, como barra de buscas, postagens, menus e outros. Para fazer isso é necessário registrar no functions.php os sidebars necessários. Podemos registrar diversos sidebars e distribuí-los no tema. Abra o arquivo functions.php e mãos a obra:

//verificar se a função existe para não dar erro
if (function_exists('register_sidebar')) {
    register_sidebar(
 array(
@profburnes
profburnes / Estruturas_HTML5.md
Last active April 12, 2024 14:09
Estrutura e Tags Básicas do HTML 5

Estruturas e Tags Básicas do HTML5

O HTML5 é a nova versão padrão do HTML com novas Tags e APIs capazes de inserir facilmente um arquivo de audio ou vídeo em um site. Basicamente o HTML seria o esqueleto do seu site, que deverá ser formatado (ou vestido) utilizando a linguagem CSS (Cascading Style Sheet).

Estrutura Básica

A estrutura básica do HTML5 é parecida as estrutra do XHTML e do HTML 4, contendo elementos HEAD e BODY.

<!DOCTYPE html>
@profburnes
profburnes / Sintaxes_Alternativas.md
Last active April 3, 2017 13:52
Formas abreviadas / Sintaxes alternativas

Formas Abrevidas / Sintaxes Alternativas do PHP

Para algumas estruturas de repetição e de controle pode-se utilizar no PHP uma sintaxe alternativa, trocando as chaves por dois pontos (:) e o fechamento realizado com um end (endif, endwhile, endfor, etc)

Exemplo de IF e ELSE:

<?php
  $idade = 18;
  if ( $idade >= 18 ) : echo "Maior que 18"; else : echo "Menor de idade"; endif; 
?>