Introdução ao Front End

Front End DeveloperQuem são? Onde vivem? O que comem?

“As far as the customer is concerned, the interface

is the product.”

- Jef Raskin

O que é um Front End Developer?• Front End Enginner• UI Engineering• Markup Developer• Client Side Developer• Web Designer• Front Ender• Coder• HTMLer

Front End?Fim do começo? Ou o começo do fim? Enfim.

É o profissional responsável por projetar, construir e otimizar a parte dos projetos web que interagem diretamente com o usuário.

Um termo recente:

As interfaces de projetos web se tornaramcada vez mais complexas e por isso surgiu a

necessidade de alguém altamente especializado em sua construção. O Front End Developer,

também por vezes chamado Front End Enginner.

Engineering

DESIGNART

LAYOUT

PERFORMACEHTTP

SEGURANÇA

ACESSIBILIDADEUSABILIDADEPSICOLOGIA

LOCALIZAÇÃOLINGUÍSTICA

Duties (dotes/funções/obrigações):

• UX• Design gráfico• Conhecimentos multimídia• UI Design• Programming design• Hierarquia de dados• Utilização de APIs• Heurística• Compatibilidade entre browsers• Mobile, tablets e outros devices• Tecnologias emergentes

• Usability performace• Web standards (W3C)• Web 2.0• Otimização de códigos• SEO• VSEO• Proof Reader (otimização)• Mashups• SOA (Service-Oriented Architecture)

• Copywrite

Todos estes conhecimentos podem ser utilizados durante o desenvolvimento de um produto.

Mas e como se dá este desenvolvimento?

UI Design• Guia de estilo de criação• Arquitetura da informação• Mock-ups / wireframes• Logos e ícones• Licença de imagens• Prototipação

Front End Dev• Implementação de wireframes/protótipos

(HTML)• Guia de estilo técnico (CSS)• Desenvolver a interatividade (CSS3, jQuery,

Flash, ... )• Comunicação com “Middle Tier Dev”• Verificar e eventualmente solucionar os gaps

de desenvolvimento

UI Design » Front End Developer » Middle Tier Developer » Back End Developer

Middle Tier Dev• Tradução de front-end para estruturas DB• Workflow• Nível de segurança de objetos de usuários• Validação de lógica de negócio• Encaminhar informações ao back end dev• Tasks de automação do front end

Back End Dev• Tradução de objetos do middle tier dev para

objetos DB• Operações CRUD x DB• Implementação de regra de negócio com

integridade dos dados• Pensar em segurança DB (SQL Injection, etc...)

Desafios:

• É a natureza do ser humano procurar por algo “bom o suficiente para se trabalhar”.– Projetos– Browsers– Devices– Softwares e hardwares

• JavaScript não é facil.– jQuery e a interatividade

• CSS não é fácil. Não, não é.– CSS3 e a interatividade– Novidades e atualizações (Less CSS)

• HTML não é facil.– OK, HTML até que é fácil mas existem alguns macetes e conhecimentos que são indispensáveis.– O HTML 5

User Interface Design X Front End Dev:

• Usabilidade• Testes de usabilidade X Padrões de boas práticas• UX (*não* usabilidade)• Heurística• O usuário deve determinar a interface, e não a

informação.

Problematizando:• A interface do usuário pode ser difícil de usar!• A interface do usuário pode ser impossível de usar!

Usabilidade:

Na Interação humano-computador e na Ciência da Computação, usabilidade se refere à simplicidad e e facilidade com que uma interface, um programa de computador ou um website pode ser utilizado.

Por quem? PELO USUÁRIO

Usabilidade:

A usabilidade é definida em 5 dimensões:

• Aprendizagem: Quão fácil é para os utilizadores realizarem tarefas básicas no primeiro contato que têm com a interface?

• Eficiência: Depois dos utilizadores se tornarem experientes na utilização da interface, quão rápido conseguem realizar as tarefas?

• Memorização: Depois de um longo período de ausência, quão facilmente conseguem os utilizadores restabelecer o seu nível de proficiência?

• Robustez: Quantos erros cometem os utilizadores, quão severos são esses erros, e quão facilmente conseguem recuperar dos erros?

• Satisfação: Quão agradável é a utilização do sistema?

Decreto Lei 6.949 (ago/09) http://presrepublica.jusbrasil.com.br/legislacao/818741/decreto-6949-09

Convenção da ONU

http://vimeo.com/11784148

"Vamos por partes: primeiro fazemos o site, depois fazemos acessibilidade."

Acessibilidade:

Design UniversalDesign de produtos e ambientes para serem usados por todas as pessoas, na maiorextensão possível, sem a necessidade de adaptação ou design especializado.

Princípios de Connell 1997 – Design Universal1. Uso equitativo2. Flexibilidade no uso3. Simples e intuitivo 4. Informação perceptível5. Tolerância ao erro6. Baixo esforço físico7. Tamanho e espaço para aproximação e uso

HTML é a solução de 80% deste quesito

“Browsers are the mosthostile software engineering

environment possible.”

- Douglas Crockford

Browsers:

Fonte: W3C

Browsers:

Fonte: StatCounter

Mobile e o Front End:

• CSS - Media Queries

• Simplificação da interface

• Adaptação de conteúdo

Linguagens | HTML & HTML5:

Linguagens | CSS & CSS3:

Linguagens | Javascript (jQuery):

Testes, otimização e performace:

Referências: (e maneiras de se tornar um ninja do Front End)

SITES:• Maujor.com• Tableless.com.br• Jquery.org• W3.org

LIVROS:• jQuery: A Biblioteca do Programador JavaScript – Maurício Samy Silva• Designing with Web Standards – Jeffery Zeldman• Não me faça pensar – Steve Krug

LISTAS DE DISCUSSÃO:• Jquery-br• Webstandards-br• Frontend-br• Html5-css3-br

FLÁVIO DE HOLANDAflavioc@gazetadopovo.com.brcargocollective.com/flaviodeholanda