Curso Web Design | O que é Flat Design e por que ele é o assunto do momento?

---

O que é Flat Design e por que ele é o assunto do momento? Posted: 31 Oct 2013 05:14 AM PDT Flat design (ou "Design Plano" em tradução literal) é uma tendência recente de estética do web design, que defende a simplicidade das formas visando a objetividade e a legibilidade do layout e abandonando o uso de recursos gráficos complexos como texturas, sombras e gradientes. No Flat Design, cada elemento deve ser visualmente nítido e preciso para facilitar a compreensão e interação dos usuários. Nele, tudo é basicamente composto de formas simples, como, círculos, quadrados ou retângulos, por exemplo.  Mas, apesar disso, esses conceitos podem ser tão complexos quanto qualquer outro tipo de design como veremos a seguir. Outra vantagem no uso desta estética é que tudo pode ser feito apenas com códigos, facilitando sua adaptação para os mais diferentes tipos de mídia além do desktop (e podemos citar aqui a internet móvel e as recentíssimas smart tvs por exemplo) melhorando a interação entre todas elas. Exemplo de aplicação mobile com flat design minimalista Skeumorfismo Para compreender melhor o Flat Design, é necessário conhecer também o seu oposto: o Skeumorfismo, que é a utilização de artifícios visuais para fazer uma coisa parecer como outra. O skeumorfismo no design de interface de usuário geralmente se refere a um elemento digital projetado para parecer como algo do mundo físico, como por exemplo, um banner com fundo de imitação de madeira ou um botão com aparência de vidro. Exemplo de aplicativo com fundo e ícones em Skeumorfismo Prós do Skeumorfismo: Reconhecimento imediato e facilitado por parte do usuário, pois faz referência a algo conhecido; Maior apelo visual; Chama a atenção graças a quantidade de detalhes e o realismo. Contras: Excesso de detalhes pode fazer com que o usuário se distraia; Não é responsivo; Não tem relação com a objetividade e a facilidade de uso. Prós do flat Design: Objetividade; É responsivo; Não possui  elementos que compliquem a informação. Contras: Pode ocasionar problemas de falta de identidade; O excesso de simplicidade pode diluir os diferenciais da marca; Por não ter o apelo visual, se um componente da página falha você não tem a beleza para mascarar o problema. Tipografia, uma aliada Com a simplicidade das formas, é de se imaginar que a tipografia torne-se extremamente importante dentro do Flat Design. Se pensou isso, acertou: é através delas que podemos criar opções sutis no visual do design para demonstrar as mudanças de estado dos objetos (como nos botões de um site, por exemplo). Também é importante reparar que o critério para a escolha das fontes deve sempre corresponder ao layout do projeto. Uma fonte muito complexa irá parecer deslocada em um projeto tipicamente simples, certo? A Cor, um desafio No Flat Design costuma-se utilizar paletas de cores muito mais brilhantes e coloridas do que utilizamos convencionalmente em outras estéticas. Há uma liberdade maior com o uso de cores primárias e secundárias. Além disso, certos tipos de cores também são usadas com mais frequência por possuírem mais saturação e por chamarem a atenção por sua vivacidade. É claro que o Flat não se limita apenas às cores mais brilhantes. No fim, o importante é aliar seu conhecimento com o seu bom senso para alcançar um resultado que satisfaça suas exigências. Uma  boa dica para escolher cores é o site "Flat UI Colors". Com muitas opções , basta clicar sobre a cor para copiar seu código hexadecimal. Os mínimos detalhes O Flat Design tem o minimalismo como pedra fundamental. Mas, ao contrário do que muitos imaginam, o design minimalista não se faz apenas excluindo elementos ou itens do layout. Minimalismo significa garantir que tudo no layout funcione a ponto de nada mais ser necessário para que a ideia seja transmitida. Não é uma tarefa muito fácil, pois design minimalista envolve cor, forma, espaço, lugar e a condição em que será utilizado. O minimalismo sempre foi uma das vertentes mais importantes do design, mas ultimamente ganhou força principalmente nas novas interfaces gráficas conhecidas, como o Windows 8 da Microsoft, que optou por uma limpeza radical em seu visual. A Apple, seguiu a tendência e também reformulou sua interface para o novo iOS 7 que trouxe um visual muito mais simples, com todos os elementos redesenhados e uma nova paleta de cores totalmente revisitada. É essa fase que vive o design atualmente: em alta devido a sua utilização pelas grandes companhias mundiais que adotaram sua estética. Flat design é a solução mágica para seu projeto? Não. Há muitos problemas com ele, principalmente em relação a usabilidade. Podemos citar a ausência de profundidade como exemplo, pois seu design "plano" torna a compreensão do usuário mais vagarosa ao tentar perceber o que pode e o que não pode ser clicado em uma página. Então por que todo mundo hoje só fala sobre o Flat? Bom, os últimos anos foram dominados pelo Skeumorfismo, e sinal dos tempos, uma tendência tem seu apogeu e também o seu declínio, e é natural que surjam outras. O Flat design foi constituído inteiramente para ir contra o modelo  Skeumórfico, muito provavelmente para "fugir" do lugar comum da estética vigente atual e oferecer algo "novo". Na verdade, não importa qual estilo é melhor que o outro.  A discussão e o debate serão válidos se fugirmos desta falsa divisão e questionarmos ambos os estilos, com seus prós e contras e participando da procura por uma identidade digital própria, que seja apropriada para o tipo de trabalho desenvolvido por você. Deixe seus comentários no espaço abaixo, curta e compartilhe esse post com seus amigos e ajude-nos a divulgar o blog do Web design. Semana que vem estaremos de volta com outro artigo ou tutorial para você, amigo leitor! Um grande abraço e até o próximo post!

You are subscribed to email updates from Blog do Curso Web Design - Microcamp SP To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

Mundo Blogger

---

Polaroid Ícones para Redes Sociais com CSS3 Posted: 28 Oct 2013 01:58 PM PDT Mundo Blogger - Templates, Tutoriais, Dicas e Acessórios para Blogger. É-nos sabido que podemos fazer efeitos incríveis com CSS3, efeitos esses que antes, para serem obtidos, geralmente precisávamos de algum script e/ou plugin de jQuery. Vamos ver agora uma simples e elegante forma de exibir os ícones de redes sociais no seu blog usando apenas CSS3. Demo Entre no Layout do seu blog e adicione(...) Por: Yara G. Confira o artigo original publicado por Mundo Blogger: Polaroid Ícones para... [[ Este é apenas um resumo do conteúdo. Visite o Mundo Blogger para ver o artigo completo ]]

You are subscribed to email updates from Mundo Blogger To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

Visual Dicas

---

Windows 8.1 – Acesse o Prompt de Comando, Executar e outros recursos avançados Posted: 27 Oct 2013 04:03 PM PDT Windows 8.1 e o botão iniciar Se você já instalou a nova versão do Windows 8.1, deve ter observado no novo botão INICIAR, que nada mais faz do que mudar da Área de Trabalho para a nova interface do sistema operacional… Se voê ainda não atualizou gratuitamente o seu Windows 8, leia: Windows 8.1 versão final - saiba como atualizar Sendo assim, para você abrir o prompt de comando, por exemplo, você precisará pesquisar o aplicativo na interface touch… Para isso, clique na seta que aparece no canto inferior esquerdo da tela… Agora role a tela até encontrar o aplicativo desejado, ou busque no campo pesquisa…. Para quem ainda não sabe, existe uma forma bem mais fácil para você acessar estes comandos. Basta apenas clicar como o botão direito do mouse sobre o novo botão INICIAR ou digitar a tecla de atalho [Winkey + X] , como mostraremos a seguir: Acessar recursos avançados do Windows 8 Área de Trabalho Clique com o botão direito do mouse sobre o botão [Iniciar] que fica no canto inferior esquerdo da tela. Escolha um dos comandos que deseja acessar. Interface touch Se você estiver na interface touch, proceda da mesma que na área de trabalho. Clique com o botão direito do mouse sobre o botão [Iniciar] Veja a figura abaixo: Usando tecla de atalho [Winkey + X] Você também poderá acessar o menu iniciar através da tecla de atalho [Winkey + X], estando na área de trabalho ou na interface metro… Para conhecer outras teclas de atalho, leia  o artigo: Novas teclas de atalho do Windows 8 (para área de trabalho)   Recursos avançados do Windows Vamos ver agora alguns recursos que podemos acessar neste menu, que mostramos anteriormente. Comando EXECUTAR O velho comando executar muito utilizado desde o Windows 98. Veja como ficou no Windows 8.1, onde executamos o arquivo msconfig, que funciona de forma melhorada no novo sistema operacional… Comando PESQUISAR O comando pesquisar ganhou uma roupagem nova e é executado tanto na área de trabalho como na interface touch. Recurso EXPLORADOR DE ARQUIVOS Acesse o velho windows explorer, com algumas mudanças bem significativas. Com este recurso você consegue explorar de ponta a ponta a sua máquina. Recurso PAINEL DE CONTROLE Bem mais funcional que nas demais versões do Windows. Já falamos nesse cara também em Windows 8 - Como colocar o ícone do Painel de Controle na Tela Inicial Recurso GERENCIADOR DE TAREFAS Você lembra do CTRL+ALT+DEL,  usado muitas vezes quando algum programa trava? Daí temos que utilizar o Gerenciador de Tarefas e o botão [Finalizar tarefa]. Clicando em [Mais detalhes] você terá todos os processos, desempenho e gráficos. Você também poderá acessar este recurso utilizando a tecla de atalho [CTRL+ALT+DEL] e [Gerenciador de tarefas]. Recurso PROMPT DE COMANDO Como nas versões anteriores, o Prompt de Comando serve como de entrada para digitar comandos do MS‑DOS (Sistema Operacional de Disco da Microsoft). Isto é muito utilizado para reconhecer o "endereço de IP" de sua máquina e outros dados relativos à sua  rede (inclusive a própria Internet). Para isso, abra um "Prompt de Comando", digite [ipconfig] e tecle [ENTER]. DESLIGAR OU SAIR Aqui você poderá Desligar seu computador rapidamente, ou se preferir, Reiniciar, Suspender (hibernar) ou Sair (log off)… Outros recursos avançados Como podemos ver no menu, existem também outros recursos mais avançados, como Gerenciamento do Computador, Gerenciamento de Disco, Conexões de Rede, Gerenciador de Dispositivos, Sistema, Visualizador de Eventos, que são recursos mais utilizados por profissionais de TI. Já o recurso Opções de Energia deve ser utilizado em notebooks e dispositivos móveis. PROGRAMAS E RECURSOS Serve para você desinstalar ou repara algum programa instalado na sua máquina. Este recurso você também poderá acessá-lo através do Painel de Controle. byALF Leia também: Windows 8.1 versão final - saiba como atualizar Como ativar a tecla F8 para entrar no modo de segurança do Windows 8 Novas teclas de atalho do Windows 8 (para área de trabalho) Windows 8 – Como localizar arquivos recentes Como acessar seus aplicativos METRO direto da área de trabalho do Windows 8 Como criar disco de recuperação do Windows 8 Visual Dicas - A sua fonte de informação! Este artigo pertence ao Visual Dicas. Plágio é crime e está previsto no artigo 184 do Código Penal.

You are subscribed to email updates from Visual Dicas To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

Curso Web Design | Como inserir um player de vídeo utilizando HTML5

---

Como inserir um player de vídeo utilizando HTML5 Posted: 24 Oct 2013 05:19 AM PDT Você deseja inserir vídeos em suas páginas utilizando HTML5? É simples, neste artigo vamos tirar o máximo proveito dos recursos de um navegador para inserir um player de vídeo simples e muito eficiente! Utilizar players de vídeo em páginas web é um dos recursos mais úteis e apreciados pelos web designers em geral.  Além de ser uma excelente  alternativa ao Flash, com HTML5 você pode incorporar em suas páginas players completos sem a necessidade de instalação de plug-ins, códigos JavaScript ou qualquer outro recurso adicional. Se antes seu uso era visto com desconfiança pelos riscos de baixa compatibilidade entre os navegadores, é importante saber que ultimamente o suporte a vídeo em HTML5 vem aumentando gradativamente. Como você verá a seguir, além das vantagens já citadas, outra grande vantagem é a integração natural com CSS e JavaScript, bem como as outras tags HTML. Na primeira parte deste tutorial, vamos criar a estrutura básica de nosso documento e, em seguida, usar o elemento <video> para adicionar o arquivo diretamente na página web. Pré-requisitos É importante notar que os browsers em suas versões atuais como Chrome, Safari ou Internet Explorer 9  já possuem suporte a esse formato.  Ao menos por enquanto, você terá que evitar o Firefox (em algumas versões) e o Opera por causa de alguns problemas de disponibilidade do atributo de vídeo nesses navegadores. Embora o suporte para o elemento de vídeo seja consistente em todos os navegadores modernos, o formato .Mp4 tem suas limitações nos browsers citados, como você pode ver na tabela a seguir (em tempo: a cor verde demonstra que o navegador possui suporte na versão indicada, a cor rosa indica que ainda não é possível a utilização desse atributo na versão). Antes de começarmos, você vai precisar ter em seu computador um arquivo de vídeo .Mp4 para utilizarmos em nosso tutorial. Se não possuir um, você pode encontrar alguns arquivos para baixar online ou ainda utilizar um serviço de download de vídeos, como o site keepvid.com, onde você pode inserir uma URL de vídeo de sua preferência e escolher baixa-lo em vários formatos, inclusive o formato .Mp4. A construção da estrutura básica O código a seguir é a estrutura em torno da qual você irá construir o player de vídeo. Com ele, criaremos um layout simples com um espaço reservado para o arquivo que iremos utilizar. Crie um novo documento em HTML (se estiver utilizando o Dreamweaver, clique em Arquivo > Novo > HTML).  Na parte de Código, digite os códigos a seguir: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 Video Player</title> <style> body { font-family: sans-serif; border: 0; margin: 0; padding: 0; } header { text-align: center; } #player { display: table; width: 100%; padding: 4px; } #player > div { display: table-cell; vertical-align: top; } </style> </head> <body> <header> <h1>HTML5 Video Player</h1> </header> <section id="player"> <div> <!--Seu vídeo irá aparecer aqui--> </div> </section> </body> </html> Se você ainda não conhece alguns dos comandos utilizados acima, segue uma breve descrição de cada um deles (fonte: Microsoft). Atributo Descrição SRC Uma cadeia de caracteres que representa um URL que aponta para um arquivo de vídeo. CONTROLS Atributo booleano que ativa um conjunto de controles de reprodução internos. Isso geralmente inclui “reproduzir”, “pausar”, “buscar” e “definir volume”. POSTER Uma cadeia de caracteres que representa uma imagem de espaço reservado que é exibida no player de vídeo. A imagem de pôster é exibida somente quando não há um vídeo disponível porque a origem ainda não foi definida ou porque o conteúdo ainda está sendo carregado. LOOP Atributo booleano que reproduz o vídeo repetidamente até que o botão de pausa dos controles seja pressionado ou que o método pause seja chamado a partir do script. MUTED Atributo booleano que reproduz o vídeo com a faixa de áudio desativada. AUTOPLAY Atributo booleano que inicia a reprodução do vídeo automaticamente depois que o player tiver conteúdo suficiente armazenado em buffer. PRELOAD Atributo booleano que define uma dica do armazenamento em buffer necessário. HEIGHT Define a altura do player de vídeo em pixels. WIDTH Define a largura do player de vídeo em pixels. O resultado até aqui, que pode ser visualizado na parte de design do Dreamweaver: Agora que você foi devidamente apresentado a cada um dos atributos e suas respectivas descrições e digitou seu código exatamente igual ao que mostrei, vamos à parte mais interessante: adicionar o vídeo à sua página! Usando o elemento <vídeo> O objetivo na concepção do elemento <video> do HTML5 era fazer que a incorporação de vídeos em uma página da web fosse tão simples como a incorporação de imagens. Embora você encontre algumas complexidades adicionais, é elementar concluir que os formatos de arquivos de vídeo são mais ricos em recursos do que os formatos de imagem, portanto, podemos concluir que o objetivo do projeto foi alcançado! A seguir temos todo o código necessário para exibir o vídeo. Como você pode ver, não é complicado (as tags <center></center> são opcionais pois foram usadas para centralizar o vídeo na página): <center> <video src="[A URL DO SEU VIDEO AQUI]" controls width="720" height="480"> Se o seu browser não suporta esse formato de vídeo, por favor tente <a href="[A URL DO SEU VIDEO AQUI]">fazer o download do arquivo</a> </video> </center> Insira este código no lugar onde aparece o comentário “<– O vídeo aparecerá aqui –>” na parte incial do código que fizemos há pouco. Certifique-se de inserir em [A URL DO SEU VIDEO AQUI] o caminho que aponta para o seu arquivo .Mp4 em seu computador. Depois, salve o arquivo com o nome que desejar e a extensão .html no final (como teste.html, por exemplo). Abra o arquivo (se estiver utilizando Dreamweaver, aperte F12). O resultado deve ser como o que você vê na imagem a seguir: O player: O resultado na página, com o vídeo em andamento: Neste código, o atributo  src  é o caminho com o nome de seu arquivo. Mp4, o atributo de controle indica que você deseja que o vídeo possua  os controles padrão (play, audio, etc, omiti-lo significa que não quer que os controles apareçam) . Já a largura (width) e altura (height) são autoexplicativas. O texto dentro do elemento é o que será exibido caso a tag de vídeo não for reconhecida pelo browser do usuário. Conclusão A web está cada vez mais sendo utilizada como um substituto para os meios de transmissão tradicionais. Serviços como o Netflix, YouTube, Last.fm e Google Music procuram substituir o DVD e coleções de CD com os players online. Com HTML5, vídeo e áudio se tornam itens de primeira linha em matéria de conteúdo para web. Afinal, ao invés de entregar a responsabilidade para reprodução de mídia em um aplicativo de terceiros, ele é jogado dentro do próprio navegador, permitindo-lhe controlar e manipular a mídia dentro de sua aplicação web. E você, como você prefere lidar com vídeos em suas páginas web? Você considera o método do elemento <video> do HTML5 bom o suficiente? Deixe-nos saber suas opiniões nos comentários! Um grande abraço a todos e até o próximo post!

You are subscribed to email updates from Blog do Curso Web Design - Microcamp SP To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

Visual Dicas

---

Windows 8.1 versão final - saiba como atualizar Posted: 23 Oct 2013 07:35 PM PDT Windows 8.1 Se você já usa o Windows 8 e ainda não atualizou para  a versão Windows 8.1, veja nesse artigo como atualizar para a nova plataforma da Microsoft. Além de mais rápido e com uma interface mais fácil de usar, a nova versão do Windows 8.1 final tem ainda uma série de recursos e melhorias em relação à versão anterior. Para quem já possui o Windows 8, a nova versão poderá ser atualizada gratuitamente, conforme mostramos a seguir: Instalando a nova versão Windows 8.1   Acesse o O Windows 8.1 chegou 1) Clique no botão [Baixar a atualização gratuita]. 2) Aguarde alguns minutos para entrar no Windows Store. (Obs.: Você poderá baixar a atualização entrando diretamente no Windows Store). 3) Clique na imagem [Atualize para o Windows 8.1 gratuitamente]. 4) Clique no botão [Baixar]. Atenção: Antes de você baixar a atualização é importante ter em mãos o e-mail e a senha da sua conta Microsoft (hotmail, msn, etc.) que você já utiliza. 5) Aguarde alguns minutos… (isto poderá demorar bastante dependendo da sua conexão com a internet). 6) Quando o download terminar, o assistente de instalação informa que o computador precisa ser reiniciado. Salve tudo que estiver fazendo e clique no botão [Reiniciar Agora]… 7) Nesta fase começa o processo de instalação. O computador poderá reiniciado várias vezes automaticamente.  Aguarde alguns bons minutos… Atenção: Nesta fase você não poderá interromper a instalação para não correr o risco de danificar o sistema operacional instalado. 8) Quando a instalação para o Windows 8.1 for concluída, será iniciado o processo de configuração manual. A primeira tela exibe os termos de licença. Clique no botão [Aceito]. 9) Nesta tela você deverá clicar em [Usar configurações expressas] para continuar com a configuração padrão. Se desejar, poderá padronizar a configuração do seu jeito clicando em [Personalizar] – para usuários experientes. 10) Agora entre com o e-mail e a senha da sua conta Microsoft (hotmail, msn, etc…). Se você já estava conectado, digite apenas a sua senha… 11) Para verificar a identidade da sua conta Microsoft é necessário que você obtenha um código de confirmação no seu celular ou e-mail alternativo. Para isso, escolha "Como deseja obter este código". Depois clique em [Avançar]. 12) Agora digite o código recebido por e-mail, SMS ou ligação telefônica. Depois clique novamente no botão [Avançar]. Obs.: Se você não conseguir obter o código nesse momento, clique no link [Não posso fazer isso agora]. Depois de instalado a atualização, confirme a sua identidade. 13) Finalmente, clique no botão [Avançar] para usar o SkyDrive como serviço de armazenamento na nuvem e sincronizar seus arquivos do computador com ele. Aguarde mais alguns minutos para que o sistema instale os novos aplicativos do Windows 8.1. Pronto, agora clique na tela inicial do seu novo Windows e depois entre com a senha da sua conta Microsoft. Página de Início Área de trabalho Agora  é só desfrutar do novo Windows 8.1, mais rápido e mais fácil de usar. byALF Visual Dicas - A sua fonte de informação! Este artigo pertence ao Visual Dicas. Plágio é crime e está previsto no artigo 184 do Código Penal.

You are subscribed to email updates from Visual Dicas To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610