< Marcio Sena >

Definir paleta de cores para seu projeto faz muita diferença no resultado final do mesmo. As cores tem um papel fundamental em tudo o que visualisamos. Por isso achei interessante postar estes endereços e espero que os mesmos ajudem futuramente em seus projetos, para os que ainda não conhecem. Eu utilizo smepre nos meus e tenho até mais opções, mas preferi colocar aqui os que mais acesso e utilizo atualmente.  1- COLOR ADOBE Color Adobe : A Adobe, como sempre, quebrando tudo. O site deles é super profissional, e já aproveito pelo fato de já poder inseriri a cir criada direto no illustrator, photoshop ou qualquer aplicativo da adobe direto no seu trabalho, você tem acesso aos dados das cores em vários formatos, pode criar livremente a sua paleta ou com base em alguma imagem. 2- COLOURCO Colourco : Você vai gostar de escolher as cores no Colourco! É um dos meus preferidos para meus projetos. Conforme você desliza o mouse, as cores vão mudando. Ao clicar, ele sa...

Quando vou criar algum aplicativo ou website, normalmente gosto de criar meus próprios ícones, mas também pesquiso alguns na própria internet, para se criar um novo com um já existente, só que com meu toque. Dias atrás estava nesta pesquisa e acabei encontrando uma plataforma com uma vasta coleção, paga e também free. Trata-se do Streamline é simplesmente a coleção de ícones muito abrangente e versátil . òtimos para nossos projetos. Lá no aplicativo da Web, permite navegar e pesquisar ícones simplificados diretamente do seu navegador. Vale a pena conferir. O endereço está logo abaixo. Abraço a todos, espero que ajude em seus projetos futuros. https://streamlineicons.com/

De volta a publicar minhas dicas, trabalhos e ferramentas utilizadas por mim no dia a dia. Bem na volta deste carnaval, e recentemente procurando uma fonte para um projeto, acabei enocntrando uma ferramenta que busca por cores, o Picular, uma ferramenta de busca para cores. É tão simples quanto pesquisar no Google: basta digitar o termo que você está procurando e a ferramenta irá listar algumas cores de referência. Ela utiliza o próprio motor de busca do Google Imagens para listar os principais resultados do termo, extraindo a cor principal de cada imagem. É possível copiar o código hexadecimal de cada cor e também visualizar a imagem de referência. Mais uma boa ferramentar para designers utilizarem em seu dia-a-dia. Link da Ferramenta: https://picular.co/

Estou testando um novo navegador que foi feito para desenvolvedores. Trata-se do navegador Blisk, ele vem com um conjunto de emuladores pré-instalados de dispositivos populares, que torna mais fácil o teste dos projetos em vários dispositivos e navegadores. Este recurso é particularmente útil para comparar como o projeto responde a diferentes resoluções de tela e proporções de pixel do layout. Você pode fazer testes em dispositivos ainda mais simples, o Blisk oferece uma funcionalidade útil de “rolagem sync”, esta função permite aos desenvolvedores a trabalharem simultaneamente com a mesma parte do código em vários dispositivos sem perder o foco. Significa que sempre que você rolar uma página no seu dispositivo desktop, Blisk mostrará automaticamente a mesma seção da página em seu dispositivo móvel também. O navegador Blisk possui um recurso de “auto refresh”, que atualiza continuamente o conteúdo da página para que os programadores não têm mais para recarregar várias abas cada ...

PESSOAL JÁ ESTA SAINDO O BOOTSTRAP 4 São grandes as mudanças e é impossível detalhar todas em detalhe aqui, então aqui estão alguns dos nossos destaques: Sass . Bootstrap agora compila mais rápido do que nunca, graças a Libsass, e nós juntar-se uma crescente comunidade de desenvolvedores Sass. Sistema de rede melhorada. Foi adicionado uma nova camada de grade para melhoria em dispositivos móveis alvo e completamente remodelado nos mixins semânticas. Opt-in flexbox . O futuro é agora mudar uma variável boolean e recompilar seu CSS para tirar proveito de um sistema de rede baseado em flexbox e componentes. Miniaturas e painéis para cartões . Os cartões são um novo componente marca para o arranque, mas eles vão se sentir super familiar como eles fazem quase tudo miniaturas e painéis fez, só que melhor. Consolidou todos os redefine HTML em um novo módulo. Reinicie etapas em Normalize.css onde pára, dando-lhe resets mais opinativo como a caixa-dimensionamento: Beira-caix...

Bom amigos, desculpem a demora para escrever no blog, mas está meio corrido estes meses, mas sempre que puder irei deixar uma dica bacana. Bom ja algum tempo estou desenvolvendo codigos de meus projetos com o Sublime Text, agora utilizando a sua versão 3.0. Nele podemos instalar extensões poderosas para nos ajudar a ganhar tempo em nossas codificações, seja .css, php...e por ae vai. Vai aqui uma extensão que uma verdadeira mão na roda, o Emmet, Ele permite que você crie, com mais velocidade, seus elementos através de expressões específicas. Confira abaixo: Emmet O Emmet (anteriormente conhecido como Zen Coding) é simplesmente um conjunto de ferramentas de desenvolvimento web que ajudam a codificação de HTML e CSS. Ele permite que você crie, com mais velocidade, seus elementos através de expressões específicas, seguidas da tecla TAB. Saiba mais em http://emmet.io/ Escrita da expressão: ul # nav> li.item $ * 4> a {item $} + TAB Resultado: <Ul id = "nav...

Passado a folia do carnaval, agora chegou a hora de colocar os projetos em dia, então vou deixar aqui uma dica que me pediram por email para postar aqui alguns endereços que sempre estamos precisando para nossos projetos diários, imagens, ícones, fontes e melhor ainda, gratuitos. Há uma variedade enorme de bancos de imagens gratuitos na Internet, de fontes, de ícones, entre outros. Quem trabalha com conteúdo, criação e afins, precisa se preocupar com a questão dos direitos autoriais certamente já conhece alguns deles, separei aqui alguns bons endereços da web que facilita nossa vida. Confira! BANCO DE IMAGENS MorgueFile Com um visual limpo, o MorgueFile é um excelente banco de imagens gratuito que permite realizar download sem necessidade de cadastro. Você pode navegar livremente pelas fotos ou buscá-las especificamente através do campo de busca, lembrando-se sempre que o site é em inglês. Há também uma seção interessante chamada “Classroom”, onde são apresentadas al...

Apps ótimos para designers na tecnologia atual web. Apps que utilizo diariamente nos meus trabalhos. Aqui vai uma dica para quem não conhece ainda e vale a pena baixar os mesmos. Color Reference - Uma ferramenta para designers e desenvolvedores web, semelhante ao kuler. Eu tenho este app no meu smartphones para pesquisar cores e referências no ato do desenvolvimento de meus projetos web.  Obter inspiração para seus projetos e descobrir novos esquemas de cores. Criar suas próprias cores para seus layouts ou mesmo encontrar o código de alguma cor. - Procurar RGB lista de cores com nomes de cores - Crie e salve novas cores RGB - Verifique cores harmônicas e complementares - Procurar paletas de cores.  Crie o sua própria paleta de até 5 cores Ajuda nos seus projetos de CSS com o HTML e códigos RGB. òtima opção e recomendo a todos. Baixe o  Color Reference aqui Adobe Kuler - para iPhone, iPad, and iPod touch, temos o  Kuler, ele é um ótimo ap...

Terry White mostra Generator, função do novo Adobe Photoshop CC (14,1)  que permite que você crie automaticamente gráficos web a partir de seus arquivos de Photoshop em camadas. Você pode até mesmo gerar um projeto para web design responsivo. By:  Terry White

No Illustrator CC você pode gerar código CSS para texto, objetos, até mesmo layouts inteiros. Veja neste vídeo da Adobe. fonte:Askbrianwood

Obter um olhar em profundidade as novas ferramentas CSS Designer poderosos no Dreamweaver CC. Ferramentas intuitivas de edição visual ajudar a gerar código limpo, web-padrão e aplicar rapidamente as propriedades CSS como gradientes e sombras de caixa. Você pode ver os efeitos em seus projetos imediatamente, eliminando ajustes tedioso e a necessidade de ir e voltar para a visualização Código. fonte: http://tv.adobe.com/

Você conhece Modern.IE? Uma ferramenta da Microsoft que analisa vários elementos de uma página da internet em busca de erros e problemas de compatibilidade com o Internet Explorer. Uma de nossas dores de cabeça na hora de desenvolver websites para vários tipos de navegadores e aparelhos. Uma mão na roda, acesse e verifique, é gratuito. Acesse: http://www.modern.ie/pt-br

Veja como você pode criar sites mais rápido, deixando Illustrator CC código CSS gerar para você - para texto, objetos, até mesmo layouts inteiros. fonte: http://tv.adobe.com

Funções, classes, atributos, opções, tags e tudo o mais que existem no desenvolvimento web, por isso que existem as cheat sheets ou “folhas de cola”. Resumos na maioria das vezes em uma ou duas páginas. Não trazem todas as informações sobre o tema, mas somente as características mais esquecidas ou importantes. O ideal é ter a cheat sheet na mão e não no computador com mais uma janela aberta e consumindo memória. Talvez criar uma pasta com divisão de plásticos para melhor organizar. “Nossos” Cheat Sheets Relacionei alguns aqui para você baixar e servir de material de pesquisa rápida para seus projetos. WordPress Help Sheet. Folha de Ajuda para WordPress. Advanced WordPress Help Sheet . WP Help Sheet Wp_theme_tags Cheat-sheet-seo-for-wordpress Php-cheat-sheet-v2 html5-cheat-sheet Wordpress-Cheat-Sheet WordPress-Visual-Cheat-Sheet download the CSS 2.1 Sheet (PDF) download the CSS 3 Sheet (PDF) Referência rápida de CSS Fonte: bdibbs

Propriedades de CSS3 já são suportadas pelas versões mais recentes de alguns navegadores, como o Safari 4 e o Firefox 3.6. Com isso podemos testar os novos recursos que estão por vir. Para que alguns dos novos recursos possam ser testados, é necessário adicionarmos os prefixos -moz- (para a renderização no Firefox) e -webkit- (para renderização no Safari). A seguir, exemplos de algumas das novas propriedades que a nova versão da linguagem irá nos fornecer: * border-radius: com essa propriedade podemos adicionar um raio de arredondamento para todos os cantos de um elemento, como -moz-border-radius: 10px, ou valores diferentes para cada canto, como -moz-border-radius-topright: 5px. * text-shadow: permite adicionar sombras em textos, configurando a distância da sombra para a esquerda e para o topo do texto, o enevoamento e cor: text-shadow: 5px 5px 2px #999. * shadow: funciona da mesma maneira que o text-shadow, porém aplicando sombra aos outros elementos: -moz-box-shadow: -10px -10...