Elementos de design com canva.com

A dica desta semana é o site http://www.canva.com, uma excelente ferramenta para construção de banners, ebooks, elementos de design, anúncios e muito mais.



Criando uma conta gratuita você terá acesso a milhares de elementos visuais prontos para serem editados e usados.

A ferramenta possibilita o trabalho em grupo até 10 pessoas sem custo algum. A principal vantagem está na estruturação dos elementos e nas imagens que em sua maioria são de extrema qualidade.

A edição é muito simples e fácil, além de rápida. Algumas imagens são restritas e para remover as marcas d'agua, será necessário pagar. O custo é baixo dependendo do uso e quantidades de vezes que foi utilizada.

São diversos modelos prontos que podem ser salvos em PNG, PDF, JPG e outros formatos dependendo do tipo de arquivo que está sendo gerado.

Além de poder utilizar o banco de imagens e elementos do próprio canva, é possível fazer o upload dos seus próprios arquivos.



Já o Canva for work custa 12,95 dólares por mês por usuário, custo relativamente baixo se considerarmos todo o potencial da ferramenta, principalmente para agências de publicidade.

Leia Mais

Webcast Introdução ao Sql Server #1

Neste webcast estaremos trabalhando com conceitos básicos para manipulação de dados utilizando o banco de dados Sql Server 2016 através do uso da ferramenta SQL Management Studio.

Para instalar o SQL Server e o Management Studio, veja este Post.

Duração: 45 minutos + 15 para perguntas e respostas.
Público Alvo: Estudantes de Banco de dados e interessados em aprender a trabalhar com SQL Server.
Data:  24/08 às 14hs.
Local: Canal Youtube, neste post e canal Facebook.



Tópicos:
- Estrutura do software SQL  Management Studio
- Criação e seleção de databases
- Criação de tabelas com chaves primárias e estrangeiras
- Inserção e seleção de dados
- Criação de views no SQL Server

créditos: freepik 

Leia Mais

Imagem de Background responsiva

Um ótimo exemplo de mudança de imagem de fundo de acordo com a resolução da tela, é o site da starbucks.com.br.

Com a tela maximizada, a imagem de fundo fica assim:

Quando diminuímos a resolução da tela, para o tamanho de um smartphone, a imagem é alterada, ficando igual a imagem ao lado.E como é realizado este efeito de troca de imagens, utilizando apenas CSS?


Primeiro vamos colocar a imagem de fundo como background que funcionará para a tela reduzida.

 

body {

    background-repeat: no-repeat;

    background-image: url('flor.jpg');
}  

Agora só precisamos definir o tamanho mínimo que será aplicado como fundo, usando o @media only screen and( min-width:500px). Isto definirá que as telas com resolução maiores que 500px assumirão as propriedades dentro do @media, conforme o exemplo abaixo:

 

/* Para resolução maior que 500px: */



@media only screen and (min-width: 500px) {

    body {

       background-image: url('flores.jpg');

    }

}

Lembrando que estes códigos deverão estar dentro das tags style ou do arquivo css do seu site.

Leia Mais

Variáveis no PHP

Um dos princípios básicos na programação é compreender o conceito de variáveis, vetores e matrizes. Neste post demonstrarei na prática para que serve, como acessamos e como utilizamos as variáveis em PHP.

De início, podemos dizer que as variáveis são repositórios que podem ser armazenados diversos tipos de dados. Como exemplo, para armazenar o nome de uma pessoa de uma forma que possamos ler posteriormente, precisaremos utilizar uma variável. Uma das vantagens do PHP é a criação de variáveis ondemand, isto é, criar uma variável na execução do código sem a necessidade de fazer a sua declaração.

Vamos criar uma variável no PHP chama de $nome, carregar um nome para dentro dela e depois imprimir na tela.

 <?php   
   $nome = 'Arthur';  
   echo $nome;  
 ?>  
 Será impresso no navegador  
 Arthur  

Como podemos ver, a criação da variável é simples, basta utilizar o simbolo de cifrão na frente de uma palavra, porém, devemos tomar cuidado com algumas regras para criação de variáveis:

- Não iniciar variável com números ou caracteres especiais;
- Algumas variáveis são restritas ao PHP, como $_GET, $_POST, $_SESSION, $_COOKIES;

Leia Mais

40 Menus responsivos com tutoriais.

Criar um menu responsivo do zero pode ser frustrante e trabalhoso, principalmente quando precisamos aplicar diversas características no CSS para que fique exatamente com os efeitos que desejamos.





No link abaixo podemos conferir 40 menus responsivos, além de acompanhar com tutorias a construção deles. Vale a pena conferir.

https://www.freshdesignweb.com/useful-responsive-menu-navigation-tutorials/

Leia Mais

Webcast - App Finanças Pessoais - Parte 1

Webcast -  App Finanças Pessoais - Parte 1

 Neste webcast criaremos um aplicativo financeiro simples, para controle de finanças pessoal, com o objetivo de demonstrar as principais funcionalidades da linguagem de programação PHP,  assim como demonstrar algumas técnicas e dicas de como podemos integrar o PHP com um layout em html.

A primeira parte deste webcast será destinada a criação das telas de login e senha, estrutura das pastas, criação das tabelas em um database MySQL, conexões com o banco de dados, comunicação dos formulários html com a linguagem PHP e validação de acesso através de sessões.

A segunda parte, que será transmitida posteriormente, abrangerá as telas de listagem de dados, edição e exclusão e geração de relatórios.

Os requisitos mínimos para acompanhar este webcast é:

1 - Ter instalado algum servidor web, como por exemplo o USBWebserver - (instalação do usbwebserver);

2 - Ter noções de html/css/javascript ; Template a ser baixado aqui.

     Tabelas, código sql para criação e arquivo do MySQLworkbench baixe aqui.

3 - Ter conhecimento básico em PHP (variáveis, array, if, else, while, POST, GET, foreach)

4 - Compreender sessão em PHP(session_start, session_destroy, $_SESSION['indice'])

5 - Ter noções sobre MySQL, tabelas e comandos básicos de inserção de dados.

6 - Ter muita vontade de aprender, saber errar, repetir e repetir diversas vezes e pesquisar.

Usaremos também um sistema simples de autenticação similar ao descrito neste link

Os aplicativos utilizados são:

1 - Servidor Web USBWebServer (apache, php, mysql, phpmyadmin)

2 - MySQL Workbench (modelagem das tabelas)

3-  Navegador web

4 - Notepad ++ (edição dos arquivos html e php)

Data: 17/08/2016 das 14hs às 16hs.

Mais informações estarão sendo atualizadas neste post, em nossa página do facebook  e em nosso canal no youtube.

Leia Mais

Validação de Página HTML - W3C

Nesta dica da semana, vou comentar um pouco sobre o site https://validator.w3.org/ que faz a validação de erros em um site.

Em primeiro lugar, a validação completa de um site pode ser benéfica em diversos pontos, como por exemplo, verificarmos se falta algum parâmetro de css, se alguma tag não foi finalizada ou ainda, deixarmos o nosso site mais leve para que carregue de forma mais rápida e padronizada.

Como podemos ver, apenas em nosso site temos mais de  197 Errors, 163 warning(s) que podem ser verificados na página abaixo.

Vale ressaltar que nem todos esses erros e warnings afetam a nossa página, porém se o objetivo é criar um site seguindo a risca os padrões da web, ele serve como uma ótima ferramenta de validação.

Leia Mais

Menu Fixo CSS3 - Dica #3

Uma dica interessante para colocarmos em nossos sistemas e sites é a de manter o topo do site fixo, mantendo sempre as principais opções do menu visíveis ao usuário do site ou sistema.

A forma mais fácil de fixar o menu é através do CSS3. Neste post vamos ver quais são as principais propriedades que devem ser configuradas para que o menu esteja sempre visível na página.


Primeiro vamos ver como ficará o nosso menu:




Podemos ver que o texto gera uma barra de rolagem. Ao descermos a barra de rolagem, o menu continuará fixo conforme podemos ver na imagem abaixo:




Neste exemplo (código fonte será disponibilizado mais abaixo) utilizamos apenas uma listagem <ul> e <li> para configurar o nosso menu, conforme detalhamos abaixo:





Agora basta colocarmos o código do menu deixará o menu fixo na parte superior.




A div class=lipsum contem todo o restante do site. Desta forma quando descermos a barra de rolagem, esta div
será colocada abaixo do menu, mantendo-o fixo na parte superior.

Podemos colocar apenas o menu ou um topo inteiro fixo, inclusive na parte inferior, de acordo com a necessidade
do nosso site.


O arquivo para baixar encontra-se neste link.

Leia Mais

Formatação de campo (mascara) com jQuery.

Uma das formas mais fáceis e práticas de definirmos uma formatação em um campo input, a máscara, é utilizarmos uma biblioteca javascript que faça este trabalho para nós.

 E como já existem diversas bibliotecas prontas para isto, vamos utilizar a Masked JQuery Input.

1.  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
2.     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
3.     <SCRIPT language="javascript">
4.      $(document).ready(function () {
5.      $('#dia').mask('99/99/9999');
6.      $('#cep').mask('99999-999');
9.         return false;
10.     });
11.     </SCRIPT>
12. <form >
13. <input type=text id="dia">
14. <input type=text id="cep">
16. </form>

Neste exemplo nós primeiramente incluímos a biblioteca jquery e a jquery.masked input, que fará a formatação dos campos.

A máscara funcionará obedecendo as seguintes regras:

• a – Representa um caractere alfabético (A-Z, a-z)
• 9 – Representa um carácter numérico (0-9)
• * – Representa um caractere alfanumérico (A-Z, a-z ,0-9)

Lembrando que devemos sempre colocar um id no campo para que seja validado. A formatação ficará assim:

// <input type="text" id="telefone" name="telefone">

$("#telefone").mask("(99) 99999-9999");










Leia Mais

Criando views no Sql Server Básico.

Porquê criar uma view?

Uma view nada mais é do que uma tabela virtual pré-definida para que seja acessada por outro usuário ou sistema dentro do nosso banco de dados.

O principal objetivo de criar uma view é limitar o acesso a um database ou mesmo a uma tabela, pois não podemos inserir, alterar ou excluir dados dentro da view. Será possível apenas selecionar os dados da view.

Neste tutorial utilizaremos como exemplo uma tabela simples que armazena dados pessoais.

Modelo referente a tabela pessoa.

Tabela a ser criada.

Vamos supor que um gerente do departamento de marketing de uma empresa necessite que sua equipe acesse constantemente o nome e telefone dos clientes, porém ele não terá permissões para visualizar os demais dados cadastrais ou alterá-los.

A equipe de desenvolvimento não tem disponibilidade para desenvolver um novo módulo dentro do sistema da empresa, portanto precisa criar de uma forma rápida um relatório para que seja acessado pela equipe de marketing.

É aqui que entra a view, a equipe de desenvolvimento criará uma view com os dados necessários para equipe de marketing e dará acesso a apenas esta view, sem comprometer o acesso aos demais dados da empresa. 

Antes de mais nada, vamos criar a nossa tabela no Sql Server Express. Caso você não tenha ainda instalado o sql server, veja este Post de como instalar o sql server express.

Para criar a nossa tabela, usaremos o seguinte código sql:

create table pessoa(
  idpessoa int primary key identity,
  pessoa varchar(45) not null,
  telefone varchar(45),
  email varchar(145),
  cidade varchar(45),
  estado char(2),
  nascimento date,
  cpf char(11)
)

Vamos popular a nossa tabela, inserindo algumas pessoas na tabela.

insert into pessoa values('João','3333-4444','joao@joao.com','São José','PR','2001-01-01','11000123456')

insert into pessoa values('Pedro','2255-1144','pedro@pedro.com','Curitiba','PR','2001-03-01','99000123456')

insert into pessoa values('Paulo','1212-4566','paulo@paulo.com','São Paulo','SP','2010-03-01','88000123456')

insert into pessoa values('Maria','3030-4998','maria@maria.com','Curitiba','PR','1976-08-31','77000123456')

Vamos criar a nossa primeira view

O comando para criar uma view é igual ao de criação de qualquer objeto em um banco de dados

create view nomedaview as
select * from tabela

onde nomedaview será o nome que utilizaremos para nossa tabela virtual. Para facilitar a identificação de uma view no banco de dados, podemos incluir o prefixo vw_ antes do nome da view. Neste caso o nome da nossa view seria vw_pessoas.

Após o nome da view sempre incluiremos o as e o código sql que seleciona os dados necessários.

A nossa view ficará da seguinte forma:

create view vw_pessoa as
select nome, telefone from pessoas



Pronto, agora temos o nosso objeto view criado dentro do database. Para verificarmos as views já existentes, podemos utilizar o Object Explorer do sql server. Acesse o database e selecione a opção views (exibições) conforme o exemplo abaixo:



Para executar uma view, basta selecionar os dados utilizando o comando select como é feito em qualquer tabela.

select * from vw_pessoa

Leia Mais

Como colocar um Favicon em uma página

Uma das principais formas de identificarmos uma página na aba de um navegador é através daqueles ícones pequenos ao lado do título da página, os favicons.

Esta forma visual facilita muito na hora de encontrar uma determinada página, além de criar uma identidade única para o nosso site.

O primeiro passo para incluir um ícone no título da nossa página é ter o ícone pronto. Não pode ser simplesmente uma imagem qualquer, ela tem que ter um formato específico e para gerarmos os estas imagens vamos utilizar alguns sites que facilitam a nossa vida.

http://www.favicon-generator.org/

http://realfavicongenerator.net/

Tendo em mãos o arquivo .ico, basta incluir nas tags <head> da sua página o seguinte código:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<link rel="icon" href="favicon.ico" type="image/x-icon">

Leia Mais

Html5 Loaders

Pessoal, neste post vou fazer referencia a outro site, o http://codepen.io e a conta do usuário Jordano Aragão, que disponibiliza vários loaders em html5 e css3, conforme o exemplo abaixo:

Tape loader

Além do Tape loader, no link http://codepen.io/jordanoaragao/ podemos ver diversos outros loaders e elementos, desenvolvidos pelo Jordano, que utilizam apenas HTML5 e CSS3.



Uma boa dica é explorar os códigos do site http://codepen.io para se ter uma idéia melhor do que podemos fazer com HTML5 e CSS3.

Leia Mais

Dicas da semana # 02 - Paleta de cores.

A dica da semana fica com os sites geradores de paletas de cores para uso nos nossos arquivos CSS ou ainda para trabalharmos com um padrão de cores na criação de um layout ou um componente web.

Coolors.co

site coolors.co

O site coolors.co apresenta uma funcionalidade bem bacana que é a de pressionar o backspace do teclado para que ele gere um esquema novo de cores.


Nele podemos mudar a saturação, arrastar as cores de posição, fazer o upload de uma foto para que seja obtido as cores da imagem na paleta, entre diversas outras funcionalidades.

Paletton.com

Site paletton.com

O site Paletton.com é apresentado de forma diferente dos demais, com um disco no qual podemos mudar a paleta de cores movendo os circulos internos. Ele possui diversas formas de gerar as paletas além de salvar em formatos html, css, xml e vários outros.



Um recurso bacana é a pré-visualização, no qual podemos ter uma idéia melhor de como ficará a escolha das cores em um modelo de página web, arte gráfica, ou em uma animação.

 

Color.adobe.com

Outra opção que também oferece uma forma fácil e criativa de se criar uma paleta de cores é o site da adobe.

Além de poder criar uma paleta de cores seguindo regras como monocromática, composto, tríade e outras, é possível explorar diversas paletas prontas na qual já estão definidos padrões de cores formulados.

As ferramentas são similares entre estes sites, o que fica a critério de cada um escolher qual considera mais fácil ou versátil para gerar uma paleta de cores.

Agora você pode se basear em uma paleta de cores quando for criar um novo layout de website ou logomarca e deixar o seu trabalho com mais profissionalismo e qualidade visual.

Leia Mais

Elementos Web Gratuitos toda Segunda Feira

Sempre que precisamos de imagens, vetores e templates para ilustrar o nosso trabalho ou incluir em um site em desenvolvimento nos recorremos a um banco de imagens. O problema maior é que os principais bancos de imagens e elementos web são pagos ou nem sempre encontramos algo de qualidade.

www.creativemarket.com

A dica desta semana é o site Creative Market www.creativemarket.com , que envia por email toda segunda feira, uma lista com 6 ítens de extrema qualidade, para serem baixados e utilizados gratuitamente.

Além de baixar, você pode sincronizar os arquivos direto na conta do dropbox, caso você tenha uma conta.

São imagens, templates para wordpress, fontes, temas para apresentações e diversos outros recursos.

Leia Mais