Criação de interfaces web: por onde começar

Mais de tijolo e argamassa, código de computador e pixels são a base da economia do século 21. Se você já olhou para “Fonte da página” ou “Ferramentas de Desenvolvimento” em seu navegador, você provavelmente encontrou uma bagunça de texto, e quis saber como que faz o trabalho página web.

Os desenvolvedores da Web chamar Graphical vocêSer Eunterfaces (GUIs) colectivamente o a parte dianteira de uma página web, em contraste com o back-end. O front-end é o que o usuário pode manipular, agir com, e outro uso. O back-end pode ser pensado como a infra-estrutura que contém e suporta todas as informações e tarefas implícito no front-end.

Este artigo é sobre o front-end. Vamos mapear o território de modo que você pode obter uma compreensão das distinções e recursos que tornam o front-end o que é, e mostrar-lhe como começar a fazer sentido - e usar - de ferramentas de desenvolvedor web para a criação atraente e páginas web interativas.

Web Design contra Desenvolvimento Front-End

Em grandes organizações, design e desenvolvimento são tarefas realizadas por equipes de profissionais com diferentes conjuntos de habilidades. Designers iria criar um visual específica e interação design-desenvolvedores front-end iria implementá-lo.

Para um indivíduo, no entanto, não há nenhuma razão para limitar a sua exploração: só porque você está interessado no desenvolvimento, não significa que você não tem visão para o projeto, e vice-versa. Uma quantidade modesta de conhecimento sobre tecnologias web básicos ou princípios de design pode revelar extremamente benéfica em sua carreira ou negócio.

desenvolvimento de front-end é mais e menos uma atividade de codificação. Mais porque é mais do que a metade de design em seu pensamento: muitos conceitos são tirados do mundo da produção de impressão. Menos porque enquanto ele está usando o código de computador, esse código é uma variedade que é menos complexa, mais indulgente, e exige menos conhecimento fundação da programação do que outras linguagens de programação web (muitos dos quais podem ser encontrado no back-end).Que linguagem de programação para aprender - Programação WebQue linguagem de programação para aprender - Programação WebHoje vamos dar uma olhada nas várias linguagens de programação web que o poder da Internet. Esta é a quarta parte de uma série de programação iniciantes. Na parte 1, nós aprendemos o básico de ...consulte Mais informação

Video: Como começar a programar para Web?

Front-End da Web: Markup, Style Sheet, e linguagens de programação

A maioria das páginas da web são construídos com um trio de tecnologias: hypertext markup language (HTML), folhas de estilo em cascata (CSS) e javascript (JS):

• linguagens de marcação como HTML marcar um documento com Tag. Etiquetas demarcar conteúdo semântico e estruturar o documento. documentos estruturados pode ser Denominado.
• CSS é uma linguagem de folhas de estilo e descendente de orientações de estilo de impressão para um compositor página (que cria a imagem impressa final para uma prensa de impressão) - na web, CSS determina a apresentação de conteúdo, como tipografia e layout geral, bem como a colocação de gráficos.
• javascript, em contraste com os dois anteriores, é um linguagem de programação. JS lida com a entrada interação e usuário, e é focada sobre os acontecimentos um usuário produz. Para completar o quadro um pouco mais, o oposto de um paradigma baseado em eventos é aquele em que a programação é executada independentemente da entrada do usuário.

HTML

Já faz mais de vinte anos, e o propósito central de HTML continua a mesma: para separar o texto significava para um leitor a partir da estrutura necessária para analisar o documento.

Por que você precisa disso

Por que é HTML ainda é importante? Para colocá-lo simplesmente, HTML é o lugar onde o significado semântico de seu conteúdo se encontra. Isso é necessário para que os leitores máquina como mecanismo de busca e leitores de tela (de acessibilidade). Com o tempo, a relevância de separar o que é semântica versus o que é estrutural tem crescido ao invés de diminuir ao longo do tempo. A versão mais recente do HTML (5) introduziu tags como

Anatomia de um elemento HTML

elementos HTML, no mínimo, são pares de abertura e fechamento, cada etiqueta fechada na , como o código de parágrafo, abaixo em ciano. Os elementos podem tomar atributos, como abaixo, em magenta, como uma “classe”, o que tornaria o elemento de um membro de um grupo que HTML e JS pode afetar. o estilo atributo, cujo conteúdo é escrito em vermelho abaixo, é na verdade uma forma de criar uma regra CSS one-off apenas para esse elemento. (CSS é melhor escrito no site ou página de nível, como discutiremos abaixo).

O resultado dessa marcação:

o texto do parágrafo Plain aqui.

Crédito Extra (Avançado)

Os desenvolvedores de todos os tipos estão obcecados com a velocidade de execução. Para este fim, eles vão otimizar os próprios idiomas para a velocidade por escrito e criação de linhas legíveis. Isso é chamado sugarcoating sintática. A comunidade HTML produziu alguns desses esforços.

Por que usar um atalho desenvolvedor-centric quando você está, presumivelmente, um novato? Ao criar coisas na marcação mais simples, você pode se concentrar na intenção, não a expressão, ao validar contra um padrão último de todos. Os arquivos de origem que você gera na marcação simplificada será ou compilar em HTML válida, ou o compilador irá lançar um erro em um número de linha específico. Você pode achar que mais instrutivo do que a caça através de “tag sopa” para uma cantoneira em falta. cada um deles requer uma peça intermediária de software para transcompile-los em HTML. (Isto é extra de crédito, depois de tudo.)

• Haml (HTML Abstraction Markup Language) | Requer Ruby (que temos cuidadosamente escrito antes) compilar
• Jade | Requer Node.js (você encontrará uma introdução aqui) compilar
• Magro | Requer Ruby para compilar (como acima)

CSS

CSS permite que o conteúdo semântico e apresentação do documento a ser alojados separadamente, tornando características estilísticas como layout, cores e tipografia portátil e aplicáveis ​​a diferentes documentos. Quando o conteúdo e design visual são separados, o desenvolvedor ganha mais flexibilidade e consistência no design visual.

Por que você precisa disso

sites sem estilo está horrível e desagradável. Embora possam ser legível, CSS é a pedra angular da hierarquia informação visual por causa do layout que ele permite. Por exemplo, a figura abaixo, em parte, ilustra a atual menu superior de navegação de makeuseof.com, sem qualquer CSS aplicada.

Observe que, além de tipografia e cor, o menu sem estilo é vertical porque isso é o estilo padrão do navegador. É improvável que você iria querer recriar a internet, de 1990, então você vai querer uma dose saudável e contínua de conhecimento CSS para ser verdadeiramente competente. Além disso, com o aumento de dispositivos de diferentes tamanhos e conectado como iPhones, tablets, et cetera, uma das habilidades mais importantes tornou-se “Projeto Responsive”, ou páginas que se adaptam a diferentes tamanhos de tela. Isso tudo é realizado via CSS.

Anatomia de uma regra CSS

As regras CSS são escritos em um dos três locais: a) embutido dentro de um elemento, b) através da criação de um

Idealmente, os estilos são escritos em folhas de estilo separadas que várias páginas da web podem fazer referência. Usando o mesmo conjunto de regras, os autores podem economizar tempo e criar apresentação visual com mais ordem e consistência. (Estilos inline não pode ajudá-lo a formar a base do estilo site- ou mesmo de toda a página - é por isso que eles estão melhor usado com moderação para atender necessidades específicas.)

regras CSS começam com um seletor, escrito em verde abaixo. Neste caso, o selector para a regra é p, por parágrafo: a regra se aplica a elementos de parágrafo. A regra é colocada entre {chaves}, ao contrário de . Neste caso, a regra faz com que o tipo de letra para o texto do parágrafo normal.

regras CSS pode ficar mais complexo e complicado do que esta introdução permite. É por isso que, em termos de tempo comprometido, você pode esperar CSS vai demorar muito mais tempo para dominar do que HTML.

Crédito Extra (Avançado)

Muito parecido com HTML, CSS tem suas otimizações para aqueles que querem alcançar mais, mais rápido.

• SASS (e SCSS) | Requer Ruby, como anteriormente
• menos | Requer Node.js, como anteriormente

javascript

Quando muitas pessoas pensam de codificação, eles pensam nisso como instruir o computador como Faz alguma coisa. Esta é a tarefa de uma linguagem de programação, o nosso adendo final para a equação de front-end.

As linguagens de programação são geralmente classificados pelo nível de abstração que empregam em sua semântica, suas línguas ancestrais, seus paradigmas e suas disciplinas de digitação. javascript desafia a classificação simples, porque ele foi estendido para muitos frameworks, para caber tantos fins diferentes. É uma forma flexível, vagamente derivado-de-the-C-familiar, multi-paradigma, vagamente digitado camaleão híbrido jogando pega com conceitos de codificação. É tanto um grande exemplo de uma linguagem de propósito muito geral, ou um muito mau exemplo de muitos tipos diferentes de idiomas.

Por que você precisa disso

Por que aprender javascript? Como o meu colega aponta, javascript tem seus defensores e detratores, particularmente no caso de sua adequação para os alunos pela primeira vez. É possivelmente a mais linguagem de programação popular de hoje. Enquanto ele não dar uma base sólida para entender o resto do reino de codificação, há um bom argumento a ser feito para aprender JS ao lado de Ruby ou PHP.6 línguas mais fácil de programação de aprender para Iniciantes6 línguas mais fácil de programação de aprender para IniciantesAprender a programar é sobre encontrar a linguagem certa, tanto quanto é sobre o processo de edificação. Aqui estão as seis principais linguagens de programação mais fáceis para iniciantes.consulte Mais informação

Dito isto, JS baunilha não ir muito longe - estruturas são responsáveis ​​pelas páginas da web de hoje.

Frameworks populares

• Angular, quadro JS do Google para aplicações web como o GMail eo resto.
• JQuery, já abrangidos pela MUO aqui, que poderes WordPress entre outras aplicações.
• Reagir, construído pelas legiões de engenharia do Facebook, é feita para a criação de interfaces de usuário.

Crédito Extra (Avançado)

natureza palimpsesto de javascript implora por alguma imposição de estrutura. Cada um dos sugarcoats abaixo vai um pouco da forma para a implementação de

Video: Leandro Karnal | Para começar o hábito da leitura

• CoffeeScript | Requer Node.js, como anteriormente
• datilografado | Requer Node.js, como anteriormente

Onde começar a aprender

Dado que o desenvolvimento front-end é agora amplamente considerada uma habilidade de trabalho crucial para os trabalhadores do conhecimento de todos os tipos, você vai encontrar muitos pontos de partida na forma de cursos e-learning. Aqui está uma lista com curadoria que fizemos para os nossos leitores:

Video: Em qual linguagem programar? Por onde começar? Qual paga melhor?

• Coursera (pago)
  Coursera recolhe cursos online de universidades e instituições de ensino. A faixa de preço cai de 50-250 dólares para um curso, mas eles anunciam um alto padrão de conhecimento e de alta competência resultados.
• Assembléia Geral Dash (Free)
  Assembléia Geral é uma opção popular para a educação profissional remunerada. Dash é a sua oferta gratuita, e abrange HTML / CSS / JS.
• MakeUseOf.com - A Aprenda a Código 2017 Bundle (Paid, Plug)
  acesso vitalício a 10 classes que cobrem a gama de desenvolvimento web front e back-end, por apenas 20 USD.
• Mozilla Developer Network (Free)
  MDN é autoritário, mas participa do estilo de documentação mais do que instrução de estilo sala de aula ou gamified ofertas somente online.
• Numa árvore (pago)
  Outra oferta on-line, este pago por mês em vez de curso. Isto vem na recomendação de Karen X Cheng em seu posto Médio viral “Como conseguir um emprego como designer sem ir a escola de design.”
• Web Design Tutoriais por Envato Tuts + (Mixed de livre e pago conteúdo de igual qualidade)
  Um bando de artigos únicos e séries multi-parte de alta qualidade, específico e informações direcionadas geralmente em um assunto.

Começando

Uma das vantagens que o desenvolvimento front-end detém para o iniciante é que, na maioria das vezes, ele não requer ferramentas proprietárias caros: a ferramenta mais básica do desenvolvimento de front-end é o editor de texto emparelhado com o navegador de sua escolha :

• editores de texto, como editor do Git Atom texto, Sublime Texto (pago), ou Código VS pela Microsoft
• Navegadores como o Mozilla Firefox ou Google Chrome
• É útil, mas para além do âmbito deste artigo, para ter hospedagem ou um servidor local (como o XAMPP) configurado.

Mais conveniente, se menos permanente, as alternativas são editores vivo baseados na web, tais como:

• Codepen.io
• JSbin.com

atalhos

estruturas HTML são, em sua maior parte, bem entendido, e não exatamente digno de re-introduzir com grande frequência. Para CSS, folha de estilo do site médio é de milhares de linhas longas, e você pode apostar que alguns dos mais modernos são escritos exclusivamente à mão. E em termos de interatividade, certos padrões surgiram. Em virtude desses fatos, você verá que muitos desenvolvedores front-end usar estruturas pré-construídos como uma espinha dorsal, e, em seguida, ajustar, remover ou substituir conforme necessário.

• Bootstrap, desenvolvido originalmente pelo Twitter, contém modelos de HTML, CSS e JS que são amplamente encontrados na web hoje. Bootstrap é quase um língua franca em iniciar o desenvolvimento web.
• Foundation se apresenta como o quadro mais avançado do mundo, e é construído com uma ênfase no pequeno tamanho e velocidade.

Material de referência

• A List Apart - Uma publicação A-list “para as pessoas que fazem Websites”
• Posso usar - “tabelas de suporte para HTML5, CSS3, etc”
• CSS-Tricks - Um hub para a comunidade CSS e fonte de conhecimento sobre as melhores práticas e compatibilidade
• Documentação HTML vivo Standard - “o padrão de vida - Edição de Web Developer”
• HTML5 favor - “Use o novo e brilhante de forma responsável”
• Smashing Magazine - “Para profissionais de Web Designers e Desenvolvedores”
• WebPlatform Docs - “um site voltado para a comunidade que pretende tornar-se uma fonte abrangente e autoritário para documentação do desenvolvedor web.”

Conclusão

Esperamos que tenha gostado desta orientação para o mundo do front-end. Como você pode ver, o desenvolvimento front-end é um campo que é preenchido com um monte de possibilidade, mas tem muitos pontos de entrada. Aprender ele irá adicionar uma habilidade impressionante para sua carteira, e permitir-lhe para dar o próximo passo em sua carreira, ou a transição para um sistema totalmente novo.

desenvolvedores: O que está em sua pilha de front-end?

iniciantes: O que mais poderíamos ter incluído para orientar você?