DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDiego Eis
Entender como funciona o processo de renderização do browser é simples e ajuda bastante na hora de pensar em performance. Nessa apresentação, mostro um pouco sobre esse processo.
Apresentação realizada no Aniversário do curso de Ciência da Computação da Universidade Federal do Maranhão (UFMA). O objetivo é apresentar a definição de framework, mostrar alguns padrões de projeto e um case de um pequeno framework chamado LizPHP.
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Cristofer Sousa
Workshop que foi ministrado para a Semana da Computação no IFSP - São Carlos, sobre os conceitos de Desenvolvimento Web utilizando Bootstrap além de poder conhecer a fundo algumas bibliotecas e padrões para customizar nossos projetos e uma breve introdução sobre a importância de prototipagem.
Construir um framework é basicamente escrever o CSS do jeito certo, ou seja, escrever código sem dependências, modular, leve e altamente documentado.
Palestra feita pela primeira vez na QCon 2013.
Slides com perguntas que guiaram a discussão na mesa redonda do WordCamp São Paulo 2015 sobre o que distancia o design da programação, e o que podemos fazer para melhorar a interação e colaboração entre estes profissionais, no processo de desenvolvimento web.
Já sabe codificar? Quer chegar a um nível destacado no mercado? Práticas avançadas de documentação, velocidade de codificação, modularização. Tudo isso recheado a muitas dicas de corte de layouts e inovações em CSS3.
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDiego Eis
Entender como funciona o processo de renderização do browser é simples e ajuda bastante na hora de pensar em performance. Nessa apresentação, mostro um pouco sobre esse processo.
Apresentação realizada no Aniversário do curso de Ciência da Computação da Universidade Federal do Maranhão (UFMA). O objetivo é apresentar a definição de framework, mostrar alguns padrões de projeto e um case de um pequeno framework chamado LizPHP.
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Cristofer Sousa
Workshop que foi ministrado para a Semana da Computação no IFSP - São Carlos, sobre os conceitos de Desenvolvimento Web utilizando Bootstrap além de poder conhecer a fundo algumas bibliotecas e padrões para customizar nossos projetos e uma breve introdução sobre a importância de prototipagem.
Construir um framework é basicamente escrever o CSS do jeito certo, ou seja, escrever código sem dependências, modular, leve e altamente documentado.
Palestra feita pela primeira vez na QCon 2013.
Slides com perguntas que guiaram a discussão na mesa redonda do WordCamp São Paulo 2015 sobre o que distancia o design da programação, e o que podemos fazer para melhorar a interação e colaboração entre estes profissionais, no processo de desenvolvimento web.
Já sabe codificar? Quer chegar a um nível destacado no mercado? Práticas avançadas de documentação, velocidade de codificação, modularização. Tudo isso recheado a muitas dicas de corte de layouts e inovações em CSS3.
Neste artigo é proposto o debate sobre o uso do wireframe, muitas vezes considerado o centro da Arquitetura de Informação. A escolha pela utilização deste documento deve acontecer de forma planejada e não por consequência da naturalização do wireframe como fundamento da Arquitetura de Informação. Para tal, buscamos compreender a atividade do arquiteto da informação, as características e usos do wireframe, suas vantagens e desvantagens. Por fim, são levantadas alternativas ao wireframe tradicional, explorando questões de documentação, colaboração e comunicação. Questiona-se a centralidade no wireframe para que a disciplina não seja subestimada ao ser confundida com um entregável.
The Top 20 Myths of Web Design, by Lean Labs.
http://www.Lean-Labs.com
Here's the 20 truths of design that agencies wish their clients understood about the world of user experience, user interface and website design.
Confira a apresentação do curso de HTML online.
Você vai conhecer informações sobre o criador, origem, html e suas versões.
Acesse: www.talesaugusto.biz
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
Web Components - Introdução a tecnologia que vem ganhando cada vez mais notoriedade e que visa auxiliar o desenvolvedor front-end na criação de componentes customizados.
Apresentação sobre CSS que mostra técnicas antigas de desenvolvimento, novas funcionalidade da versão CSS3, lidando com navegadores antigos e sem suporte, exemplos de algumas ferramentas úteis.
Navegadores por de baixo dos panos - Ana Luiza BastosiMasters
Ana Luiza Bastos - Fullstack Developer, Quanto
Como funciona o passo a passo da renderização de elementos do navegador do request ao website funcional e como otimizar a performance para garantir uma melhor experiência de usuário.
Apresentado no InterCon 2018 - https://eventos.imasters.com.br/intercon
Code Club Brasil na Campus Party Brasil 8 #cpbr8 Felipe Fernandes
Apresentação feita na 8ª edição da Campus Party Brasil, onde falamos sobre o projeto, seu surgimento, os números e os passo a passos de como se tornar um voluntário e como montar um clube.
2. Web Design
Após as etapas de briefing, wireframe e
layout, chegou a hora de transformar tudo
em elementos interativos e interpretados via
browser.
Para isso, usamos as linguagens de
marcação (HTML), de estilização (CSS) e
para recursos avançados de lógica
(Javascript, CGI e outras).
3. Web Design
Estrutura básica de arquivo HTML:
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>
4. Web Design
DOCTYPE
É a definição de como o browser
(navegador) irá interpretar o documento
HTML. A definição de varia de acordo com a
versão do HTML.
Veja a seguir alguns exemplos...
5. Web Design
Exemplos:
Versão 4.0 - HTML Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
//EN" "http://www.w3.org/TR/html4/strict.
dtd">
6. Web Design
Exemplos:
Versão 4.0 - HTML Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
//EN" "http://www.w3.org/TR/html4/strict.
dtd">
Versão 5.0 - HTML5
<!DOCTYPE html>
7. Web Design
Exemplos:
Versão 4.0 - HTML Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
//EN" "http://www.w3.org/TR/html4/strict.
dtd">
Versão 5.0 - HTML5
<!DOCTYPE html>
É o que iremos utilizar ;)
8. Web Design
As tags: <html>, <head> e <body> são
conhecidas como tags estruturais.
9. Web Design
Onde,
<html> - define que o arquivo é um
documento HTML;
<head> - é responsável por descrições,
definições e pré-carregamentos (é invisível
ao usuário);
10. Web Design
e,
<body> - é a parte visível a usuário. Leva
consigo o conteúdo e todas as demais
estruturas do website, além dos recursos
interativos.
18. Web Design: Website pessoal
Uma pequena PAUSA
para algumas coisas importantes!
19. Web Design: Website pessoal
Mais nunca se esqueça!
● Indentação no código;
● Nomes dos arquivos e pastas:
sempre minúsculos, sem espaços
e/ou acentos;
20. Web Design: Website pessoal
E algumas tags...
Titulos: <h1> ... <h6>
Links: <a>
Parágrafos: <p>
Imagens: <img />
Quebra de linha: <br />
Listas: <ul>,<li>(não ordenada),
<ol>(ordenada)
21. Web Design: Website pessoal
Mais algumas tags...
Negritos: <strong>
Itálicos: <i>
Linha horizontal: <hr />
22. Web Design: Website pessoal
E mais algumas tags...
Definição de blocos: <div>
Definição de conteúdo: <span>
Comentários: <!-- comentário -->
23. Web Design: Website pessoal
Atributos Essenciais
Identificador único e exclusivo: id
Classe ou classes do elemento: class
Atributos de estilo
Definição de estilo do elemento: style