quinta-feira, 15 de dezembro de 2016

CRIE UM SITE DE CLASSIFICADOS!



Olá pessoal! Tempos atrás alguns alunos me perguntaram como são criados os sites de classificados online, expliquei a eles que dependendo do tipo de produto anunciado é necessário utilizar um CMS para gerenciar melhor o site. Caso você nunca tenha ouvido falar sobre CMS, leia esse post!





O site OSCLASS é um CMS livre e específico para a criação de classificados online. Para acessar o site clique no link: https://osclass.org/


Na pagina de ‘DEMO’ você encontra alguns modelos demostrando todo o poder desse gerenciador. Você pode tanto criar um site de classificados de automóveis ou de trabalho. Veja um exemplo abaixo ou acessando o link: https://demo.osclass.org/general/?theme=repurpose





Ao visitar a página de demostração é possível visualizar o painel de administrador e alterar o tema mudando assim cores e disposição de plugins e menu.


Para ter mais informações sobre como fazer a instalação e criar seu site de classificados basta ficar de olho na documentação que também é disponibilizada no site ou clicando no próximo link: https://doc.osclass.org/Main_Page


É interessante ressaltar que o uso de um gerenciador de conteúdo agiliza muito o processo de desenvolvimento de um site, principalmente aqueles que necessitam de muitos cadastros e categorias. Sem contar que o OSclass já está padronizado a web 2.0 e está se transformando em uma ótima ferramenta. É lógico que não podemos deixar de falar sobre outros sistemas que podem ser mais conhecidos como fazer no próprio WordPress porém vale experimentar, né ? Veja se esse CMS pode te ajudar a criar um ótimo site e ganhar dinheiro com ele! Na próxima trago mais dicas!




quinta-feira, 8 de dezembro de 2016

COMO CRIAR UM SITE RESPONSIVO COM O WEBSITEX5



Olá pessoal! Hoje vou dar uma dica fantástica para a criação de sites responsivos. O WebsiteX5 é um software para criar websites, blogs, lojas virtuais de forma atraente, que podem ser exibidos em computadores, tablets e smartphones.



Basta acessar o site ou clique na imagem abaixo:



site websitex5
Ele possui uma versão teste para avaliação, porém você pode adquirir uma das 3 versões: EVOLUTION, PROFESSIONAL E HOME. 

Os preços você encontra no site.

Ao fazer a instalação, basta seguir os 5 passos. Veja alguns passos de exemplo:









passo1
configurar passo1
passo 3
passo 4Uma ferramenta que pode ajudar na criação de seus projetos. Você precisa conhecer sobre HTML para conseguir entender algumas partes mais complicadas e as demais opções funcionam como se você estivesse em um programa de diagramação de páginas e não em um editor de sites.

Esta é uma dica que pode ajudar muitos desenvolvedores de sites e principalmente quem está iniciando agora.


Até o próximo post!

quinta-feira, 1 de dezembro de 2016

VERIFICADOR DE NOMES!


Fala pessoal! Hoje vamos falar sobre como descobrir em quais redes o nome que você deseja utilizar em seu projeto não está disponível ou está liberado para uso. Seja um domínio ou uma página em redes sociais. Caso você não saiba o que é um domínio pode ter mais informações clicando aqui:
http://blogwebdesignmicrocamp.com.br/seo/entendenda-o-que-e-um-dominio-na-area-de-web/

Variedade de Domínios


Para isso vamos utilizar um site muito interessante que permite que você digite o nome que quer usar e ele irá mostrar em quais redes ele estará disponível e os domínios liberados para esse nome, acesse: https://namechk.com/


Página inicial




É muito simples, basta inserir o nome do seu projeto na barra principal e ele irá começar uma verificação nos domínios liberados e as páginas de redes que estejam com esse nome livre. Vamos experimentar com o nome MICROCAMP.



Domínios e redes disponíveis



Pronto, rapidamente ele apaga as redes que já estão com algo relacionado ao nome pesquisado e ressalta as redes que ainda não tem nada sobre esse termo. Todos nós que estudamos essa área sabemos da importância de ter um nome exclusivo em toda a internet, para isso basta usar essa ferramenta interessante. Na próxima volto mais mais dicas para você que já trabalha com Web Design ou quer se tornar um Web Designer. Até mais!

quinta-feira, 3 de novembro de 2016



Olá pessoal! Tempos atrás alguns alunos me perguntaram como são criados os sites de classificados online, expliquei a eles que dependendo do tipo de produto anunciado é necessário utilizar um CMS para gerenciar melhor o site. Caso você nunca tenha ouvido falar sobre CMS, leia esse post!
logo



O site OSCLASS é um CMS livre e específico para a criação de classificados online. Para acessar o site clique no link: https://osclass.org/
Na pagina de ‘DEMO’ você encontra alguns modelos demostrando todo o poder desse gerenciador. Você pode tanto criar um site de classificados de automóveis ou de trabalho. Veja um exemplo abaixo ou acessando o link: https://demo.osclass.org/general/?theme=repurpose
1


 1



Ao visitar a página de demostração é possível visualizar o painel de administrador e alterar o tema mudando assim cores e disposição de plugins e menu.
Para ter mais informações sobre como fazer a instalação e criar seu site de classificados basta ficar de olho na documentação que também é disponibilizada no site ou clicando no próximo link: https://doc.osclass.org/Main_Page
2
  2


É interessante ressaltar que o uso de um gerenciador de conteúdo agiliza muito o processo de desenvolvimento de um site, principalmente aqueles que necessitam de muitos cadastros e categorias. Sem contar que o OSclass já está padronizado a web 2.0 e está se transformando em uma ótima ferramenta. É lógico que não podemos deixar de falar sobre outros sistemas que podem ser mais conhecidos como fazer no próprio WordPress porém vale experimentar, né ? Veja se esse CMS pode te ajudar a criar um ótimo site e ganhar dinheiro com ele! Na próxima trago mais dicas!

terça-feira, 19 de abril de 2016



Olá! Hoje vamos falar sobre como criar o primeiro arquivo em PHP no XAMPP que é um servidor para criação de suas páginas web em PHP/MYSQL.  O primeiro passo para criar o primeiro arquivo em PHP no XAMPP é verificar se ele está em funcionamento. Para isso basta abrir o seu navegador, no meu caso o Google Chrome e digitar: http://localhost/

Caso apareça uma janela parecida com a minha abaixo, é porque ele não está em funcionamento.
pagina de erro de nao funcionamento do xampp
Vou ativar o seu funcionamento. No Windows 8, na tela inicial, digite XAMPP Control Painel que é o painel de controle do XAMPP.
xampp control painel
Abrirá a janela do XAMPP Control Painel
janela xampp control painel
Clique em todos os botões de Actions e veja que ele mudará para START.
janela xampp control painel  clique em todos os botões de Actions e veja que ele mudará para START.
Abra novamente o seu navegador, no meu caso o Google Chrome e digite novamente:
Ao aparecer esta tela abaixo, significa que o seu XAMPP está em funcionamento.funcionamento do xampp
Por padrão, o XAMPP possui uma pasta onde colocamos os nossos arquivos em PHP, é a:
C:\xampp\htdocs
Porém,  para um trabalho mais organizado, vamos precisar criar uma pasta para colocarmos os arquivos de um site. Vou criar uma pasta chamada MICROCAMP
pasta microcamp criada no xampp
Vou abrir o bloco de notas e digitar os comandos iniciais de UM arquivo em PHP:
comando do php
Agora vou salvar na pasta criada com o nome de TESTE.PHP
arquivo salvo na pasta microcamp do xampp
Para verificar se está funcionando, vou Abrir novamente o se navegador, no meu caso o Google Chrome e digitar:
diretorio criado no xampp
Em seguida vou clicar no arquivo criado, o Teste.PHP
arquivo de teste do php
Está pronta a minha primeira página em PHP.
São vários os comandos utilizados no PHP, basta analisar cada um de acordo com a sua necessidade.

Até o próximo post!
Esse foi mais um post do Blog do Curso de Web Design Microcamp.
Faça um curso completo na melhor escola do Brasil.

quinta-feira, 3 de março de 2016

Como criar um flyer - parte I

Ola pessoal, bem-vindo a mais um post sobre Photoshop. Nosso objetivo aqui é criar fundos simples que poderiam ser utilizados em diversos tipos de peças gráficas.

 Criando um fundo personalizado para o flyer.
1) Inicie um novo documento clicando em Arquivo > Novo ou pressione as teclas de atalho “CTRL + N”.
2) Configure o novo documento da seguinte forma:
image001
3) Crie uma nova camada, no painel camadas e altere seu nome para Fundo.
4) Selecione a ferramenta Lata de tinta, escolha a cor de primeiro plano #8f4010.
5) Em seguida, com a última camada selecionada, clique em Filtros/Estilização/Ladrilhos. Depois faça a configuração abaixo e por último clique em Ok.
image006
6) Crie uma nova camada e com a ferramenta letreiro retangular, selecione toda a área da tela de desenho. Selecione a ferramenta lata de tinta, defina a cor de primeiro plano para preto. Em seguida preencha-o com a cor.
7) Localize no painel camadas o menu modo de mesclagem e altere para Luz brilhante.
image015
Criando a arte da parte superior (efeitos polaroides)
7) Importe uma imagem para dentro deste arquivo. Posicione na parte superior conforme o exemplo a seguir.
a) Em seguida renomeie a camada que possui esta última imagem importada para “família”
8) Crie mais uma camada e dê o nome de área, em seguida selecione a ferramenta letreiro retangular e desenhe sobre a área imagem superior, um retângulo com as dimensões aproximadamente  de 3,35cm de largura por 4 cm de altura.  Para finalizar esta parte, selecione a ferramenta lata de tinta, dê um duplo clique na cor de primeiro plano para abrir o seletor de cores, em seguida selecione a cor branca. Depois clique sobre a seleção.
9) Crie outra camada e atribua o nome de efeito, e agora faça um retângulo menor dentro do anterior, e preencha-o de preto.
10) Em seguida selecione a camada do retângulo branco e aplique um estilo de camada sombra projetada.
image009
10) Altere a posição da camada família para a parte de cima no painel camadas.
11) Em seguida selecione a camada família, clique com o botão auxiliar do mouse sobre ela e selecione o comando Criar máscara de corte.
12) Agora selecione as três últimas camadas (família+área+efeito) e arraste para a ferramentaCriar um novo grupo do painel camadas.
a) Renomeie o grupo para G1;
Resultado parcial
b) Você poderá também girar o retângulo para dar um efeito mais interessante. Para fazer isto, abra cada grupo e selecione somente as camadas área e efeito, pressione CTRL+T e faça o giro.
image008
13) Clique com o botão direito do mouse sobre o grupo G1 e escolha Duplicar grupo. Por último renomeie este segundo grupo para G2.
a) Selecione a imagem e arraste-a para a lateral direita.
Agora você já estará com duas máscaras identificadas. Para alterar a visualização da parte da imagem para uma outra parte para que o efeito fique interessante, faça:
b) Abra o grupo G2, clique na camada Família e com a ferramenta mover sobre  o segundo retângulo, clique para que uma outra parte da  imagem possa ser visualizada.
Exemplo
image013
14) Duplique cada grupo e altere as posições de cada retângulo, e também a parte visualizada da imagem.
Resultado Parcial
image011

A segunda parte deste flyer vamos ensinar no próximo post. Aguardem!

quinta-feira, 7 de janeiro de 2016


Hoje temos uma dica bem diferente para vocês! Vamos falar sobre CSS (caso você não se lembre o que é isso, clique aqui) e como ele poderá mudar o cursor (ou a seta do mouse, como preferir) em seu site.
Para começar vamos ao código base CSS que permite a mudança do cursor, aqui abaixo temos o cursor padrão aplicado em todo o corpo do site:
Seta Padrão
Seta Padrão




 body{cursor:default;}
Abaixo também podemos ver que é possivel aplicar diferentes tipos de cursores em elementos diferentes na página; nesse caso iríamos ver uma mão sobre os links do site.
Mão ao invés da seta
Mão ao invés da seta








a:link{cursor: pointer;}

Agora caso você deseje colocar algo personalizado, basta criar uma imagem ou uma animação, se atentando ao formato deles (.cur ou .gif para imagens ou .ani para animações) e colocar esse arquivo em uma pasta em seu servidor, especificando-o no código CSS:
.cursor_personalizado{
cursor: url(http://www.blogwebdesignmicrocamp.com.br/images/lupa_personalizada.cur), default;}
Cursor personalizado
Cursor personalizado







Para que isso funcione perfeitamente, é necessário fazer alguns testes, mas o resultado pode ser interessante. Aproveite e aumente seus conhecimentos, até a próxima!

Esse foi mais um post do Blog do Curso de Web Design Microcamp.