O documento discute estratégias para criar layouts responsivos utilizando medidas flexíveis como porcentagens e unidades em. Aborda como converter layouts fixos para fluidos, utilizar imagens responsivas e limitar layouts fluidos em telas muito grandes.
Node js is said to be an open source. It is the cross-platform JavaScript runtime to developing different types of applications and tools. Thus the best node js course js is not a JavaScript framework with its many of the core modules which are mainly written in the JavaScript and even the developers to writing a new module. It is also primarily used to develop the input and output web applications like single page applications, video streaming sites with other web applications.
Folding Unfolded - Polyglot FP for Fun and Profit - Haskell and Scala - with ...Philip Schwarz
(download for perfect quality) - See how recursive functions and structural induction relate to recursive datatypes.
Follow along as the fold abstraction is introduced and explained.
Watch as folding is used to simplify the definition of recursive functions over recursive datatypes
Part 1 - through the work of Richard Bird and Graham Hutton.
This version corrects the following issues:
slide 7, 11 fib(0) is 0,rather than 1
slide 23: was supposed to be followed by 2-3 slides recapitulating definitions of factorial and fibonacci with and without foldr, plus translation to scala
slide 36: concat not invoked in concat example
slides 48 and 49: unwanted 'm' in definition of sum
throughout: a couple of typographical errors
throughout: several aesthetic imperfections (wrong font, wrong font colour)
DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScriptSoumen Santra
DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScript
DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML)
HTML Explanation
DHTML Explanation
DHTML Example
DHTML Output
CSS
CSS DIAGRAMMATIC REPRESENTATION
CSS TYPES & Example
CSS OUTPUT
Scripting
JavaScript Example
JavaScript Output
DOM
W3C
Node js is said to be an open source. It is the cross-platform JavaScript runtime to developing different types of applications and tools. Thus the best node js course js is not a JavaScript framework with its many of the core modules which are mainly written in the JavaScript and even the developers to writing a new module. It is also primarily used to develop the input and output web applications like single page applications, video streaming sites with other web applications.
Folding Unfolded - Polyglot FP for Fun and Profit - Haskell and Scala - with ...Philip Schwarz
(download for perfect quality) - See how recursive functions and structural induction relate to recursive datatypes.
Follow along as the fold abstraction is introduced and explained.
Watch as folding is used to simplify the definition of recursive functions over recursive datatypes
Part 1 - through the work of Richard Bird and Graham Hutton.
This version corrects the following issues:
slide 7, 11 fib(0) is 0,rather than 1
slide 23: was supposed to be followed by 2-3 slides recapitulating definitions of factorial and fibonacci with and without foldr, plus translation to scala
slide 36: concat not invoked in concat example
slides 48 and 49: unwanted 'm' in definition of sum
throughout: a couple of typographical errors
throughout: several aesthetic imperfections (wrong font, wrong font colour)
DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScriptSoumen Santra
DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScript
DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML)
HTML Explanation
DHTML Explanation
DHTML Example
DHTML Output
CSS
CSS DIAGRAMMATIC REPRESENTATION
CSS TYPES & Example
CSS OUTPUT
Scripting
JavaScript Example
JavaScript Output
DOM
W3C
Have you ever dreamed to have an "MKSYSB like" solution to quickly backup/restore your Linux on Power ?
If the answer is YES, the opensource solution named Relax and Recover (ReaR) may be for you.
Come to this session to learn more about how to implement and the capabilities of this solution through presentation and live demonstration.
Behaviour Driven Development (BDD) and Domain Driven Design (DDD) seen a great growth in adoption in recent years. We are all creating new practices and tools that try and bring these two very important modern methodologies together. What if we have it backwards and they were actually together all along? What if most of the misunderstandings and challenges we face in implementing BDD are spawned from the very simple mistake of us separating something that was created as a whole? In this talk we'll delve into BDD as it was meant to be done from the beginning and look at its very rooted connection with the software design.
Since the release of 17.05, Docker has introduced Multi-Stage Build for Docker Images for anyone who has struggled to optimize Dockerfiles while keeping them easy to read and maintain. This builder pattern will help anyone who would just like to have the runtime, configuration & application and doesn’t want to have compilers, debuggers, code, build, test logs etc.
멀티 모듈을 이용한 안드로이드 프로젝트 개발이 늘어나고 있습니다.
하지만 모듈을 만들 때 마다 build.gradle의 중복 코드가 생기고 있다는 사실을 아시나요?
이러한 문제를 해결하기 위해 빌드 로직을 효율적으로 관리하는 Gradle Kotlin 컨벤션 플러그인을 소개합니다.
*페이지 마지막에 코드 링크 첨부되어 있습니다.
What is JavaScript?
JavaScript is a very powerful client-side scripting language. JavaScript is used mainly for enhancing the interaction of a user with the webpage. In other words, you can make your webpage more lively and interactive, with the help of JavaScript. JavaScript is also being used widely in game development and Mobile application development.
Telosys tutorial - Code generation for a Python web application based on Bott...Laurent Guérin
Telosys CLI tutorial - How to generate a Python web application based on Bottle, SQLAlchemy and SQLite
Installation, model setup, bundles of templates, code generation and tests
Have you ever dreamed to have an "MKSYSB like" solution to quickly backup/restore your Linux on Power ?
If the answer is YES, the opensource solution named Relax and Recover (ReaR) may be for you.
Come to this session to learn more about how to implement and the capabilities of this solution through presentation and live demonstration.
Behaviour Driven Development (BDD) and Domain Driven Design (DDD) seen a great growth in adoption in recent years. We are all creating new practices and tools that try and bring these two very important modern methodologies together. What if we have it backwards and they were actually together all along? What if most of the misunderstandings and challenges we face in implementing BDD are spawned from the very simple mistake of us separating something that was created as a whole? In this talk we'll delve into BDD as it was meant to be done from the beginning and look at its very rooted connection with the software design.
Since the release of 17.05, Docker has introduced Multi-Stage Build for Docker Images for anyone who has struggled to optimize Dockerfiles while keeping them easy to read and maintain. This builder pattern will help anyone who would just like to have the runtime, configuration & application and doesn’t want to have compilers, debuggers, code, build, test logs etc.
멀티 모듈을 이용한 안드로이드 프로젝트 개발이 늘어나고 있습니다.
하지만 모듈을 만들 때 마다 build.gradle의 중복 코드가 생기고 있다는 사실을 아시나요?
이러한 문제를 해결하기 위해 빌드 로직을 효율적으로 관리하는 Gradle Kotlin 컨벤션 플러그인을 소개합니다.
*페이지 마지막에 코드 링크 첨부되어 있습니다.
What is JavaScript?
JavaScript is a very powerful client-side scripting language. JavaScript is used mainly for enhancing the interaction of a user with the webpage. In other words, you can make your webpage more lively and interactive, with the help of JavaScript. JavaScript is also being used widely in game development and Mobile application development.
Telosys tutorial - Code generation for a Python web application based on Bott...Laurent Guérin
Telosys CLI tutorial - How to generate a Python web application based on Bottle, SQLAlchemy and SQLite
Installation, model setup, bundles of templates, code generation and tests
Com textos extraídos do livro Layout : s.m. um arranjo de partes etc. de acordo com um plano, esta aula trata dos princípios básicos do design e sua aplicação à criação publicitária.
Demonstrar a importância do planejamento da interface do usuário (UI) e escolha dos elementos visuais que melhor se adaptem ao público-alvo.
Apresentar ferramentas que auxiliem na criação e testes de layouts e estruturas visuais de um website.
Apresentação que preparei para uma aula no período que fui monitora (2012) de Comunicação Visual I e Processo de Criação em Publicidade para o curso de Publicidade e Propaganda (UFF), sob a orientação da professora Andrea Hecksher.
Slides de aulas sobre "Fundamentos Compositivos" - parte 8 da Apostila de Arte - Artes Visuais de autoria do Prof. Garcia Junior e que pode ser vista no site: www.imagetica.net/blog - Blogarte. Nestas aulas vocês aprenderá sobre Psicologia da Gestalt, percepção visual, equilíbrio/tensão, nivelamento/aguçamento, ângulo de visão e relação figura/fundo com muitos exemplos e demonstrações em imagens.
Slides da apresentação realizada dia 29/10/2014, para a disciplina Programação para Internet I, do curso de Análise e Desenvolvimento de Sistemas da faculdade Senac Porto Alegre.
Nessa palestra, mostrei um pouco mais que apenas um HelloWorld. Mostrei boas práticas para quem está iniciando e o cuidado com a mudança de paradigmas entre Web e Mobile.
Apresentação de Introdução as práticas de Desenvolvimento Web com Design Responsivo utilizada no 4° Meditec - Medianeira In Technology, realizado em Medianeira - PR.
Autores:
Anderson Rodrigo Davi - andersonrdavi@gmail.com;
Régis Eduardo Weizenmann Gregol - regiseduardogregol@gmail.com.
Código fonte disponível no Github: http://github.com/bicoco/agenda-meditec
Exemplo layout fixo: http://agendameditec.herokuapp.com/index.html
Exemplo layout responsivo: http://agendameditec.herokuapp.com/responsivo.html
Responsive Web Design - Entregando a informação da melhor maneiro possívelSérgio Lima
A apresentação "Responsive Web Design - Entregando a informação da melhor maneiro possível" foi mostrada aos meus colegas de trabalho com o intuito de chamar a atenção para a maneira como fazemos nossos sites e como o público vê os nossos sites.
Palestra apresentada no Google I/O Extended 2023 em Salvador-BA no dia 05/08/2023 onde falei sobre as principais novidades do Android para 2023 que foram mostradas no Google I/O 2023.
Criando temas em PSD pensando no Front-end e Back-end@cristianoweb
Apresentação inspirado na oficina do amigo Bernard de Luna sobre fatiamentos de layout, onde ele fez uma oficina junto do Victor Montalvão no 15º EDTED da Arteccom.
(http://www.slideshare.net/bernarddeluna/oficina-de-planejamento-corte-seu-layout-virando-cdigo-15-edted)
Essa apresentação foi dada no 2º WPMeetupRJ no Espaço de Coworking BeesOffice, organizado pelo @castroalves @GugaAlves e @duquebilly.
O objetivo dessa palestra era influenciar os designers a criarem peças amigáveis para os desenvolvedores em busca de agilidade no processo de implementação de layouts baseados em Photoshop.
JavaScript - Introdução com Orientação a ObjetosEduardo Mendes
Este material é preparatório para a utilização básica do JavaScript em contexto de outros frameworks. O material é pensado para pessoas que já possuem conhecimento de linguagens de programação e querem entender rapidamente conceito básico de objetos em JavaScript
Estimativas de Esforço - Engenharia de SoftwareEduardo Mendes
Apresentação sobre tipo de estimativas de esforço na Engenharia de Software.
Descrição de abordagens baseadas em modelos formais e julgamento de especialista.
Apresenta uma visão geral sobre Análise de Pontos de Função, Pontos de Casos de Uso e Pontos de Estórias de Usuário.
Breve comparação entre estas abordagens.
2. Layout Fluido
• É a grande estrela hoje do Web Design
Responsivo
• Com a quantidade de dispositivos que
renderizam página web hoje, não é possível
simplesmente copiar medidas diretas do layout
• O Layout Fluido utiliza medidas flexíveis
3. Layout Fixo
• O layout fixo é aquele que utiliza pixels para
determinar as larguras dos elementos do design
• Não se adapta às alterações do campo de visão
do dispositivo que o renderiza
6. Layout Fluido
• Layouts fluidos utilizam unidades flexíveis (% , em)
para larguras ao invés de pixels
• Permite que haja fidelidade do design inicial da
página
• Layout se adapta de acordo com o campo de visão
• Desafio
• Se desapegar das medidas do projeto inicial
8. Medidas Flexíveis
• %
• Utilizado para determinar as larguras dos elementos
• A porcentagem é em relação ao tamanho do
elemento pai
• Pode ser utilizado para fontes
• Tamanho relativo ao tamanho da fonte do elemento pai
9. %
body {
/* largura total da tela */
width: 100%;
}
section {
/* 1/3 da página */
width: 33.33333%;
/* padding de 10% do pai */
padding: 10%;
}
10. Medidas Flexíveis
• em
• Normalmente utilizado para fontes
• Medida sempre está relacionado à fonte base
• Um font-size implícito equivale a 16px na maioria dos
navegadores
• 1em = 100%
• 2em = 200%
11. em
html {
/* font-size base implícito equivalente a 16px */
}
p{
/* 16px * 1.125 = 18px */
font-size: 1.125em;
}
h1 {
/*dobro da fonte base */
font-size: 2em;
}
h2 {
/* 50% maior do que o valor base */
font-size: 150%; /* 1.5em */
}
12. em
• Pode ser usado em qualquer propriedade mas
sempre significar uma relação com o tamanho da
fonte
• Útil quando a medida de algum elemento tem
relação com texto, uma medida tipográfica
• Ex: Espaçamento entre parágrafos
p { margin: 0 1em; }
p { margin: 0 5%; }
13. Flexibilidade nos elementos
filhos
• Vantagem
• As medidas flexíveis afetam os elementos filhos
(aninhados)
• Cenário:
• Quando o usuário aumenta a fonte no navegador pra
ler melhor
• todo o layout baseado em em é afetado
14. Os filhos herdam o tamanho
base
<html>
<body>
<article>
<h1>Desenvolvimento Mobile</h1>
<p>Ipsum lorum, ipsum lorum, ipsum lorum.</p>
</article>
</body>
</html>
article {
font-size: 1.25em;
}
h1 {
font-size: 2em;
}
p {
font-size: 0.9em;
}
15. Quais os valores reais
article {
font-size: 1.25em;
}
h1 {
font-size: 2em;
}
p {
font-size: 0.9em;
}
16. rem
• Nova medida
• Como o em é relativo ao elemento pai, o
gerenciamento do tamanho das fontes pode ficar
complexo caso existam muitos niveis.
• O rem sempre é relativo ao tamanho base do
elemento root, o <html>
• Para alterar tudo, altere o tamanho do font-size do
elemento html
17. Quais os valores reais
article {
font-size: 1.25rem;
}
h1 {
font-size: 2rem;
}
p {
font-size: 0.9rem;
}
18. No caso anterior
• html e o body vão ter os 16 px base
• O article terá 16px * 1.25 = 20px
• O h1 tem 16px * 2 = 32px
• O p vai ter 16px * 0.9 = 14px
19. viewport-units: vw e vh
• Flexibiliza o tamanho de forma proporcional ao
tamanho do navegador
• 1vh -> 1% da largura da janela do navegador
• h2 { font-size: 2vw; }
• Pouco suporte dos navegadores
21. Utilizando o layout fluido
• Mudança de paradigma
• Pode ser uma tarefa árdua quando já se está
acostumado a medidas fixas
• O segredo é se concentrar nas proporções dos
elementos do layout
• Enxergar os as relações entre os elementos do layout
ao invés de seus tamanhos fixos
23. Sobre boxes css
• Suponha que existam 2 sections definidas pelas
regras abaixo, eu teria um linha com 2 colunas?
section {
float: left;
padding: 5%;
width: 50%;
}
24. Sobre boxes css
• Cada section vai ter 60% da largura da página
• Ficará uma embaixo da outra
• Causa: o padding não é considerado no width
• Isso é um efeito do box model
25. Box model
• Não é o width que determina a largura final
• O tamanho final de cada elemento é
section {
float: left;
padding: 5%;
width: 40%;
}
26. Alterando o box-sizing
• Fazer com o width já inclua os valores do
padding e do border-width
section {
float: left;
padding: 5%;
width: 50%;
}
box-sizing: border-box;
27. Alteração do box-sizing
• Cenário: O width do elemento está definido em
relação ao elemento pai, mas você gostaria que o
padding fosse uma relação com o font-size do
elemento
40. Restrição ao layout fluido
• O layout fluido é a maneira de endereçar uma
página aos vários dispositivos de tamanhos
diferentes do dia de hoje
• Mas, em certas situações, pode não ser a melhor
opção deixar o layout fluir 100% sobre uma tela
42. Restrição ao layout fluido
• Em telas muito grandes, alguns layouts fluidos
podem ficar muito “esticados”
• espaçamentos entre elementos muito grandes
• É interessante pensar em um limite mínimo e
máximo de tela em px
• max-width
• min-width
43. Restrição ao Layout Fluido
body {
max-width: 2000px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
45. Imagens flexíveis
• As imagens também precisam se adequar ao espaços de
acordo com a resolução do aparelho
• Regra CSS
img {
max-width: 100%;
}
limita a largura das imagens à largura do elemento que as
contém
46. Recursos flexíveis
• É possível aplicar a mesma ideia para outros recursos
img,
iframe,
object,
embed,
video {
height: auto;
max-width: 100%;
}
47. Imagens responsivas
• Uma parte bem complicada de um bom design
responsivo
• As imagens possuem um número fixo de pixels
• Mas e max-width: 100%; ???
• A imagem aumentar e diminui de acordo com o tamanho
da tela
• A imagem pode perder qualidade quando esticada
48. Imagens responsivas
• Existem vários cenários onde a imagem deve
responder ao contexto
• Utilizar imagens diferentes, otimizadas para cada
cenário:
• Imagens grandes utilizadas em versão Desktop
• Imagens bem definidas em telas de retina de alta
resolução
• Zoom nas imagens
• Imagens diferentes para versões Desktop e Mobile
devido ao layout
49. Por que?
• Economia de bytes utilizando a imagem
adequada à cada tamanho de tela
• Qualidade visual na renderização de acordo com
a resolução
• Imagens de conteúdos diferentes para adaptação
do design
50. Prefira CSS
• Uma alternativa para evitar imagens responsivas
é utilizar CSS
• Quando possível recriar aspectos visuais do
layout com técnicas que podem substituir
imagens
• Efeitos CSS3
• bordas arredondadas, sombras, gradientes
51. Prefira CSS
• Vantagens
• renderizado no navegador do cliente
• ajustado para o tamanho da tela
• ajustado para a resolução
• facilita manutenções futuras
54. Texto e imagens
• Quando possível não adicione texto às imagens
• Texto é fluido e pode configurado facilmente
através de CSS
• Texto em imagens
• não podem ser indexados no Google
• não tem como alterar a posição de acordo com a
resolução
55. Icon Fonts
• Hoje é possível através do @font-face carregar para
sua página fontes customizadas
• Uma alternativa para o uso de imagens é a utilização
de família de fontes de ícones
• Vantagens
• fontes são bem renderizadas nas telas
• um arquivo só de fonte pode conter vários ícones juntos
• você pode customizar cor e tamanho
57. Imagens e Media Queries
• Na maioria dos casos é preciso utilizar imagens
nos formatos clássicos (PNG, JPEG)
• Cenários
• Enviar imagens nos tamanhos ideais para cada tela
• backgrounds
• <img>
58. Imagens ideais para cada
resolução
• Uma imagem de 960px para Desktop, mas que
não faz sentido ser enviada para o mobile
59. Imagens ideais para cada resolução
• Caso de imagem de fundo
.banner {
background-image: url(banner-mobile.jpg);
}
@media (min-width: 400px) {
.banner { background-image: url(banner-medio.jpg); }
}
@media (min-width: 700px) {
.banner { background-image: url(banner-grande.jpg); }
}
60. Imagem seletiva com <img>
• Ainda não existe uma flexibilidade com media queries
• Alternativas
• Rertirar todas as tags <img> e colocar todas as imagens via
CSS
• Algumas imagens possuem significado semântico, não são
apenas peças do layout
• Utilizar JS para alterar o src da imagem de acordo com a
resolução da tela
• Pode haver o carregamento de todas as imagens
61. Futuro
• Responsividade com HTML5
• Novo atributo srcset para a tag <img> que permite
listar um conjunto de arquivos de acordo com o
viewport
<img
srcset="mobile.jpg 400w, medio.jpg 700px, grande.jpg">
.banner {
background:
image-set(url(mobile.jpg) 400w, url(grande.jpg));
}
63. PictureFill
• Semelhante a especificação de <picture>, utiliza
JS e os elementos atuais do HTML5 para carregar
a imagem responsivamente
<div data-picture>
<div data-src="mobile.jpg"></div>
<div data-src="grande.jpg”
data-media="(min-width: 700px)"></div>
<noscript><img src="fallback.jpg"></noscript>
</div>
https://github.com/scottjehl/picturefill
http://scottjehl.github.io/picturefill/
66. Soluções de servidor
• Uma estratégia em que se coloca apenas uma imagem
grande com boa definição um servidor externo
redimensiona a imagem dinamicamente
• Sencha IoSrc
• http://www.sencha.com/products/io)
• ReSrc
• http: //www.resrc.it/
• Thumbor
• https: //github.com/globocom/thumbor
67. Sencha IoSRC
<img
src='http://sencha.com/files/u.jpg'
alt='My large image'
/>