Protótipos para web III: design com HTML e CSS

1. Trailer: Sou Erika Heins. Sou um web designer, desenvolvedor web. Trabalho há mais de 10 anos no campo e nos EUA. Esta classe é sobre desenvolvimento web simples. Então realmente cada CSS conhecido para designers. Você estará tomando as maquetes de um site que você já projetou e você vai convertê-los em um site responsivo. Eu acho que esta classe pode servir tanto web designers iniciantes que querem aprender a levar seus projetos em código ou talvez ter que dar um passo atrás e planejá-los um pouco mais claramente antes que eles pulem direto em seu processo visual. Esta aula é boa para os alunos que começam a entender o design responsivo e todo o planejamento para processo de desenvolvimento ou designers experientes que querem adaptar seu processo. Ser capaz de criar sites e manter sites para entender como eles funcionam, como torná-los mais poderosos ou o fato de que é apenas uma das habilidades mais valiosas. 2. RWD, CSS, e Protótipos HTML: Bem-vindo ao Simple Web Development. Nesta classe, vamos pegar as maquetes para nosso site responsivo e transformá-las em HTML e CSS reais. Os métodos que usaremos são apropriados para prototipagem ou para iniciar um novo site. Esta classe otimiza o processo de desenvolvimento front-end para designers. Seja o seu designer aprendendo a codificar querendo explicações visuais ou um híbrido atual e querendo melhorar seu fluxo de trabalho ou adaptá-lo à web responsiva, esta classe lhe dará um bom processo e um conjunto completo de recursos. Porque os canteiros de obras nos tornam melhores designers. Como Steve Jobs disse, “Design não é apenas o que parece e se sente. O design é como funciona.” Quando você constrói coisas, você vê designs em sua mídia real de HTML e CSS. Você revela necessidades adicionais do sistema, você pode visualizar e testar a interatividade e, o mais importante, você pode adicionar gifs. Você pode considerar este projeto um protótipo ou um site. O primeiro é tipicamente jogado fora. É apenas uma maquete clicável feita o mais rápido possível para ver como as coisas ficam. Você se concentraria mais em velocidade e apresentação. Um site apropriado tem todas as tags alt, fall backs e otimização para o servidor de produção. Você se concentraria em sistemas sólidos, escaláveis e sustentáveis. Vamos passar por um processo que é útil para ambos. Como o web design responsivo mudou todo o nosso trabalho, muitas vezes precisamos tornar as coisas mais rápidas e em pedaços menores. Vamos falar sobre filosofias atuais na indústria e os prós e contras de diferentes técnicas. Meu processo é avaliar a situação, depois organizar meus materiais, personalizá-los conforme necessário, testar tudo completamente e, em seguida, documentar o máximo possível. O kit que eu uso para prototipagem ou produção é Coda para escrever código, Sass para extensão CSS, Hammer para templates e compilação, Bourbon para mixins e grades, e SourceTree para commits git. Então, vá buscar a configuração da sua ferramenta. Baixe os testes gratuitos do Coda ou qualquer outro editor de texto que você gostaria de usar. Hammer ou algum outro compilador Sass, e SourceTree ou algum outro cliente GitHub se você quiser usar um. Além disso, baixe os recursos para esta classe. Existem alguns arquivos de origem e referências. Você já deve ter Sitemaps e maquetes. Caso contrário, você quer fazer as duas primeiras aulas desta série. 3. Avalie a situação: O primeiro passo é avaliar a situação. O estado do campo e o estado do nosso projeto. Precisamos estar sempre aprendendo, esse campo está mudando constantemente. Então, se você não fez algo em seis meses, você precisa pesquisar porque provavelmente há uma maneira melhor de fazer isso agora. Este é um campo para pessoas que gostam de aprender e que amam coisas novas. Mas proteja seu próprio processo. As ferramentas vão e vêm, então não perturbe o que está funcionando bem para você já está. Novas ferramentas são disruptivas. Espero que, de um jeito bom, você esteja limpando seu processo, mas pode ser de um jeito ruim se distrair você e esperar. Então, confirme os requisitos do projeto. Qual é o verdadeiro propósito deste site? Qual é a sua vida útil? Quanto tempo você precisa que ele fique acordado? Você tem algum tempo ou orçamentos financeiros que você precisa acertar? Quais dispositivos você deseja que ele exiba enquanto está ligado? Quais navegadores você tem que suportar? E que tipo de telas você deseja suportar? Alta definição, telas de retina. Consulte e pergunte de que recursos você precisa. Que nível de polonês você precisa no código. Você poderia usar um aplicativo de codificação baseado em GUI se você só quer algo rapidamente e não de verdade. O código gerado é geralmente bastante detalhado. Se você não precisa de todos os recursos de HTML e CSS apenas os populares que o aplicativo fornece, pode ser divertido apenas arrastar e soltar elementos ao redor da página. Além disso, se você não está planejando continuar a codificação e você está apenas construindo ou você está apenas fazendo um site para o curto prazo. Dreamweaver é o padrão antigo, Adobe também tem um projeto mais recente chamado Edge e há upstarts como Web Flow e Arara. Os benefícios desta interface agradável, que você pode obter rapidamente layouts básicos e que você pode revisar páginas visualmente. Mas, novamente, você está limitado ao conjunto de recursos particular do aplicativo, o código geralmente ainda precisa de ajustes e você realmente não usá-lo em produção e muitos deles ainda estão com bugs. Então, por que quereríamos fazer codificação HTML e CSS? Como temos acesso a todos os recursos do HTML, não estamos limitados aos recursos de qualquer aplicativo de prototipagem que estamos escolhendo. Podemos ver os elementos reais, a topografia e a velocidade da página. Podemos determinar pontos de interrupção em dispositivos reais e todos os nossos arquivos fonte são não-proprietários, o que significa que podemos transferir este código para qualquer outro aplicativo que queremos usar. Você pode aperfeiçoar seu protótipo em produção, o que economiza tempo e você pode construir um site em questão de horas ou dias se você for rápido. Mas é complicado ir para o teclado como sua principal ferramenta de design se você está vindo de um fundo de design. Então, o aplicativo que você usa faz uma grande diferença. Sublime Text é muito popular, é realmente personalizável e tem uma vista de navegador legal no lado direito para o seu código. Eu uso coda que permite que você tenha clipes de código que você pode arrastar e soltar em suas páginas. Ele também tem chamado de dobramento de código e coloração e uma visualização de janela dividida ou você pode usar o aplicativo de dieta coda iPad para viver gerar uma pré-visualização a cada vez que você salvar. Você pode abrir uma janela de terminal diretamente no mesmo aplicativo e também há muitos manuais de referência para ajudá-lo a procurar coisas enquanto você codifica. Mas não vamos codificar HTML e CSS perfeitamente reto, existem algumas ferramentas e métodos chave para economizar muito tempo. Plug-ins e extensões podem nos dar recursos extras que queremos e precisamos. Por exemplo, Emmnet é CSS abreviado, você pode digitar alguns caracteres e tê-los expandir para HTML ou CSS completo. Então Sass ai um processador CSS que nos dá variáveis, mix-ins, bibliotecas, se então declarações e todos os tipos de coisas que uma linguagem de programação inteligente teria. Eu amo Hammer. Acho que é a maneira mais rápida de criar sites estáticos. Você precisa de um compilador se você estiver indo para usar Sass e Hammer faz isso para nós e também inclui a biblioteca Bourbon de mix-ins por padrão e o melhor de tudo, permite incluir algumas variáveis que compilaram um HTML regular. Então, novamente, os benefícios das coisas de codificação manual são que você pode usar HTML e CSS praticamente em qualquer lugar, ele renderiza os designs e o meio real, você obtém todas as capacidades do navegador e é de código aberto ou não proprietário. A única coisa é que, sim, há uma curva de aprendizagem, sim, você tem que investir algum tempo em codificar tudo isso e você tem que testá-lo no navegador. Então, frameworks podem ser um meio feliz. Se você é um desenvolvedor especialista, você pode estar pensando em Node.js porque você está fazendo aplicativos mas se você estiver nesse nível, provavelmente não precisa dessa classe. Framer Node.js é outro que está focado em prototipagem e animação. O próximo nível abaixo que poderíamos dizer é Bootstrap. É muito popular para aplicativos em produção, ele lhe dá todos os tipos de elementos em interatividade. Para mim, houve alguns disjuntores porque é embutido Lass e Sass. Embora haja uma porta se você quiser usar Sass e há lotes de estilo padrão, então para mim era muita coisa para sobrescrever. Ele lhe dá botões, ele lhe dá formulários, ele lhe dá títulos padrão e têxteis, então você tem que entrar e escrever todo o CSS para sobrescrever esses estilos se você quiser que seu site pareça único, que leva um pouco de tempo e é por isso que você vê um monte de sites usando Bootstrap que todos parecem iguais. Foundation é outro framework que é semelhante ao Bootstrap. Prefiro a sua estrutura um pouco melhor. Ele lhe dá um monte de modelos padrão. Então, você não teria que codificar esse tipo de layouts do zero e por isso é bom, mas é volumoso, há um monte de marcação extra quando você está fazendo esse tipo de layouts de coluna e você obtém nomes de classe em todas as suas marcações. Então, eu acho que você pode obter as mesmas coisas com menos trabalho. Compass é outro popular, é uma enorme biblioteca de mix-ins CSS. É muito grande e pode adicionar um pouco de peso às suas páginas, então eu me inclino em Bourbon que é muito mais simples do que Compass é o mesmo tipo de idéia de uma biblioteca de mix-ins CSS, então você não precisa escrevê-los e mantê-los todos você mesmo e eu acho que é documentação para ser muito mais fácil de ler. Você também pode usar Bourbon Neat para combinar com Bourbon e é uma grade responsiva semântica simples e falaremos mais sobre isso mais tarde. Então, todas essas estruturas significam que você tem menos derivado do zero que você obtém funcionalidade adicional que você pode não ser capaz de fazer mesmo e espero que eles são bem testados. As desvantagens é que você pode ter uma falta de controle, você tem que seguir os padrões dos frameworks que você está usando. Há uma curva de aprendizagem de aprender a sintaxe e capacidades específicas de cada framework e é conhecimento especializado, não é tão aplicável a outras ferramentas se você decidir mudar de frameworks mais tarde. Então, se você está tentando acompanhar coisas como essas, perguntando como você ouve sobre essas novas ferramentas, decida quais são as melhores. News.layervault.com é muito bom e, claro, Twitter. Eu fiz uma lista de pessoas recomendadas no campo Design e Tecnologia, para que você possa obter um monte de informações de pessoas que estão realmente acompanhando e tentando estar no topo de seu jogo sobre essas coisas. Então, decida o quanto você quer aprender por este projeto. Deslize alguns desses aplicativos, leia a documentação, assista a alguns tutoriais e obtenha a configuração. Eu vou usar Hammer and Sass, Bourbon e Bourbon Neat, então eu sugiro aqueles se você quiser acompanhar, mas é claro que se você quiser aprender Bootstrap ou Foundation ou qualquer outra coisa que você já ouviu falar você poderia configurar isso para o seu projeto também. 4. Salve isso: Nossa próxima lição é sobre Controle de Versão. Esta é uma habilidade valiosa e essencial. Então, mesmo que você ache que não precisa dele neste projeto, vamos em frente e aprender uma maneira simples de fazê-lo. Se você está trabalhando no mundo digital, é muito importante salvar seu trabalho em vários lugares. controle de versão faz backup de seus arquivos, bem como de todas as versões anteriores. Estamos todos familiarizados com o conceito. No nível um, você está apenas usando nomes de arquivos, -v1, -v2, -FINAL-FINAL-FINAL-FINAL. Nível dois, você passa para um sistema de controle de versão. Existem aplicativos como LayerVault para Photoshop, e GitHub é o grande para código. Meu pai é um programador e ele sempre diz que até você usar um sistema de controle de versão, você é um desenvolvedor amador e não um profissional. Mas ainda assim, o GitHub é um pouco assustador. Então, navegue na guia Explorar para ter uma noção de todas as coisas que você pode fazer. Você pode fazer backup de seus arquivos, para que você sempre tenha duas cópias. Você pode facilmente desfazer tarefas porque ele salva cada versão secundária. Você pode testar ideias alternativas porque permite garfos e galhos. Você pode colaborar com outras pessoas nas mesmas páginas porque o GitHub gerencia os conflitos de mesclagem. Você pode compartilhar seu trabalho porque o código aberto nos move para a frente. Você também pode usar um repositório privado, se quiser. Então, leia todos os tutoriais. Essa é sempre a melhor maneira de aprender uma nova ferramenta. Mas eu fiz tudo isso, e ainda estou confuso e assustado com o GitHub até encontrar algumas ferramentas visuais. Então, há um GitHub para Mac, mas eu prefiro um chamado SourceTree. Também é gratuito e tem todos os comandos à sua frente. Então, eu só estou usando os principais, como commit, pull e push. Você pode ver que tem esse botão. Então, eu não tenho que me lembrar da sintaxe particular. Terminal é que não há desfazer, não há codificação de cores para mostrar quando você digitou um erro. Então, sempre foi um pouco estressante demais para mim. Mas uma vez que comecei a usar o SourceTree, eu estava totalmente confiante em usar o Git. Então, como você começa? Primeiro, você precisa obter a conta dela. Então, vá para github.com e crie uma conta. Em seguida, no seu perfil ou na página inicial, você deseja criar um novo repositório. Então, vou ligar para a minha demo. Vou torná-lo público para que todos possam vê-lo, e eu também vou marcar a caixa que diz inicializar este repositório com um README. Então, que vamos você ir em frente e usar o repositório porque é uma coisa necessária para ter um arquivo README lá dentro. Então, você é forçado a escrever uma introdução explicando para outras pessoas o que é esse conjunto de arquivos. Então, agora você vê meu repositório. Está com o meu nome de utilizador. Energy7/Demo é onde você pode encontrá-lo. Você pode ver que este arquivo README apenas tem o título e eu não adicionei nenhum conteúdo. Farei isso no final do projeto. Então, se você for para o lado direito da tela, você deseja copiar este URL clone onde ele diz SSH. Então você quer entrar no SourceTree. Então, vá para o painel Favoritos. Prima Apple B se não o conseguir ver e clica no botão de adição para adicionar um repositório. Você vai clonar um repositório. Como você já o criou no GitHub, você não precisa recriá-lo, mas você só vai clonar uma cópia para o seu computador. Então, o caminho de origem é que você copiou do GitHub e, em seguida, escolha uma pasta. Mantenho todos os meus repositórios em minha pasta de usuário em uma subpasta chamada Sites. Vou chamar minha pasta de repo da mesma coisa que está no GitHub, que é demo, e então ele vai ficar assim. Você verá que esta é a janela SourceTree. Então, não há arquivos que adicionamos localmente ainda. Então, tudo está em branco, mas você pode ver todos os botões no topo. Então, à esquerda, você pode ver que estamos conectados ao ramo mestre, que é como nosso repo principal. Há todos os tipos de outras coisas que você pode mergulhar se você estiver trabalhando em um ambiente profissional. Então, agora, eu vou para Hammer, e eu forneci alguns arquivos fonte. Eu forneci um modelo Hammer para esta classe. Então, ele é chamado de Demo Template. Então, na minha mesma pasta de repositório, vou criar um site de demonstração usando este modelo de demonstração. Quando eu clicar em Salvar, Hammer vai compilar todos esses arquivos. Eles estão todos praticamente vazios até agora, mas Hammer fica lá e assiste, e cada vez que você salva, ele compila novamente. Então, se eu voltar para SourceTree, vejo que todos esses arquivos criados pelo Hammer, que fazem parte do modelo estão agora na minha árvore de trabalho, que significa como no meu disco rígido local. Então, eu vou arrastá-los e soltá-los. Eu vou selecioná-los todos e arrastá-los e soltá-los até a metade superior da tela para prepará-los, que significa que estes são os que eu estou pronto para compartilhar. Então eu vou clicar no botão Confirmar, o primeiro botão à esquerda, e eu vou escrever uma mensagem descrevendo o que eu fiz aqui. Então, aqui, eu acabei de criar os arquivos do site do meu modelo Demo Hammer. Vou marcar a caixa na parte inferior, que diz empurrar os commits imediatamente para a origem. Então, comprometer-se é apenas como um salvamento, mas é apenas localmente. Não está fazendo nada com o repo no GitHub. Então, você tem que enviar os arquivos se quiser que eles saiam para o GitHub. Então, uma vez que eu faço isso, agora você vê que eu tenho minha pasta de site de demonstração no repositório público também. Então, você fez isso. Você empurrou o GitHub. Então, se você estiver em uma entrevista de emprego, e eles perguntarem, você pode usar Git, você pode dizer sim agora. SourceTree também é bom porque você pode ver no meio da tela, acima do botão Pull, há um pequeno emblema que diz que havia um pequeno cinco vermelho. Então, isso diz que se outra pessoa estiver trabalhando no projeto com você, fez algumas alterações no repositório, e você deseja puxá-las, você deseja baixar as alterações que você está trabalhando com os arquivos mais atualizados. Então, sempre procure isso e puxe antes de começar a trabalhar em qualquer caso. Então, a sintaxe básica para o Git é que pull é como download, que você está mesclando alterações em seus arquivos. Commit é como salvar. É como um marcador de milha que você pode voltar mais tarde. Push é como um upload onde você está mesclando seus commits de volta ao repositório. Reverter é como desfazer, onde você precisa voltar para um commit anterior, que o deixa muito feliz quando você tem muitos commits para escolher. Fork é se você encontrar um repositório que você deseja usar como sua base, se você quiser manter um link, então se gostar, digamos, eles atualizam seu cabeçalho, você pode mesclar a ramificação upstream e você também pode usar esse cabeçalho atualizado. Então, parece algo parecido com isso. Aqui está uma boa ilustração de Jessica Lord. Há um projeto original que é uma girafa, e você pode transferi-lo, e então você pode mudá-lo como quiser, e talvez você adicione uma cabeça de tigre, e então você iria carregá-lo de volta se você tiver direitos de acesso até o repositório original. Então, agora isso faz parte do repo principal, esta girafa cabeça de tigre. Então, outra pessoa pode bifurcar esse novo código e adicionar algumas penas, e então eles podem empurrá-lo de volta para o repositório e mesclar essas alterações também. Então, vocês poderiam até colaborar um com o outro neste projeto nesta turma. Você pode usar o mesmo repositório e compartilhar arquivos. Então, vá em frente e crie seu repositório. Baixe SourceTree se você não tem, e Hammer também. Crie uma conta do GitHub. Crie um repositório e, em seguida, obtenha a configuração do repositório no SourceTree. 5. Os ossos: Agora, estamos prontos para começar a construir páginas. Nossa leitura de fundo é novamente por Um Livro Apart. Se você é um web designer, vá em frente e compre todos os livros deles. As melhores visões gerais de cada tópico, e são curtas o suficiente para ler em um passeio de avião. Então, como vamos passar dessas maquetes planas em código? Felizmente, nosso bom designer simulou todos os tipos de pontos de interrupção, então não estamos tomando decisões de layout nós mesmos, e temos um sitemap para nos mostrar quais páginas são múltiplas e aproximadamente quantas existem no total. Então, agora é tudo sobre reconhecimento de padrões, e Hammer nos ajuda com isso. Os modelos padrão vêm com uma pasta de inclusões. Você verá cabeçalho, rodapé e navegação aqui. Você usa inclusões em sites grandes, então você não precisa colar o cabeçalho cinco vezes em cinco páginas, mas eles exigem uma linguagem dinâmica do lado do servidor como PHP ou Ruby. Hammer compila essas inclusões para HTML normal, que você verá na pasta Build. Em seguida, a pasta Assets, você verá que a subpasta CSS tem um style.scss. Este é um arquivo SaaS, que também é compilado para CSS regular na pasta Build. Enquanto estamos aqui, veja o modelo que eu forneci. Nos ativos CSS, existem várias subpastas. Falaremos sobre isso mais tarde. É tudo sobre projetar módulos, não páginas. Novamente, não gostaríamos de codificar um cabeçalho cinco vezes para cinco páginas, e então você quer pensar sobre chamadas e outros recursos da mesma maneira. Então, faça uma lista de seus modelos, não necessariamente suas páginas. Você pode apenas fazer isso em um arquivo de texto, e você deseja descrevê-los no maior ponto de interrupção porque layouts móveis são geralmente uma única coluna. Então, se você descreveu seus modelos móveis, eles seriam praticamente todos iguais, mas pense em onde você tem layouts complexos de três colunas ou duas colunas. Agora, é uma questão de semântica. Semântica significa apenas atribuir elementos com base no que eles são, não em como eles se parecem. Este pedaço de texto é um parágrafo ou uma lista? Então, HTML é o alfabeto do web design. Você quer aprender todas essas letras, que você possa soletrar mais palavras. Você não vai necessariamente usar tudo isso. Mas novamente, quanto mais você sabe, mais você pode, fazer e isso é outra coisa que eu gosto no Coda, é que ele vem com livros em várias línguas. Então, dentro do mesmo aplicativo, você pode simplesmente procurar coisas. Então, se eu quisesse usar um site tag, eu poderia ir para o livro e procurar os atributos apropriados e para que ele é usado. Então, você também pode começar a usar a abreviação para trabalhar um pouco mais rápido. Markdown, uma abreviação para HTML. Ele ajuda você a se concentrar na semântica do seu conteúdo em vez da aparência. Então, você tem que dizer que este é um H1 este é um H2, et cetera. Você pode escrever Markdown em um aplicativo como Stackedit para ver a visualização HTML renderizada lado a lado, e então você pode baixar HTML para ter seu conteúdo em tudo marcado e pronto para colar em seus templates. Emmet é outro tipo de abreviação para HTML e CSS. Ele vem como um plug-in para o seu editor de código. Você escreve código usando a sintaxe Emmet, que se parece com esta linha na parte superior, e então você pressiona “Control E” para expandi-lo, e você obtém o HTML ou CSS completo como na parte inferior. vez, uma coisa é aprender, mas quando estou indo para uma fase em que eu vou estar programando por vários dias, eu volto e aprendo novamente. Realmente parece mágica. A outra coisa que é super útil é fazer Clips. Quando você codificou uma lista desordenada pela centésima vez, você começa a se perguntar se isso é realmente necessário? Não, não é. Você pode criar sua própria biblioteca pessoal de código. Aqui, codificador, há uma aba à direita para todos os seus clipes. Você pode ver meus clipes HTML5, meus clipes Hammer, etc. Você pode criar pastas de clipes para qualquer estrutura que você usar e, em seguida, basta arrastá-los e soltá-los em seu arquivo para reutilizar seu código. Há um site Eclipse código que tem muitas amostras, simples e complexas para muitos sistemas e estruturas, e Pears. É P-E-A-R-S. É um site que tem um monte de HTML simples e padrões CSS. Procure também os padrões responsivos no site Brad Frost chamado This Is Responsive. Ele foi super generoso e criou toneladas de padrões úteis como navegação responsiva e imagens. Seu último esforço é chamado de Laboratório Padrão, e tem a mesma abordagem modular que eu falei. Em vez das letras do alfabeto, ele fala sobre átomos. Então, isso pode ser, você tem uma cor ou uma fonte. É um átomo do seu site. Você combinaria isso em uma molécula. Eles podem fazer uma manchete, e você combinaria várias moléculas em um organismo, que pode ser um cabeçalho ou uma barra lateral. Em seguida, esses organismos combinam para formar modelo, que pode ser seu modelo de coluna única, seu modelo de grade, e então você usaria esses modelos para fazer páginas individuais como sua página de boas-vindas ou sua página de perfil. Então, confira esse sistema e talvez você queira explorá-lo se estiver interessado em continuar no desenvolvimento da Web, mas não se esqueça de fazer backup de seus clipes. A coisa mais triste que já aconteceu foi, eu tive um acidente no computador, e todos os meus clipes foram perdidos, e foram tantos anos de trabalho, todos compilados, e não foi feito backup em nenhum lugar, então lições aprendidas. Então, enquanto você está escrevendo seu HTML, você vai começar a adicionar nomes de classe, que é onde você vai anexar seu CSS. Então, há todos os tipos de abordagens para como você nomeia suas aulas, mas aqui está a minha abordagem básica. Seu recipiente quer ter uma classe curta, nome de recipiente curto simples é ótimo. Então, você pode ter aulas infantis após hífen. Então, esta seção que eu chamei de introdução, e então minhas subseções são intro-herói e intro-blurb, que novamente são semânticos, e que eles se referem a como ele é, não como ele parece. Então, não é a primeira fila. Porque em um layout responsivo, essa linha superior pode se mover para a esquerda, mas é a linha de introdução, ou qualquer outra coisa que você queira chamá-la. As metodologias populares, estas são pessoas que passam muito tempo tentando pensar em grandes sistemas, como você precisa nomear suas aulas. Um deles foi o OOCSS, que é orientado a objetos CSS por Nicole Sullivan, e esse foi um dos primeiros estilos abstratos em módulos. Então, você escreveria um tipo de estilos de visualização de logotipos que você combina em diferentes elementos colocando um monte de nomes de classe na marcação, mas Sass faz isso agora. Novamente, não é tão bom ter todas as aulas na marcação. Outro popular é BEM, que é Bloco Element Modificador, o que significa que você usa a.class para o principal. Então, para uma criança, você usa dois sublinhados, e, em seguida, para uma subclasse, você usa dois hífens. Então, isso é bastante reconhecível quando você vê alguém que está usando BEM. Então, SMACSS é outro que eu gosto, que significa Arquitetura Modular Escalável, e que diz que você deseja dividir seu CSS em cinco seções básicas. Um deles é como seus elementos de base. Dois são todos os estilos que fazem o seu layout. Três são todos os módulos. Então, chamadas ou peças reutilizáveis de que falamos. Quatro são os Estados Unidos. Então, ele é selecionado ou é um erro, e cinco são os temas, o que significa que se para grandes sites você muitas vezes tem um tema seções usando o mesmo código que outras seções. Então, vamos usar um similar. Eu uso um detalhamento semelhante para organizar minhas pastas de parciais, mas eu não sou rigoroso sobre seguir Sass para o último. As principais lições que eu aprendi quando eu estava escolhendo meus nomes de classe, uma, é não usar IDs porque eles são muito específicos, e eles vão sobrescrever a maioria dos outros CSS. Então, se você precisa ajustar algum CSS existente, você tem que usar uma tonelada de especificidade ou uma declaração importante, o que é um problema. Então, você deseja fazer uma classe é igual ao perfil de usuário, e não um ID é igual ao perfil de usuário. Além disso, quando você estiver escrevendo sua marcação, você deseja reduzir dependências. Então, isso significa que você não quer uma mudança em seu CSS para quebrar seu JavaScript e vice-versa. Então, é ótimo usar nomes de classe que são atribuídos a cada um. Então, para ganchos JavaScript, eu uso IDs, ou atributos de dados, ou nomes de classe que começam com.js-, e então todas as outras classes são apenas para styling. Então, dessa forma, eu sei que posso fazer tantas alterações no meu CSS quanto eu quiser, e eu não vou quebrar o JavaScript. Então, isso é uma lição avançada, mas eu vou em frente e te contar. Está bem. Então, você vai começar a codificar suas páginas de demonstração, e vai ser realmente tentador entrar e começar a estilizá-las, mas focar em colocar todos os elementos na página. Então, escrevendo sua marcação, descobrindo como o conteúdo deve ser codificado e qual a ordem que ele deve entrar na página. Então, é útil olhar para seus wireframes móveis para descobrir em que ordem os elementos HTML precisam entrar, e então entraremos em um estilo responsivo em breve, e descobrir como colocá-los lado a lado nos layouts maiores. Então, inicie suas páginas HTML marcando seus contêineres que podem ser seções, artigos, divs ou outra coisa. Você vai adicionar seus textos, seus títulos, seus parágrafos, suas listas, e você marcará sua mídia. Então, imagens, vídeos, áudio, qualquer outra coisa que esteja em seus layouts, e continue se comprometendo e empurrando para o Github enquanto você vai apenas para a prática, ou se você está colaborando com outras pessoas. 6. Flexibilidade: Meu próximo passo é tornar esses modelos responsivos, que todos possam ver como o conteúdo fluirá novamente em dispositivos diferentes. Para fazer isso, vamos precisar do Sass para que possamos usar a grade Bourbon Neat. uma vez, A Book Apart nos dará uma ótima visão geral. Vemos recursos como aninhamento; para manter seu código organizado, classes dependentes podem ser armazenadas dentro de suas classes pai. Variáveis para evitar encontrar e substituir, você pode escrever um arquivo de configuração para cada site que atua como um tema, você possa ter as cores e tamanhos exclusivos para esse site tudo em um só lugar, e então apenas usar essa variável que começa com o cifrão em todos os outros lugares em sua página em seu CSS. Também Mixins para lidar com lógica complexa, ou para evitar escrever CSS longos recuo como prefixos de fornecedor. Por exemplo, podemos apenas passar um valor de 10 pixels para que este mixin raio de borda de uma linha, e ele irá gerar as quatro linhas de CSS e nosso arquivo final. Nós não temos que escrever todos os nossos próprios mixins, podemos usar bibliotecas para o material comum, então ele é atualizado quando os navegadores fazem. Os arquivos Sass podem ser divididos em parciais, então você não precisa rolar para cima e para baixo um arquivo CSS de 3000 linhas procurando algo. Em seguida, você compilá-los, linguagem de extensão CSS do Sass, então precisamos de um compilador para transformá-lo em CSS real. Esta é outra vitória para Hammer. Você pode compilar o Sass com JavaScript no servidor, mas isso é um pouco mais lento para seus visitantes. Você pode usar um aplicativo chamado Codekit que é realmente ótimo, mas Hammer novamente nos ajuda apenas usar número possível de ferramentas que irá compilar nosso Sass para nós. Então, aqui está um exemplo de arquivo de configuração que é basicamente, um tema para o nosso site. Aqui está uma paleta de cores de amostra, e podemos definir nossas variáveis para nossa grade como o número de colunas e todos os tipos de coisas. Então, olhe no exemplo o modelo de demonstração e veja como um arquivo de configuração se parece. Você deseja manter seus arquivos organizados. Então, as pessoas fazem isso de maneiras diferentes, mas, minhas pastas para prototipagem são um arquivo base, desculpe-me, uma pasta base onde você verá seu arquivo normalizar e também este arquivo de configuração que mencionei com todas as suas variáveis de tema. Então eu tenho uma pasta de todos os meus mixins que são, podem ser as bibliotecas, a grade e qualquer um dos meus mixins personalizados que eu estou escrevendo. Então eu tenho uma pasta de todas as minhas parciais esta é de longe as maiores pastas, e às vezes ele é dividido em múltiplo pode ser seu cabeçalho, seu rodapé, eu também incluir meus estados aqui então está quebrado, desculpe-me, é um erro, está ligado é fora desse tipo de coisa, e então há a pasta plugins para que coisas como fitbits ou plugins jquery, que podem ser removidos mais tarde, é bom ter esse CSS dividido, então você não novamente você não tem que rotear através do comprimento do seu arquivo CSS para cada estilo particular, mas é tudo em um só lugar.Então, então você apenas importar todas essas parciais diferentes, usando seu style.scss então é assim que alguém tende a olhar. Então, primeiro eu importo minha base, configuração de modo que é este reset normalizado e, em seguida, minha configuração em minhas variáveis, então eu importar todas essas bibliotecas e mixins que eu vou usar um todos os meus parciais diferentes. Então eu estou importando minhas parciais diferentes, e a ordem em que você importá-los é importante. Portanto, as coisas que você está importando mais tarde não estão disponíveis para parciais que são importadas antes. Então, você quer fazer todos os seus elementos base como sua tipografia precisa vir primeiro, e então você pode usar esses estilos tipográficos em digamos seus botões, ou seus menus que são chamados mais tarde. Então meu último é todos esses plugins novamente, esses complementos que podem ser removidos mais tarde. Para atualizações sobre Sass e CSS e todas essas coisas seguem Chris Coyier CSS-truques é seu site, e ele é realmente vanguarda em todas essas coisas. Em web design responsivo e os requisitos lá. Nossa leitura de fundo aqui é feita pelo Sr. Ethan Marcotte, que é um grande amigo para seguir no Twitter também. Ele vem deste requisito de ou este fato que não podemos projetar para definir tamanhos são proporções mais. Não podemos mais projetar apenas para os usuários da Apple. Quando os smartphones estavam saindo por um tempo nós somos como oh! Então, agora só precisamos, estilos de iPhone e depois estilos de iPad e desktop e agora há todo tipo de pessoas com todos os tipos de tablets e smartphones, então temos que ser um pouco mais criativos. Então, uma coisa que ajuda é algumas pessoas juntarem o que é chamado de abordagem Cachinhos Dourados. Que é apenas a maneira independente do dispositivo de olhar para o web design responsivo. Então, você pensa em layouts pequenos, médios e grandes ou uma única coluna, duas colunas, multi-colunas, que é um bom começo. Então, se você quiser ficar mais granular, pense nisso como layout de conteúdo. Onde, você está tentando fazer esses pontos de interrupção, você está tentando fazer esses layouts com base nos detalhes do seu conteúdo. Então, um site com muitos artigos de texto é realmente diferente de um site com muitos vídeos, então você quer separar pontos de interrupção, não baseados no iPad, mas com base em quando seu vídeo não tem mais resolução maior, ou Que seja. Então, você vem com esses pontos de interrupção começando pequeno. Você começa com seus layouts móveis, seu código móvel e, em seguida, você amplia a janela até que você comece a vê-lo parecer ruim, e, em seguida, você adiciona um ponto de interrupção e, em seguida, você repete. Então, o que quer dizer com “mau”? Então, este artigo sobre layout de conteúdo, é uma boa referência dos caras que fizeram Gridset. Fala sobre você obter esses padrões como setes onde a legenda associada está pendurada fora da imagem e não é realmente, olhando agradável ao lado dele mais. Deriva com as coisas de espaço em branco, você vê que as imagens na coluna esquerda estão fazendo um bloco vertical forte, mas, eles devem realmente ser mais associados com o conteúdo à direita deles. Em seguida, aperta onde suas margens ou suas calhas começam a quebrar, então você vê que muitas das manchetes e imagens não está claro o que está associado com o quê. Então, é aí que você começa a dizer, “Oh, precisa haver um ponto de interrupção” ou “Oh, esse layout não está mostrando meu conteúdo”. A outra coisa a olhar, é o comprimento da linha. Se o texto estiver se estendendo por toda a página, 45 a 75 caracteres é considerado ideal, 90 caracteres ainda estão bem, para leitura rápida, mas, quando ele fica muito longo, um ponto de interrupção melhoraria o legibilidade. Então também se você tem um único layout de coluna e você continuou esticando este mais amplo e mais largo, obviamente que espaços subutilizados, e você poderia uma vez que você tem espaço suficiente, flutuar esses itens de navegação ao lado do outro e obtenha mais conteúdo na tela para o visitante. Então, é quando você adiciona pontos de interrupção. Então, você vê layout algo assim, com grades. Você nem sempre tem que usar grades em web design, mas, quando se trata de desenvolvimento e especialmente desenvolvimento responsivo, eles tornam as coisas muito mais fáceis, basta então fazer esses contêineres e esses modelos responsivo em vez de fazer você saber 100 itens individuais diferentes na página responsiva. Então, a maneira que você adiciona pontos de interrupção é através de consultas de mídia CSS. Eles se parecem com isso, é apenas geralmente lá na parte inferior de um arquivo CSS e, basta começar com @media e, em seguida, você definir seu parâmetro pode ser min-width ou max-width, eu vou falar sobre a diferença, e Então você só diz que quando chegar a 768 e mais alto você sabe que eu quero mudar esse bloco para ser mais estreito. Então, por padrão, um bloco teria 100 por cento de largura, então você diria que neste ponto eu quero descer para 75, neste ponto eu quero obter menos de 50 ou, no entanto, você está planejando seus layouts. Mas também podemos fazer consultas de mídia como, ou pontos de interrupção como mixin Sass. Nós também podemos fazer breakpoints como um mixin Sass. Então isso se parece com isso, é um pouco esmagador em cima, mas muito útil quando você está implementando em todo o arquivo. Então, definimos uma função chamada ponto de interrupção e passamos uma variável chamada ponto, e então você pode ver mais tarde há outro espaço reservado que é conteúdo. Então, em todo o nosso CSS em nossa classe de exemplo de introdução traço herói aqui, diríamos incluir este mixin de ponto de interrupção e passaríamos a variável de meio, e então nosso conteúdo é que a largura é igual a 75. Então, configurando este mixin multi-linha no início, podemos ter apenas mixins muito claros e simples mais tarde. Então, uma delas é que há alguma discussão sobre, se não há problema em colocar consultas de mídia dentro de classes como esta. Ele faz o CSS compilado um muito mais longo, mas na minha experiência é muito mais fácil de manter e é melhor porque o estilo de respostas não é esquecido. Especialmente para sites com plugins, é quando você remove esse plugin mais tarde muitas vezes há CSS legado espalhado por todo o arquivo e se você tem tudo dentro da mesma classe você tem certeza de que você está mantendo as coisas limpas. Então, siga Ethan Macrcotte novamente no Twitter, ele escreveu sobre isso e veremos quais são as últimas práticas. Ok. Então, agora que temos tudo configurado, podemos usar nossa grade que é Bourbon Neat. No site Bourbon Neat, você pode ver alguns exemplos, então aqui está um layout de exemplo. Então, você vê que o nosso recipiente div só precisa deste mixin uma linha de include outer-container. Então, se quiséssemos fazer duas colunas abaixo disso, nós apenas adicionaríamos esta linha de incluir span-columns e seis de 12 colunas, é uma grade de 12 colunas. Em cada uma dessas duas classes e eles simplesmente flutuavam um ao lado do outro, e você pode colocar qualquer número, então de um a 12 lá dentro. Então você só precisa colocar o último na coluna da mão direita que você gostaria de colocar incluir omega apenas para limpar a margem em que última div. Então, isso se parece com isso, em seu CSS. Novamente o recipiente tem que incluir de contêiner externo e para mim, Eu vou remover todas as calhas na minha grade, então eu vou usar este incluir linha igual tabela. Então minha imagem de herói à esquerda, eu vou dizer que vai ser largura total no celular, e vai ser largura total no tablet. Mas uma vez que eu começar a gostar do ponto de interrupção da área de trabalho que eu chamo de grande, eu vou dizer vamos apenas usar oito dessas 12 colunas vamos torná-lo dois terços da largura da página. Dessa forma, eu vou ajustar meu blurb à direita, modo que recebe a inclusão de span-columns de quatro, então é um terço da linha. Então eu também dou o intro-blurb este incluir de omega assim, uma vez que é a última seção nessa linha. Então, vá aos documentos Bourbon Neat para ver os detalhes. Novamente, é mais uma coisa a aprender, mas na minha experiência é super, é a maneira mais simples de fazer grades, é semântico, mantém todas as suas classes de grade em seu CSS, vez de tê-las espalhadas por toda sua marcação, como alguns frameworks e torna responsivo fácil de refluxo layouts. Você deve ter notado antes que eu fiz min-width em vez de max-width em minhas consultas de mídia, e isso vem de uma abordagem Mobile-first. Luke Wroblewski tem contribuído muito para esta ideia, e é realmente útil porque uma abordagem Mobile-first, cria menos CSS neles porque, você está usando o layout mais simples como sua base. Então, você não precisa de flutuadores em um layout móvel se você estiver em torno um layout único e, portanto, você só está adicionando-os se precisar deles em layouts maiores, então, no final, ele cria menos CSS. Isso força discussões de otimização porque você está lidando com telefones e você está pensando sobre o carregamento de páginas e tamanhos de ativos. Você está usando essa abordagem de aprimoramento progressivo, que começamos com o ambiente mais simples possível, e então adicionamos coisas para dispositivos mais e mais capazes, versus essa antiga metodologia de degradação graciosa. Ele também reconhece a realidade de que mais e mais pessoas estão nos telefones. Usuários globais tendem a além dos telefones, então se continuarmos pensando em nossos sites como sites de desktop onde estávamos um pouco equivocados. Novamente, o layout de uma coluna móvel primeiro força você a resolver sua hierarquia de informações, colocando as coisas em uma ordem linear. Então, com tudo isso, vamos fazer o nosso estilo Responsive. Então, vá para seus modelos, torne-os responsivos adicionando essas consultas de mídia. Não se preocupe com tipografia ou cores ainda, é realmente tentador ir em frente e fazer as coisas fáceis de preencher fundos, e preencher tipos de fontes, mas tente fazer essas coisas complicadas para que você possa fazer o seu protótipo fluir novamente. Novamente eu lhe dei um modelo de exemplo para arquivos Sass, então ele deve ir um pouco mais suavemente. Então, configure seu estilo de Respostas. 7. A coragem: Está bem. Agora, vamos colocar todos os pedaços de conteúdo em nossos layouts. As ferramentas que você precisará dependerão muito do seu design, mas darei uma visão geral dos principais jogadores. A primeira coisa é a tipografia. Você costumava cortar cada manchete chique como uma imagem, mas um monte de empresas agora descobriram as complexidades técnicas e de licenciamento de fontes na web. Então, espero, seus modelos foram projetados com fontes que têm versões de fontes web disponíveis. Typekit foi um dos primeiros e melhores. O kit é fácil de configurar e informa o quanto cada fonte irá adicionar ao tamanho do arquivo. Eles fornecem todos os CSS de exemplo, e você pode mudar de idéia e mudar de fonte mais tarde, se quiser. Google também é super simples, e dá-lhe uma boa sensação do peso da página com seu pequeno discagem rápida. Como o Typekit, você só tem uma linha de JavaScript que você cola em seu cabeçalho e, em seguida, você tem o exemplo de CSS que você usa em seus arquivos Sass ou CSS. Font Squirrel é outro site realmente útil. Você pode gerar todo o código que você precisa para hospedar arquivos de fonte você mesmo, e é bom para encontrar ou carregar e converter fontes de fonte aberta. Os ícones também ficaram muito mais fáceis. Se você estiver usando um conjunto de ícones que você comprou ou baixou online, normalmente , dividi-lo como imagens ou agora você pode transformá-lo em fontes de ícone. Você pode alterar o tamanho, a cor e outras propriedades CSS sempre que quiser. Eu tenho desenhado com Symbolset, que tem muitas famílias de ícones ótimas, e faz essa coisa mágica onde você digita a palavra, como amor, e a transforma em um ícone, um coração. Isso é verdade para modelos e código, por isso é rápido e semântico. Quando você compra a fonte, ela virá com o CSS de exemplo que você precisa. Um iCoMoon é muito divertido se você quiser criar sua própria fonte ícone. Trabalhei em um site chamado Riffle, onde fiz uma fonte personalizada para nossos 20 ícones. Você também pode encontrar e usar ícones de código aberto lá, e você pode baixá-los, modificá-los e, em seguida, recriá-los se você quiser, novamente, montar sua própria fonte de ícone. Há também um formato vetorial que funciona na web, SVG. Então, você pode fazer gráficos vetoriais e ilustrador de esboços e usá-los na web. Isso é ótimo para telas HD e tamanho de arquivo. Então, basta seguir o tutorial e truques CSS se você quiser fazer isso. Quanto aos vídeos, vídeos responsivos são realmente muito simples. Normalmente, você não está hospedando o arquivo de vídeo em seu próprio servidor usando o Vimeo ou o YouTube, modo que você não está lidando com todos os problemas de largura de banda, mas ainda precisa descobrir como torná-lo responsivo. Mas, novamente, é bem simples porque há realmente apenas uma opção principal. É um plugin incrível chamado Fitvids. Então, basta baixar o arquivo, adicionar o arquivo JavaScript à sua pasta de ativos e, em seguida, chamá-lo de suas páginas HTML e aplicá-lo ao seu modelo de vídeo. As imagens são provavelmente a parte mais demorada da exportação de ativos. Talvez o designer esteja fornecendo fatias ou talvez o desenvolvedor queira que os arquivos de origem apenas tomem essas decisões por conta própria. Mas, quem quer que esteja fazendo isso, é claro, você quer que as imagens sejam o mais pequenas possível, mantendo a melhor qualidade possível. Portanto, a paleta Salvar para Web no Photoshop é o local padrão para fazer isso. Você pode ver aqui a visão de quatro para cima, onde você vê o original no canto superior esquerdo e você pode julgar se você pode conseguir com este JPEG no canto inferior esquerdo, que é menos de um décimo do tamanho, ou precisamos da cor completa qualidade do PNG no canto superior direito, que é apenas metade do tamanho. Então, você toma essas decisões aqui e você pode ajustá-las como quiser. Eu não me preocupo com imagens de retina para prototipagem, mas se você está fazendo um site de verdade, você vai querer olhar para ele. Você também faria isso aqui. Você exportaria JPEG com o dobro do tamanho para a tela HD, e você pode conseguir com 40 por cento de qualidade nisso. Mas, novamente, olhe para ele. Eu, normalmente, estou fazendo protótipos para sites menores e não para sites prontos para retina. Se você estiver otimizando para carregamento de página, também será necessário considerar Sprites CSS. Aqui está um exemplo do arquivo de resultados de pesquisa do Google. Cada gráfico na página faz parte desta imagem. Então, o navegador do usuário só precisa fazer uma chamada telefônica para o servidor e não 30, que é uma grande economia no tempo de carregamento da página. Existem ferramentas para ajudar você a criar e manter esses sprites porque é uma espécie de dor. Se você estiver trabalhando no Sketch, você pode exportar os PNG apenas arrastando e soltando qualquer arquivo, qualquer camada no Finder, e ele exportará essa camada como uma fatia PNG. Ou, você pode clicar na camada, e se você ver no canto inferior direito, havia um botão que diz Tornar exportável e, em seguida, ele vem com essas opções que você pode definir configurações de exportação específicas. Então, o Sketch é realmente ótimo quando você está fazendo a transição para a construção do site. Então, novamente, no Photoshop você faria Save for Web ou você também pode tentar este aplicativo chamado Slicy, que irá gerar fatias automaticamente de todas as suas camadas. Sketch é ótimo por causa do “arrastar e soltar” e também as configurações específicas, e usar e salvar todas essas imagens em seus ativos barra pasta imagens. Se você estiver fazendo imagens responsivas, você precisa pensar em duas partes; elas estão dimensionando a imagem e, em seguida, estão servindo. O dimensionamento é apenas definir a largura e as porcentagens da imagem. Então, isso é bastante simples. Mas se você estiver sendo gentil com seus usuários móveis, que não precisam dessa imagem de herói de alta resolução, você também servirá uma versão menor de cada imagem. É como Fitvids em que, há uma maneira real de fazê-lo neste momento, embora a tecnologia esteja mudando enquanto falamos. Então, isso é chamado Picturefill, e é outra combinação HTML, CSS, JavaScript, onde você simplesmente segue as instruções e cola o código apropriado em suas páginas. Mas este vai realmente se tornar parte da linguagem HTML no futuro, então você está aprendendo com antecedência. Caso contrário, você só vai exportar suas imagens para tamanhos de desktop e usar porcentagens para reduzi-las e deixar todos os usuários móveis muito tristes quando eles recebem suas contas de largura de banda. Então, vá em frente e faça isso. Prepare seus ativos, selecione seu serviço de fonte da Web e adicione esse script ao cabeçalho da página para que você possa começar a usar o CSS na próxima lição. Você fará o mesmo para qualquer fonte de ícone que deseja usar e, em seguida, exporte todo o resto de suas imagens no tamanho da área de trabalho. Use SVGs onde você pode e tente otimizar tudo o resto como JPEGs ou PNGs se você precisar deles. 8. A pele: Ok, agora, nós finalmente vamos nos deixar realmente entrar no estilo de nossas páginas. Então, nossa leitura de fundo para isso seria o livro CSS3 de A Book Apart. Mais uma vez, queremos pensar sobre módulos e como isso pode se aplicar ao estilo. Então, queremos lembrar que os sites são feitos de sistemas. Então você não tem apenas um milhão de pedaços de texto diferentes. Você tem um H1, ou um H2, ou um H3. Então, você deseja codificar esses primeiro e, em seguida, fazer o menor número possível de variações. Então, nem todos esses milhões de estilos individuais, mas sistemas modulares de estilos. Então, em cada uma das suas parciais, por exemplo, o seu menu parcial, você quer ir de geral para específico. Então, primeiro você faz seus estilos base para todo esse elemento ou a classe padrão para esse elemento, então você faz seus estilos modulares. Então, essas são as peças reutilizáveis que você terá em diferentes páginas e modelos, e então, você entrará nos modelos específicos da página se você tiver algo que seja um layout personalizado. Então, sempre pense em como você pode fazer algo um estilo modular em vez de um estilo único. Então, a começar. Você tem um site que pode ser parecido com isso. É responsivo, mas talvez as grades ainda não sejam perfeitas e você não tem nenhuma configuração de estilo. Mas o código parece melhor. Se você tem organizado, recuado, você pode ver que temos nossos nomes semânticos lá. Está tudo pronto para ser estilizado. Então, esta parte será muito rápido se configurarmos nossa marcação e capacidade de resposta corretamente. Então, você só vai selecionar cada um desses elementos para linha promocional ou a div de retiro promocional e, em seguida, passar e aplicar todas as propriedades que ele precisa. Assim como html, é um grande vocabulário que você pode construir. Estas são todas as letras que você pode usar, e você só vai usar as principais para começar, fundo, borda, cor. Mas há alguns novos como flexbox que estão chegando que vão tornar sua vida muito mais fácil, então é por isso que é divertido continuar aprendendo isso. Novamente, Coda tem livros embutidos. Então, se você não tem certeza de como o bloco de exibição ou o display inline funcionam, ou o display inline-block, você pode simplesmente procurá-lo ali, ou, claro, você deve estar sempre pesquisando. Você pode usar sites como eu posso usar para saber quais são os retornos do navegador e o quão novo essa propriedade é. Em seguida, você também pode usar vários tipos de seletores para ser mais específico. Então, você provavelmente já viu um foco de dois pontos ou dois pontos para indicar um link que foi selecionado ou link que está sendo pairado. Mas há todos os tipos de outros pseudo-seletores onde você pode fazer nth filho para pegar cada terceiro item em uma lista, ou último filho se você quiser esconder a borda inferior em algo, em uma lista de itens. Então, novamente, continue aprendendo isso. Eles podem tornar sua vida muito mais fácil. Há também algumas novas ferramentas para ajudar a converter seus arquivos fonte em código. Se você estiver usando o Photoshop, há o Project Parfait, uma novidade da Adobe, onde você carrega o PSD e ele lhe dará o CSS para cada elemento. Em seguida, no Sketch, você pode selecionar qualquer elemento e copiar o CSS, clicar com o botão direito nele e você receberá um painel Copiar CSS, e então isso lhe dará algo assim. Você vê à direita, ele me disse a família de fontes, o tamanho da fonte, a cor, e eles fizeram isso em RGBA porque é semitransparente, e depois a altura da linha. Então, ele dá-lhe o básico e, em seguida, você pode construir a partir daí. Uma coisa a saber sobre CSS é que, ainda há algumas discrepâncias em muitos navegadores. Então, normalmente, você teria que colocar diferentes prefixos em propriedades como border-radius como para Mozilla, ou para Opera, ou para todos os outros navegadores principais. Isso parece algo assim. Para WebKit, aqui está a versão da propriedade de animação da propriedade de fundo. Então, parece muito tedioso. Então, temos mesmo que fazer tudo isso? Felizmente, não e esse é outro benefício do Bourbon. Então, quando você usa esses mixins, novamente, você pode apenas usar um mixin de uma linha e passar a variável para seu raio de fronteira e, em seguida a biblioteca irá gerar todos os prefixos de fornecedor em seu CSS conforme necessário, e a melhor parte é que, quando os navegadores alteram seu código ou quando você não precisa mais fazer prefixos de fornecedor, o mixin é atualizado, então você não precisa manter o controle de quais prefixos de fornecedor ainda são necessários ou não. Você pode confiar na biblioteca para cuidar disso. Novamente, CSS-Tricks lhe dará algumas outras opções. Eu uso Bourbon. Eu uso uma biblioteca. Mas existem algumas ferramentas como Grunt ou Autoprefixer se você estiver criando aplicativos mais complexos que você pode usar. Então, sim, continue aprendendo CSS. Há muitos recursos online. Há todas essas consultas de mídia fazem parte dessas regras de aplicativo, fonte de rosto quando você está fazendo fontes da web, que faz parte dessas regras de aplicativo, então por que não aprender o resto desses, e então pseudo elementos são onde você pode fazer um muitas coisas legais onde você pode realmente em seu CSS colocar conteúdo em seu html. Então, se você quiser adicionar um ícone na frente de um link, você pode fazer um pseudo antes do elemento e, em seguida, estilizá-lo com sua fonte web e adicionar um ícone. Novamente, isso é CSS, ele pode ser colorido e dimensionado, tudo sem alterar sua marcação. Então, a Mozilla Developer Network tem um ótimo manual de referência CSS, então você pode conferir isso. Depois disso, podemos pensar em mais efeitos. Ao entrar em animações, transições e outros tipos de efeitos ao longo do tempo, lembre-se das diretrizes da sua marca. Então, se as coisas estão apenas aparecendo ou deslizando, ele deve ser consistente com a personalidade inicial que você definiu para sua marca e, idealmente, seu designer seria estilo guiando isso também. Embora, muitas vezes é esquecido. Então, eu uso jQuery principalmente. Esta é a biblioteca de animação mais popular. Tem sido em torno de sempre e por isso, se há praticamente tudo o que eu quero, eu geralmente posso encontrar em jQuery apenas fade in e out simples para camadas pairar. Às vezes alguns deslizam para baixo ou deslizam para cima. Se você vir um site de página única e ele está fazendo um rolagem para efeito onde há um nav superior e você clica e ele rola metade da página, isso geralmente é feito com jQuery. Então, este é o lugar onde você pode simplesmente ir e pesquisar o campo aqui para encontrar qualquer efeito específico que você precisa. Há também, para alguns dos fatos comuns, há tutoriais ou bibliotecas que foram criados juntos. Então, a tendência do Parallax que estava circulando com esses sites de página única, onde a camada frontal e a camada traseira rolavam em taxas diferentes e criavam esse efeito de videogame, chamado Parallax. Há demos baseados no Nike Better World original, o primeiro site que fez isso. Então, você pode olhar para bibliotecas e sistemas de arquivos para ajudá-lo a fazer esse tipo de coisas, ou coisas como este layout em grade que é usado no Pinterest e em outros sites. Isso foi desenvolvido por David DeSandro. Era originalmente o plug-in da Maçonaria e ele agora tem um casal, há Isotope e Packery. Então, você pode olhar para essas bibliotecas JavaScript e isso lhe dará a capacidade de fazer layouts complexos. Este é um onde, assim como Bourbon precisa, ele faz uma grade fácil, mas com alvenaria ou isótopo ou Packery. O Packery permite arrastar e soltar esses elementos em outras seções. O isótopo permite que você os filtre para que você possa clicar e observar o fluxo de grade com base em seus critérios de classificação. Então, isso só lhe dá uma interatividade mais complexa. Então, isso pode ser outra classe inteira em si. Então, comece a investigar um pouco disso se estiver interessado. Então, a partir daqui, basta entrar e começar a estilizar suas páginas. Um começo com as propriedades CSS para seus contêineres, e seu texto, e seus ativos principais, e adicionar algumas respostas estilo para cada ponto de interrupção, como mostrado em suas maquetes. Lembre-se de ir de geral para específico. Então, tente fazer aulas universais tanto quanto você puder, e depois classes modulares e, em seguida, último recurso é aulas individuais. Então, divirta-se. 9. Teste: Ok, nós estamos na reta final sobre isso e agora para a parte favorita de todos que é testar. É muito importante voltar atrás nos requisitos do seu projeto e lembrar o que você concordou em quais dispositivos devem ser suportados, quais navegadores devem ser suportados, porque é realmente diferente entre plataformas e dispositivos. Assim como construir, o teste nos torna melhores designers porque entendemos que nem todos estão em um iPhone e entendemos o quão diferentes são todas as proporções e interfaces diferentes e isso nos torna melhores designers. Então, Jacob Nielsen fala sobre usabilidade e como você continua iterando cada vez que você testar você provavelmente vai corrigir algo ou mudar a interface um pouco e isso é uma iteração. Então, à medida que você faz isso, você vai encontrar todos os tipos de bugs e coisas onde as pessoas não estão vendo coisas ou eles não estão funcionando como esperado ou ele não funciona nesse dispositivo específico e então você vai se livrar de tantas interações bugs que só existe porque os sites são um meio complexo e eventualmente você vai chegar a um lugar onde você começa a reconceituar a interface que você percebe que o modelo mental do usuário talvez seja totalmente diferente e você pode reconstruí-lo de uma maneira diferente e agilizar as coisas. Então, é algo que será um processo contínuo de construção e teste e construção e teste. Então, se você tentar testar dispositivos diferentes, idealmente você está testando em dispositivos reais, mas nem todos temos um milhão de telefones. Você pode ter um ou dois telefones antigos ou você poderá pedir emprestado alguns de amigos mas empresas maiores manterão um laboratório de dispositivos inteiro internamente. Porque há muitos emuladores, mas eles não processam o código exatamente da mesma maneira. Então, se você realmente está fazendo uma codificação adequada, você vai querer ter acesso a um laboratório de dispositivos. Então, a primeira coisa é que você pode começar a pensar sobre as diferentes larguras. Então, podemos parar em 320 porque é onde os iPhones estão, mas alguns dispositivos são ainda mais estreitos, então podemos olhar para eles e aqui está uma coisa simples que Matt Kersley construiu sobre ele apenas tem todos na mesma janela, então você não precisa ir para dispositivos diferentes, mas você pode pelo menos ver alguns pontos de interrupção para o seu layout lado a lado e começar a fazer alguns planos lá. Você também pode usar o Edge Inspect se quiser ser um nível mais sério. Isso permite que você configure um perfil que funcione em qualquer tipo de dispositivo vinculado a ele. Então, você pode usar suas ferramentas de depuração em qualquer uma dessas plataformas e é um pouco de configuração, mas é uma ferramenta muito útil se você está tentando lidar com o universo de dispositivos que estão lá fora. Então, é claro, navegadores. A pilha do navegador é a minha principal ferramenta onde você pode fazer login em uma máquina virtual. Assim, você pode fazer login no Internet Explorer, versões mais antigas e até mesmo o Firefox parece diferente em todas as plataformas. Então você realmente precisa fazer um monte de testes e novamente isso realmente depende se você está prototipando e quão seriamente você está prototipando ou se você está preparando um site para um lançamento, é muito diferente quanto trabalho você tem que fazer Aqui. Então, esta ferramenta permite que você realmente navegue em uma máquina virtual que é útil se você não tem acesso aos sistemas reais. Mas, para mim, o principal teste que estou fazendo é também com usuários. Novamente, todos nós temos esse Malkovich Bias onde é realmente difícil, todos nós imaginamos que as pessoas usam a Internet exatamente da mesma maneira que nós fazemos. Eu falei muito sobre testes de usuários na primeira classe desta série. Mas, por enquanto, vamos apenas dizer que neste ponto no processo usertesting.com é a ferramenta mais útil que você pode enviar, você postar uma série de tarefas e, em seguida, você pode escolher a partir de seu pool de testadores e você pode especificar idade, habilidades, uma plataforma em que eles estão, é como US $40 por teste, vale a pena e então você pode reproduzir o vídeo do teste em como 150 por cento, como 1,5 velocidades para que você possa vê-los mais rápido, leva um tempo se você estiver fazendo uma tonelada de testes normalmente você quer testar como três, cinco pessoas em cada iteração, mas você pode acelerar a reprodução. Parece algo parecido com isso que você passa e no canto superior direito da página você vê este usuário a primeira metade que nós demos a eles e nós podemos escrever comentários, podemos carimbar as notas à direita para nós voltar como estamos revisando os testes. Então, esta é absolutamente uma ferramenta inestimável quando você está fazendo quando você está no meio do desenvolvimento e quando eu trabalhava no desenvolvimento ágil nós fazíamos testes de usuários cada sprint único. Então, criaríamos algo e enviaríamos algumas pessoas através dele, que nos permitissem testar em várias plataformas e ver como ele realmente parecia e como os usuários estavam realmente entendendo as coisas. Nós faríamos isso em cada corrida. Então, a maneira que você prep teste de usuário é com cenário. Então, novamente eu passei por isso em detalhes na classe de planejamento desta série mas você basicamente apenas identifica as histórias de usuários mais importantes, como um usuário que retorna está tentando entrar em contato com suporte e então você as frase como cenários para o teste. Então, isso ajuda a pessoa que está fazendo o teste a se colocar nessa mentalidade. Então você diria, você encontrou um erro em sua conta e você precisa contato com o serviço de atendimento ao cliente e, em seguida, você pode fazer particular, há todos os tipos de testes sobre o que você vê primeiro nesta página ou onde você iria para ver como eles estão interpretando seus layouts e seu site. O último tipo de teste no qual realmente se concentrar é o carregamento da página. Se você está nessa e otimizando a velocidade e novamente para protótipos, nem sempre é uma variável, mas para locais de produção é uma variável enorme. Então, veja Paul Irish fez uma ótima palestra explicando a carga da página e como ela funciona e realmente faz você entender como a Internet realmente funciona. Que as coisas que afetam o quão rápido seu carregamento de página em ordem de importância são número um essa coisa chamada índice de velocidade que é o quão rápido o material acima das cargas dobra. Você realmente quer otimizar, você pode fazer como técnicas loucas para inline seu CSS apenas para as coisas acima da dobra como técnicas realmente avançadas se você está realmente ficando sério sobre essas coisas. A segunda coisa é que você quer reduzir o número total de solicitações, como falamos com imagens, cada arquivo que você está vinculando é como uma chamada telefônica para o servidor. Então, é por isso que você faria um sprite CSS porque é uma chamada telefônica em vez de 50. Então, reduza o número de solicitações que você está fazendo e, em seguida, é sobre o tamanho da transferência de imagem. Então, é claro que a otimização de imagem é enorme, você quer cortar seus jpegs, cortar suas fotos o máximo que puder, mantendo a qualidade e que é sobre o tamanho total da transferência. Então todas as outras coisas que seu JavaScript, seu CSS, eles somam, eles são muito menores que imagens, mas eles somam e, em seguida, o número de solicitação de imagem. Então, novamente, CSS sprites esse tipo de coisa. Então, isso é novamente, para realmente se você está indo pro seu site, para prototipagem isso apenas é divertido saber porque ele ajuda você a entender a Internet, mas você pode não estar gastando muito tempo nele para um processo rápido. Então, as principais ferramentas para isso são você ir YSlow, é o melhor e é só que você pode fazer como uma extensão do Chrome ou um marcador nele e basta clicar no botão e ele vai analisar o seu site e , em seguida, é claro, as ferramentas do Chrome Dev, mergulhar nisso e você pode ver linhas de tempo de quando cada elemento na página é carregado e, em seguida, há também um site chamado teste de página web que vai passar e fazer uma análise para você. Então, YSlow apenas se parece com isso e é divertido fazer apenas porque novamente ele dá a você uma sensação de como a Internet funciona que ele está me dando um erro esta é uma análise de twitter.com e está dizendo que até mesmo Twitter recebe um F. Supostamente, eles não estão usando uma rede de entrega de conteúdo ou eles não estão usando cabeçalho expira. Então, dá-lhe um sentido novamente, um vocabulário para a linguagem técnica da Internet, o que é bastante interessante. Então, passe e descreva seus testes, volte aos requisitos do projeto e faça um plano para quais dispositivos você precisa testar e como você vai obter um porão desses dispositivos ou dispositivos virtuais, quais navegadores você vai testar e, novamente, como você vai fazer isso, quais testes de usuário você quer fazer. É sobre um certo fluxo que você quer fazer? É sobre ver como essas telas funcionam em diferentes plataformas? Mais uma vez, execute alguns testes de velocidade apenas por diversão e, se você estiver trabalhando na otimização do seu site, volte e trabalhe para tornar seus ativos menores e mais concisos. 10. Documentação: Ok. Estamos na etapa final do nosso processo de desenvolvimento Web, que é a documentação, e sim para os outros, mas definitivamente para si mesmo. Isto é essencial. A coisa número um são os comentários. Você vai agradecer muito a si mesmo quando você vai editar seu site daqui a um mês e seu código é bem comentado e é fácil descobrir quais classes se aplicam a quais seções e quais páginas. O grande teste, porém, é que alguém pode ler e usar o seu código. É muito raro que um site seja trabalhado apenas por uma pessoa. Então, quase sempre vem alguém mais tarde. Especialmente se é um site cliente e eles precisam ser capazes de entender como o site funciona. Comentar seu código é outra coisa que separa desenvolvedores profissionais de amadores. Você não precisa se preocupar em adicionar muito volume aos seus arquivos e no Sass especialmente, você pode fazer os comentários de linha única que são apenas linhas que começam com duas barras e aqueles serão retirados do CSS compilado. Então, quando você abrir o arquivo Sass, eles estarão lá para ajudá-lo, mas o CSS não aumentará de tamanho. E então há também os regulares que estão entre as barras com o asteraX e esses são comentários multi-linha. Eles serão preservados, então se você quiser ter alguma coisa importante sobre suas fontes, ou sobre suas seções, para ainda aparecer no CSS, tudo bem, mas novamente os usuários realmente também. Ele realmente não adiciona muito e o tamanho do arquivo, e você pode até mesmo definir o seu minificador para tirar todo o espaço em branco e tirar todos os comentários também. Então, você não precisa se preocupar em adicionar muitos comentários basta escrever todas as suas notas lá como loucos. Então você definitivamente quer entrar e preencher seu arquivo Leia-me. Então, você pode ver aqui eu voltei e lhe disse quais pastas estão nesta demonstração, repositório e na minha conta do GitHub, há um modelo, há um padrão e então eu estou trabalhando nesse site de demonstração. Então, volte e preencha isso. Então, é fácil entender novamente por si mesmo e para os outros, e o próximo nível é fazer um guia de estilo. Então, isso irá atendê-lo bem como o site cresce. Se você planeja que isso fique maior, então você pode querer considerar um guia de estilo, e isso é necessário porque não estamos projetando um elemento estático. Poster, é como se estivesse tudo trancado, você envia um depressivo, está feito, e um livro que você tem que ser um pouco mais sistemático, você quer ter certeza de que os títulos de cada capítulo são do mesmo tamanho e posição e o que quer que seja, mas o tamanho é infinitamente mais complexo. Então, não podemos prescrever, não podemos fazer especificações para cada página. Eles mudam, eles são responsivos, eles são flexíveis. Então, um guia de estilo é realmente a melhor maneira de preservar a aparência do seu site pois torna mais fácil para desenvolvedores e designers continuar com o trabalho que já foi feito. Apart Apart como sempre tem grandes artigos sobre este. Eles só tinham um sobre a criação de guias de estilo de Susan Robertson, que é uma grande desenvolvedora de front-end. Ela montou uma lista completa de exemplos de guias de estilo. Você pode ver como eles tendem a funcionar e como eles tendem a ser úteis para desenvolvedores Web e Web designers. [ inaudível] como sempre, é uma ótima referência para branding e esse tipo de coisas e então aqui está um exemplo de como é um bom guia de estilo para um site. Então, à esquerda você vê toda a nossa navegação. Nós abordamos todos os nossos principais elementos. A grade, a tipografia, se temos fóruns, tabelas de navegação, onde eles até têm coisas personalizadas que eles chamam de slats ou ícones especiais de Freddy, Freddie e aqui está um exemplo de suas mensagens de feedback. Então, como designer, se você está projetando um novo pago para o site e você precisa pop uma mensagem de erro, você não deve estar projetando um novo. Você deveria estar usando o material que já está lá. Então, quando temos um guia de estilo, eu posso navegar por isso, eu posso ver como ele vai ficar, então eu posso marcá-lo em minhas composições de design, e então há até mesmo código e é a descrição de como usar seus classes particulares. Tudo na mesma página. Então isso é ótimo e muito útil. Yelp tem outro enorme onde eles passaram algum tempo mostrando todos os cabeçalhos, a tipografia principal, todos os botões diferentes e as classes que você usaria para gerar esse botão. Então, novamente, alguém não vai codificar outro pequeno botão laranja do zero, mas eles sabem que já existe um. Aqui está um que eu fiz para riffle onde era apenas sobre, aqui estão nossas principais variáveis de cor que estamos usando e então eu passei por todos os, até mesmo os padrões JavaScript e alguns dos padrões de QA que estávamos usando, foi realmente útil para ter tudo codificado. Eles ficam muito enormes como você pode ver à esquerda, este é o tempo que o guia de estilo acabou. Se você está apenas fazendo um pequeno protótipo, você não precisa fazer isso, mas se você está fazendo qualquer tipo de site, se o seu site vai ter alguma longevidade seguida, ir em frente e fazer isso vai tornar sua vida mais fácil a longo prazo. A essência básica é que você está cobrindo todos os elementos básicos do HTML e, em seguida, quaisquer chamadas especiais e quaisquer módulos especiais que são replicáveis para layouts futuros e para suas marcas, personalidade online. Novamente, o laboratório padrão de Brad Frosts, local é um exemplo legal. Um recurso legal que você poderia usar como exemplo para criar seu próprio guia de estilo. Então, vá através e limpe, comente seu código, e então você pode baixar. Eu incluí um estilo me página do modelo martelado pin de Simon Cox, que é realmente útil, tem todos esses elementos HTML. Então, você pode simplesmente passar e ter certeza de que parece como você espera também e certifique-se de que todos esses elementos de base são estilizados e, em seguida, adicionar quaisquer outros elementos e criar mais guias de estilo se você quiser e, em seguida, certifique-se de preencher Readme.Markdown para o seu repositório e você pode editar markdown na edição de pilha ou arquivos como o iA Writer em sua área de trabalho e, em seguida, basta recarregá-lo usando a árvore de origem. Então, é isso. Nós fizemos isso. Você construiu um site inteiro, você conhece um bom processo e espero, você vai continuar a torná-lo seu próprio e encontrar as peças que funcionam melhor para você e sempre continuar aprendendo. Então, se você tem algo mais que gostaria aprender ou alguma dúvida sobre tudo isso, é um monte de coisas. Sinta-se livre para twittar para mim e me dizer o que você acha ou o que você gostaria de saber mais sobre. Sim adorei, adoro falar mais. Muito obrigado. 11. O que vem agora?: maneira.