Mini Curso Design de Dispositivo MoveisPaolo Passeri
Este minicurso aborda os principais tópicos para o desenvolvimento de interfaces para dispositivos móveis, incluindo entendimento dos dispositivos e usuários, definição das funcionalidades do aplicativo, padrões de interação, guias de interface do usuário, prototipação rápida e identidade visual. O curso é dividido em 60% de atividades práticas e 40% de conceitos teóricos.
Este documento fornece um resumo de um minicurso sobre design de interfaces para dispositivos móveis. O minicurso aborda tópicos como entender os dispositivos móveis, definir as funcionalidades do aplicativo, a importância do design, prototipação rápida e identidade visual. O minicurso é apresentado por Paolo Domenico Passeri e inclui discussões, atividades práticas e exemplos.
Este documento fornece uma introdução a um minicurso sobre design de interfaces para dispositivos móveis. O minicurso abordará tópicos como entender os dispositivos móveis e o processo de desenvolvimento de interfaces, definindo as funcionalidades do aplicativo, a importância de um bom design, padrões de interação, prototipação rápida e identidade visual. O instrutor é Paolo Domenico Passeri, engenheiro, designer e gerente de produto. O curso será composto por 50% de conceitos e 50% de atividades práticas
Interfaces inteligentes para dispositivos móveisJuliana Lemos
analisamos algumas plataformas em questões de usabilidade, interatividade, facilidade de compreensão e quais as interfaces tem maior interação com o usuário e permite maior adaptação as necessidades do usuário
O documento discute as opções para desenvolvimento de aplicativos móveis, incluindo nativo, híbrido e multiplataforma. Apresenta as vantagens e desvantagens de cada abordagem, além de frameworks populares como Cordova, React Native e Xamarin. Oferece também recursos adicionais sobre a transição de desenvolvimento web para mobile.
Aula05 - Princípios de Marketing DigitalMarcio Nunes
O documento discute os aspectos básicos e usabilidade de um site, incluindo navegação intuitiva, layout agradável, links funcionando, linguagem compreensível e mostrar ao usuário onde clicar. Também aborda a importância da encontrabilidade, como ter títulos atraentes para cada página e títulos diferentes para diferenciar as páginas.
Este documento fornece um mini-curso sobre design para dispositivos móveis com as seguintes informações essenciais:
1) Aborda os principais tópicos do design para dispositivos móveis como entendendo os dispositivos, definindo funcionalidades, padrões de interação e identidade visual.
2) Apresenta o professor e objetivos do curso de fornecer 40% de conceitos e 60% de atividades práticas.
3) Discutem conceitos importantes como as limitações dos dispositivos móveis, processos de
Mini Curso - Design de Interface para Dispositivos MóveisJane Vita
O design para dispositivos móveis se difere do design para outras interfaces de várias maneiras e a maioria destas diferenças estão relacionadas ao fato do usuário levar o dispositivo para qualquer lugar onde vai.
Mini Curso Design de Dispositivo MoveisPaolo Passeri
Este minicurso aborda os principais tópicos para o desenvolvimento de interfaces para dispositivos móveis, incluindo entendimento dos dispositivos e usuários, definição das funcionalidades do aplicativo, padrões de interação, guias de interface do usuário, prototipação rápida e identidade visual. O curso é dividido em 60% de atividades práticas e 40% de conceitos teóricos.
Este documento fornece um resumo de um minicurso sobre design de interfaces para dispositivos móveis. O minicurso aborda tópicos como entender os dispositivos móveis, definir as funcionalidades do aplicativo, a importância do design, prototipação rápida e identidade visual. O minicurso é apresentado por Paolo Domenico Passeri e inclui discussões, atividades práticas e exemplos.
Este documento fornece uma introdução a um minicurso sobre design de interfaces para dispositivos móveis. O minicurso abordará tópicos como entender os dispositivos móveis e o processo de desenvolvimento de interfaces, definindo as funcionalidades do aplicativo, a importância de um bom design, padrões de interação, prototipação rápida e identidade visual. O instrutor é Paolo Domenico Passeri, engenheiro, designer e gerente de produto. O curso será composto por 50% de conceitos e 50% de atividades práticas
Interfaces inteligentes para dispositivos móveisJuliana Lemos
analisamos algumas plataformas em questões de usabilidade, interatividade, facilidade de compreensão e quais as interfaces tem maior interação com o usuário e permite maior adaptação as necessidades do usuário
O documento discute as opções para desenvolvimento de aplicativos móveis, incluindo nativo, híbrido e multiplataforma. Apresenta as vantagens e desvantagens de cada abordagem, além de frameworks populares como Cordova, React Native e Xamarin. Oferece também recursos adicionais sobre a transição de desenvolvimento web para mobile.
Aula05 - Princípios de Marketing DigitalMarcio Nunes
O documento discute os aspectos básicos e usabilidade de um site, incluindo navegação intuitiva, layout agradável, links funcionando, linguagem compreensível e mostrar ao usuário onde clicar. Também aborda a importância da encontrabilidade, como ter títulos atraentes para cada página e títulos diferentes para diferenciar as páginas.
Este documento fornece um mini-curso sobre design para dispositivos móveis com as seguintes informações essenciais:
1) Aborda os principais tópicos do design para dispositivos móveis como entendendo os dispositivos, definindo funcionalidades, padrões de interação e identidade visual.
2) Apresenta o professor e objetivos do curso de fornecer 40% de conceitos e 60% de atividades práticas.
3) Discutem conceitos importantes como as limitações dos dispositivos móveis, processos de
Mini Curso - Design de Interface para Dispositivos MóveisJane Vita
O design para dispositivos móveis se difere do design para outras interfaces de várias maneiras e a maioria destas diferenças estão relacionadas ao fato do usuário levar o dispositivo para qualquer lugar onde vai.
HTML5 Mobile - Aula 3 - Device OrientationJose Berardo
Aula 3 do curso HTML5 Mobile da Especializa. Tratamos sobre os sensores de posicionamento e movimento do aparelho.
A leitura desses sensores varia de acordo com o browser mas já é plenamente viável no iOS e Androids mais atuais (acima do honeycomb).
O documento introduz conceitos fundamentais da World Wide Web, incluindo seu histórico, modelo cliente-servidor, protocolos HTTP e URL, e linguagem HTML. O documento também discute a diferença entre Internet e WWW.
O documento apresenta uma aula introdutória sobre HTML5. Apresenta os tópicos a serem abordados: o que é HTML5, suas vantagens, comandos básicos, como salvar e enviar arquivos. Inclui explicações sobre tags como <canvas> e <video> e recursos como geolocalização e cache de aplicações. Demonstra como criar um arquivo HTML simples, inserir imagens, hospedar o site na internet e concluir o processo de publicação.
O documento discute elementos multimídia em HTML, incluindo vídeo e áudio. Explica que o elemento <video> é usado para reproduzir vídeos e o elemento <audio> é usado para reproduzir áudios, e ambos suportam diferentes formatos de arquivo como MP4, WebM, Ogg e MP3. Além disso, descreve os atributos, métodos e eventos desses elementos para controlar a reprodução de mídia.
O documento descreve como criar tabelas em HTML. Explica que tabelas são usadas para apresentar dados tabulares em linhas e colunas e fornece exemplos básicos de tabelas usando as tags <table>, <tr> e <td>. Também discute atributos comuns como border, width, align e valign.
A selection of teacher training materials on the area of developing creative ideas in order to build personalised content. The activities are suitable for both resource poor and resource rich contexts and have been tested with teachers in a range of different learning contexts, globally.
O documento apresenta Luiz Felipe F. M. Costa, um estudante de Sistemas de Informação que estuda front-end web por conta. Ele explica o objetivo do documento que é entender como sites funcionam, o poder das aplicações web e como aprender a desenvolver para a web. O documento é dividido em duas partes, a primeira sobre front-end e back-end e a segunda sobre HTML5, PHP e onde aprender mais.
1) O documento apresenta um caderno de exercícios de HTML com 8 exercícios iniciais que ensinam elementos básicos como cabeçalhos, parágrafos, links e imagens.
2) Os exercícios subsequentes abordam tópicos mais avançados como cores, alinhamento, tabelas e frames.
3) O objetivo é que os alunos aprendam a linguagem HTML através da realização prática destes exercícios.
Desenvolvimento-web-com-html-css-e-javascriptManuel Fernando
Este documento é um treinamento sobre desenvolvimento web com HTML, CSS e JavaScript. Ele contém instruções e exercícios sobre essas tecnologias, incluindo 289 exercícios de fixação, 164 exercícios complementares e 56 questões de prova.
O documento apresenta uma introdução sobre os fundamentos da Web, abordando tópicos como protocolos HTTP e HTTPS, requisições e respostas entre cliente e servidor, URLs, MIME types e uma breve história da evolução da Web e das linguagens HTML.
Este documento descreve a rotina diária de uma mulher chamada Marta. Ela acorda às 7h, toma banho, veste-se e sai de casa. Geralmente toma café da manhã em uma padaria e vai de carro para o trabalho, onde chega às 9h. Às vezes sai mais tarde do trabalho. À noite, lê ou assiste a um filme antes de dormir depois da meia-noite.
O documento lista palavras e frases em francês e inglês sobre vários tópicos: material escolar, rotina diária, atividades de lazer, família, cores, números e dias da semana.
O documento discute estratégias para desenvolvimento de sites móveis, comparando abordagens como responsive web design, mobile first e adaptação no servidor. Apresenta também a biblioteca jQuery Mobile, destacando que ela permite criar webapps multiplataforma de forma não intrusiva por meio de código HTML5 e progressive enhancement.
O documento discute estratégias de design responsivo para websites adaptarem-se a diferentes dispositivos. Aborda tags semânticas do HTML5 que melhoram a acessibilidade e o SEO, além de técnicas como viewport, grid layout fluido, imagens flexíveis e media queries para estilização condicional de acordo com características dos dispositivos.
O documento discute as estratégias de desenvolvimento de aplicativos mobile, comparando o desenvolvimento nativo, mobile web apps e híbrido. Ele analisa fatores como prazo, orçamento, acesso a recursos do dispositivo, segurança, desempenho, instalação e monetização para escolher a melhor abordagem. O documento também fornece dicas sobre design responsivo para criar sites adaptáveis a diferentes telas.
O documento discute as estratégias de desenvolvimento de aplicativos mobile, comparando o desenvolvimento nativo, mobile web apps e híbrido. Ele analisa fatores como prazo, orçamento, acesso a recursos do dispositivo, segurança, desempenho, instalação e monetização para cada abordagem. O documento também discute estratégias para criar sites responsivos como media queries e layout fluido.
O documento discute o design responsivo para websites, propondo uma abordagem flexível com grid, imagens e media queries que permitem a adaptação do layout a diferentes telas. O design responsivo garante que a web seja acessível em qualquer dispositivo.
HTML5 Mobile - Aula 3 - Device OrientationJose Berardo
Aula 3 do curso HTML5 Mobile da Especializa. Tratamos sobre os sensores de posicionamento e movimento do aparelho.
A leitura desses sensores varia de acordo com o browser mas já é plenamente viável no iOS e Androids mais atuais (acima do honeycomb).
O documento introduz conceitos fundamentais da World Wide Web, incluindo seu histórico, modelo cliente-servidor, protocolos HTTP e URL, e linguagem HTML. O documento também discute a diferença entre Internet e WWW.
O documento apresenta uma aula introdutória sobre HTML5. Apresenta os tópicos a serem abordados: o que é HTML5, suas vantagens, comandos básicos, como salvar e enviar arquivos. Inclui explicações sobre tags como <canvas> e <video> e recursos como geolocalização e cache de aplicações. Demonstra como criar um arquivo HTML simples, inserir imagens, hospedar o site na internet e concluir o processo de publicação.
O documento discute elementos multimídia em HTML, incluindo vídeo e áudio. Explica que o elemento <video> é usado para reproduzir vídeos e o elemento <audio> é usado para reproduzir áudios, e ambos suportam diferentes formatos de arquivo como MP4, WebM, Ogg e MP3. Além disso, descreve os atributos, métodos e eventos desses elementos para controlar a reprodução de mídia.
O documento descreve como criar tabelas em HTML. Explica que tabelas são usadas para apresentar dados tabulares em linhas e colunas e fornece exemplos básicos de tabelas usando as tags <table>, <tr> e <td>. Também discute atributos comuns como border, width, align e valign.
A selection of teacher training materials on the area of developing creative ideas in order to build personalised content. The activities are suitable for both resource poor and resource rich contexts and have been tested with teachers in a range of different learning contexts, globally.
O documento apresenta Luiz Felipe F. M. Costa, um estudante de Sistemas de Informação que estuda front-end web por conta. Ele explica o objetivo do documento que é entender como sites funcionam, o poder das aplicações web e como aprender a desenvolver para a web. O documento é dividido em duas partes, a primeira sobre front-end e back-end e a segunda sobre HTML5, PHP e onde aprender mais.
1) O documento apresenta um caderno de exercícios de HTML com 8 exercícios iniciais que ensinam elementos básicos como cabeçalhos, parágrafos, links e imagens.
2) Os exercícios subsequentes abordam tópicos mais avançados como cores, alinhamento, tabelas e frames.
3) O objetivo é que os alunos aprendam a linguagem HTML através da realização prática destes exercícios.
Desenvolvimento-web-com-html-css-e-javascriptManuel Fernando
Este documento é um treinamento sobre desenvolvimento web com HTML, CSS e JavaScript. Ele contém instruções e exercícios sobre essas tecnologias, incluindo 289 exercícios de fixação, 164 exercícios complementares e 56 questões de prova.
O documento apresenta uma introdução sobre os fundamentos da Web, abordando tópicos como protocolos HTTP e HTTPS, requisições e respostas entre cliente e servidor, URLs, MIME types e uma breve história da evolução da Web e das linguagens HTML.
Este documento descreve a rotina diária de uma mulher chamada Marta. Ela acorda às 7h, toma banho, veste-se e sai de casa. Geralmente toma café da manhã em uma padaria e vai de carro para o trabalho, onde chega às 9h. Às vezes sai mais tarde do trabalho. À noite, lê ou assiste a um filme antes de dormir depois da meia-noite.
O documento lista palavras e frases em francês e inglês sobre vários tópicos: material escolar, rotina diária, atividades de lazer, família, cores, números e dias da semana.
O documento discute estratégias para desenvolvimento de sites móveis, comparando abordagens como responsive web design, mobile first e adaptação no servidor. Apresenta também a biblioteca jQuery Mobile, destacando que ela permite criar webapps multiplataforma de forma não intrusiva por meio de código HTML5 e progressive enhancement.
O documento discute estratégias de design responsivo para websites adaptarem-se a diferentes dispositivos. Aborda tags semânticas do HTML5 que melhoram a acessibilidade e o SEO, além de técnicas como viewport, grid layout fluido, imagens flexíveis e media queries para estilização condicional de acordo com características dos dispositivos.
O documento discute as estratégias de desenvolvimento de aplicativos mobile, comparando o desenvolvimento nativo, mobile web apps e híbrido. Ele analisa fatores como prazo, orçamento, acesso a recursos do dispositivo, segurança, desempenho, instalação e monetização para escolher a melhor abordagem. O documento também fornece dicas sobre design responsivo para criar sites adaptáveis a diferentes telas.
O documento discute as estratégias de desenvolvimento de aplicativos mobile, comparando o desenvolvimento nativo, mobile web apps e híbrido. Ele analisa fatores como prazo, orçamento, acesso a recursos do dispositivo, segurança, desempenho, instalação e monetização para cada abordagem. O documento também discute estratégias para criar sites responsivos como media queries e layout fluido.
O documento discute o design responsivo para websites, propondo uma abordagem flexível com grid, imagens e media queries que permitem a adaptação do layout a diferentes telas. O design responsivo garante que a web seja acessível em qualquer dispositivo.
O documento discute as opções para desenvolvimento de aplicativos móveis multiplataforma. Apresenta as principais plataformas móveis e suas respectivas participações de mercado, além dos desejos dos desenvolvedores. Em seguida, discute o uso de tecnologias web como HTML5, CSS3 e JavaScript para criar aplicativos híbridos, permitindo o desenvolvimento para múltiplas plataformas com uma única base de código. Por fim, resume os principais frameworks cross-platform.
Desenvolvendo APPs para múltiplas resoluçõestalkitbr
O documento discute como projetar aplicativos para várias resoluções de tela. Ele explica que manter uma identidade visual simples e pensar em todos os dispositivos é importante. Também discute técnicas como escalonamento de pixels efetivos, pontos de quebra e reorganização de elementos na tela para se adaptar a diferentes tamanhos.
Esta apresentação explica o que se deve levar em consideração na criação das aplicações adaptativas para múltiplas resoluções - seguindo o ponto de vista da Microsoft
O documento discute boas práticas para desenvolvimento mobile web, incluindo lidar com diferentes navegadores, conectividade limitada e recursos escassos. Ele cobre como detectar dispositivos no servidor, usar marcação simples e lazy load para imagens, reduzir tráfego com Ajax/Hijax, e otimizar com gzip e minificação. Ferramentas de debug limitadas são também discutidas.
Android: mercado mobile e visão geral da plataformaJonas Alves
Aborda assuntos como o mercado mobile e os principais componentes do framework:
- Views
- Content Providers
- Resource Manager
- Notification Manager
- Activity Manager
entre outros relacionados a Android e mobile.
A palestra foi patrocinada pela Kees Informática.
Diferenças entre web e mobile, coisas que funcionam num lado e se tornam um desastre no outro e cuidados especiais a ter quando se lida com dispositivos móveis e com ecrãs mais reduzidos.
O panorama actual das implementações de motores de widget. As diferentes resoluções dos terminais, os vários motores de rendering e capacidade de acesso ao hardware para melhor integração com a plataforma. O que evitar a nível de Javascript, HTML e CSS.
O documento apresenta uma introdução ao desenvolvimento mobile, descrevendo os principais tipos de dispositivos, plataformas e ferramentas. Cobre tópicos como interface, banco de dados, backend, análise de projeto e formas de monetização de aplicativos móveis.
O documento discute aplicações responsivas e webdesign responsivo. Resume três principais técnicas de webdesign responsivo: layout fluído com valores percentuais, imagens flexíveis e consultas a mídias. Também discute performance como aspecto crucial para aplicações móveis.
O documento resume um treinamento sobre desenvolvimento para Android. Aborda o que é Android, sua estrutura baseada em Linux, e ferramentas como a máquina virtual Dalvik e a loja de aplicativos Android Market. Também discute brevemente as diferentes versões do Android.
O documento discute o mercado de dispositivos móveis, plataformas e como começar a desenvolver para esses dispositivos. Ele apresenta estatísticas sobre o crescimento do mercado brasileiro de celulares e tablets, descreve as principais plataformas como Android, iOS, BlackBerry e Windows Phone, e oferece dicas para desenvolvedores iniciantes como usar emuladores e não ter medo de danificar aparelhos.
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013javamanrj
Este documento discute a criação de aplicativos desktop usando HTML, CSS e JavaScript. Apresenta diversas ferramentas para embutir páginas web em aplicativos nativos, como TideSDK, node-webkit, Chromium Embedded Framework e PhoneGap. Recomenda TideSDK e node-webkit como as melhores opções atuais.
O documento discute os fundamentos da HTML5, incluindo tags semânticas, links descritivos, meta tags e formas de adicionar semântica a documentos HTML como RDFa, Microformats e Microdata. Apresenta exemplos dessas técnicas e discute como elas melhoram a acessibilidade e o desempenho de sites.
Slides da quarta aula do curso de HTML5 da Especializa. O curso está disponível gratuitamente no endereço: http://ead.especializa.com.br/curso/html5-basico
Este documento fornece uma agenda para um curso de certificação Java OCA. A agenda inclui 10 macrotemas como introdução à certificação Java, tipos de dados, classes, herança e exceções. Cada macrotema será dividido em tópicos específicos como tecnologia Java, orientação a objetos, tipos de aplicações Java e estrutura de um arquivo Java.
Slides introdutórios do curso Java Certified Associate da Especializa Treinamentos.
http://www.especializa.com.br/curso/oca-javaassociate
Esse curso prepara para o novo exame de certificação Java da Oracle, 1z0-803, que proporciona a titulação Oracle Certified Associate, Java Programmer I.
Publicamos mais sobre o assunto em nosso blog:
http://especializa.com.br/blog/2013/02/07/certificacao-java-nos-tempos-da-oracle/
Quarta sequência de slides do curso de Android da Especializa Treinamentos
http://www.especializa.com.br/curso/android
Assunto desta aula:
- Application (Mais detalhes do AndroidManifest.xml)
- Activity
- Fragment
O documento fornece uma introdução ao desenvolvimento para Android, abordando os principais tópicos como:
1) Ambiente de desenvolvimento, incluindo download de ferramentas como Android SDK, SDK Manager, AVD Manager e Eclipse ADT Plugin;
2) Conceitos básicos como requisitos de hardware e software, APIs, emulador e depuração com ADB e DDMS;
3) Detalhamento de ferramentas como SDK Manager para baixar APIs, AVD Manager para criar dispositivos virtuais e emulador.
Este documento apresenta uma ementa detalhada sobre o treinamento de Android, incluindo 8 tópicos principais como introdução ao Android, ambiente de desenvolvimento, conceitos básicos, entre outros. Apresenta também informações sobre as versões do Android, tipos de dispositivos, mercado mobile e a arquitetura do sistema operacional Android.
Java é uma linguagem de programação amplamente utilizada para desenvolvimento de aplicações corporativas. O anúncio busca um desenvolvedor com experiência em frameworks como Spring e Hibernate para construir aplicações robustas e escaláveis.
O documento apresenta uma aula sobre fundamentos de HTML5. Aborda tópicos como documentos HTML, marcações, estrutura básica de um documento HTML, novas tags semânticas do HTML5 como <header>, <nav> e <section>, elementos de texto como listas e citações, e modos e doctypes dos navegadores.
Palestra apresentada no Dia D 2009 da comunidade Debian-PE.
Fizemos uma breve contextualização e discutimos algumas novidades da versão 5.3.0 como:
namespaces
late static bindings
lambda functions
closures, etc
A certificação PHP da Zend é um reconhecimento de conhecimento em PHP e tecnologias relacionadas. Ela cobre tópicos como sintaxe, OOP, banco de dados, segurança, XML e serviços web. Para se preparar, recomenda-se cursos, livros, revistas e simulados. O exame dura 90 minutos e é preciso registrar-se no site da Zend para comprar o voucher e agendar a prova.
O documento discute diversas certificações para desenvolvedores, incluindo certificações Sun (Java), Zend (PHP), IBM, Linux (Red Hat, LPI e CompTIA). Ele explica o que são certificações, seus benefícios, como se preparar e o processo de obtenção. É fornecido detalhes sobre os requisitos, estrutura e custos de várias certificações específicas.
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...Faga1939
Este artigo tem por objetivo apresentar como ocorreu a evolução do consumo e da produção de energia desde a pré-história até os tempos atuais, bem como propor o futuro da energia requerido para o mundo. Da pré-história até o século XVIII predominou o uso de fontes renováveis de energia como a madeira, o vento e a energia hidráulica. Do século XVIII até a era contemporânea, os combustíveis fósseis predominaram com o carvão e o petróleo, mas seu uso chegará ao fim provavelmente a partir do século XXI para evitar a mudança climática catastrófica global resultante de sua utilização ao emitir gases do efeito estufa responsáveis pelo aquecimento global. Com o fim da era dos combustíveis fósseis virá a era das fontes renováveis de energia quando prevalecerá a utilização da energia hidrelétrica, energia solar, energia eólica, energia das marés, energia das ondas, energia geotérmica, energia da biomassa e energia do hidrogênio. Não existem dúvidas de que as atividades humanas sobre a Terra provocam alterações no meio ambiente em que vivemos. Muitos destes impactos ambientais são provenientes da geração, manuseio e uso da energia com o uso de combustíveis fósseis. A principal razão para a existência desses impactos ambientais reside no fato de que o consumo mundial de energia primária proveniente de fontes não renováveis (petróleo, carvão, gás natural e nuclear) corresponde a aproximadamente 88% do total, cabendo apenas 12% às fontes renováveis. Independentemente das várias soluções que venham a ser adotadas para eliminar ou mitigar as causas do efeito estufa, a mais importante ação é, sem dúvidas, a adoção de medidas que contribuam para a eliminação ou redução do consumo de combustíveis fósseis na produção de energia, bem como para seu uso mais eficiente nos transportes, na indústria, na agropecuária e nas cidades (residências e comércio), haja vista que o uso e a produção de energia são responsáveis por 57% dos gases de estufa emitidos pela atividade humana. Neste sentido, é imprescindível a implantação de um sistema de energia sustentável no mundo. Em um sistema de energia sustentável, a matriz energética mundial só deveria contar com fontes de energia limpa e renováveis (hidroelétrica, solar, eólica, hidrogênio, geotérmica, das marés, das ondas e biomassa), não devendo contar, portanto, com o uso dos combustíveis fósseis (petróleo, carvão e gás natural).
Em um mundo cada vez mais digital, a segurança da informação tornou-se essencial para proteger dados pessoais e empresariais contra ameaças cibernéticas. Nesta apresentação, abordaremos os principais conceitos e práticas de segurança digital, incluindo o reconhecimento de ameaças comuns, como malware e phishing, e a implementação de medidas de proteção e mitigação para vazamento de senhas.
As classes de modelagem podem ser comparadas a moldes ou
formas que definem as características e os comportamentos dos
objetos criados a partir delas. Vale traçar um paralelo com o projeto de
um automóvel. Os engenheiros definem as medidas, a quantidade de
portas, a potência do motor, a localização do estepe, dentre outras
descrições necessárias para a fabricação de um veículo
Este certificado confirma que Gabriel de Mattos Faustino concluiu com sucesso um curso de 42 horas de Gestão Estratégica de TI - ITIL na Escola Virtual entre 19 de fevereiro de 2014 a 20 de fevereiro de 2014.
3. EMENTA
• Imersão em mobile browsers
• Mobile Displays
• Touchscreen
• Sensores
• Frameworks e bibliotecas
3
4. O QUE VEREMOS AGORA
• Imersão em mobile browsers
• Detecção de Mobile browsers e funcionalidades
• Particularidades
• Estratégias para aplicativos mobile
• Simuladores Android, iOS e Blackberry
• MobileDisplays
• Touchscreen
• Sensores
• Frameworks e bibliotecas
4
8. DETECÇÃO DE BROWSERS
• window.navigator
• Assinatura do browser capturada no Javascript
• User-Agent
• Cabeçalho HTTP que retém a assinatura do browsers
• Ex (php):
• <?php
if(preg_match('Android|BlackBerry|PalmSource|iPhone|iPad' .
'Samsung|Nokia|MIDP|SymbianOS',
$ _SERVER[‘HTTP_USER_AGENT’]) {
echo "Mobile Browser na área";
}
?>
• http://detectmobilebrowsers.com/
• http://www.useragentstring.com/pages/Mobile%20Browserlist/
6
9. TERA-WURFL
• Wireless Universal Resource File
• Banco de dados universal de todos os dispositivos móveis do
planeta.
• Projeto em PHP com base de dados MySQL, MSSQL ou
MongoDB que deve ser instalado no seu servidor
• Disponível também via Webservice
• Base alimentada por usuários no mundo inteiro:
• https://db.scientiamobile.com/
• Mais informações:
• http://dbapi.scientiamobile.com
7
10. MODERNIZR
• Script
de uso geral para detecção das
capacidades do navegador
• Cria dinamicamente classes na tag <html> para diversas
funcionalidades presentes no navegador
• class="js no-touch postmessage history multiplebgs boxshadow
opacity cssanimations csscolumns cssgradients csstransforms
csstransitions fontface localstorage sessionstorage svg inlinesvg no-
blobbuilder blob bloburls download formdata wf-active"
• Ajuda na hora de implementar seu css:
• #meuDiv { background: url(‘img/sombra.png’); }
• .boxshadow #meuDiv {
background: none;
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.20);
}
8
11. MODERNIZR
• Script
de uso geral para detecção das
capacidades do navegador
• Possui uma API javascript simples para detecção de
funcionalidades
• if (Modernizr.touch) {
// código com touch
} else {
// código com click
}
9
12. PARTICULARIDADES MOBILE
•O mundo mobile é:
• Menor
• Handsets (smartphones) foram feitos para caberem na palma
da mão
• Mais variado
• Aspectos, densidades, orientações, métodos de input (dpad,
trackball, touch, multitouch)
• Mais difícil
• Handsets são muitas vezes manuseados pelo polegar (um
dedo meio estabanado)
• Mesmo usando o indicador, a precisão não é a mesma de um
mouse (e não há ponteiros passeando na tela)
10
13. ESTRATÉGIAS
• Site exclusivo para mobile devices
• Cheque o UserAgent no servidor e redirecione para uma
versão exclusivamente mobile do site
• Prós: Maior simplicidade na construção da interface do projeto
• Contras: Mais de um ponto de manutenção do sistema
• Site adaptável (responsivo)
• Utilize Media Queries
• Cheque capacidades dinamicamente
• Prós: Único projeto para todas as plataformas
• Contras: Construção da interface muito mais complexa
11
14. ESTRATÉGIAS
• Mobile Web App
• Aplicativos acessíveis a partir do próprio navegador
• Prós: Não há a necessidade de instalação prévia
• Contras: Perdem espaço com áreas do próprio navegador e
não ficam presentes em home screen do usuário
• Mobile Standalone App
• Aplicativos acessíveis após instalação
• Prós: Ficam como ícones em home screen, podem ser
encontrados em lojas como Apple Store e Google Play e
suprimem espaços mortos das barras do browser
• Contras: Mais complexos. Normalmente, devem usar Cache
API, Storage API e realizar checagem online/offline do
navegador para sincronizações de dados
12
15. SIMULANDO AMBIENTE
• Apple iOS
• iOS Simulator, disponível apenas para Mac e já vem no pacote
de instalação do XCode
• https://developer.apple.com/devcenter/ios/index.action
• Google Android
• Android Virtual Device (AVD)
• http://developer.android.com/sdk/index.html
• RIM BlackBerry
• Máquina virtual VMWare simulando o S.O. do celular
• http://us.blackberry.com/developers/resources/simulators.jsp
13
18. O QUE VEREMOS AGORA
• Imersão em mobile browsers
• Mobile Displays
• Resoluções, dimensões, densidades, aspect-ratios e zoom
• Meta Viewport e cálculos de espaço
• Touchscreen
• Sensores
• Frameworks e bibliotecas
16
19. MOBILE DISPLAYS
• Dimensões
• Celulares evoluíram desde mecanismos grandes com telas pequenas
para produtos finos e leves com amplas telas de altíssima resolução
• No mundo mobile, menos sempre foi mais. Quanto menor (e mais leve) fosse o
aparelho, mais portátil e atraente. Foi essa característica que tornou os
celulares tão presentes e indispensáveis no mundo atual
• Por outro lado, quanto maior e mais clara é a tela, mais versátil é o produto.
Ou seja, é possível ler, jogar, assistir a vídeos e realizar atividades profissionais
e cotidianas se o produto for pequeno o suficiente com tela grande o bastante
• O iPhone se popularizou com a dimensão de tela 3.5”, mas outros
smartphones vieram acima das 4” e os tablets podem ultrapassar 10” de tela.
• A diversidade de dimensões e proporções dificulta a vida das webapps
17
20. MOBILE DISPLAYS
• Resoluções
• A evolução dos desktops sempre foi pautada na capacidade de se
obter maior resolução.
• As telas foram cada vez cabendo mais conteúdo e em geral as coisas
sempre foram suficientemente legíveis
• Os primeiros monitores de S.O.s gráficos foram capazes de, em 14”, exibir
640x480 pixels
• Com a evolução das placas de vídeo e a popularização dos monitores de 15”
de telas planas, a resolução 800x600 pixels ditou os limites dos sites por anos
• Monitores CRT de 17” foram em geral utilizando resoluções 1024x768 pixels
• Em um aumento de pouco mais de 20% da tela, houve um aumento de mais
de 60% de resolução e mesmo assim coisas ficaram ainda mais nítidas
• O monitores LCD e LED conseguiram “acochar” ainda mais os pixels
e resoluções ainda maiores vieram em telas de dimensões similares
• O aspect-ratio padrão passou de 4:3 (padrão de TV) para 16:10 (widescreen) e
alguns até 16:9 (cinema) e não variaram mais além disso
18
21. O QUE É UM PÍXEL?
• Pixels físicos
• Pontos reais do dispositivo. Sua capacidade de exibir pontos de luz.
• CSS Pixels
• Pontos físicos que compõem uma tela máxima imaginária chamada
de layout viewport
• Device Pixels
• Antigamente, o mesmo que pixels físicos
• Os Androids passaram a informar pixels diferentes dos reais do
aparelho a partir de padrões de densidade (DPI - Dots Per Inch)
• Os iPhones seguiram a idéia com o conceito de Retina Display
19
22. MOBILE DISPLAYS
• Resoluções e aspect-ratio em aparelhos móveis
• Celulares foram criados para ligar, mas aos poucos foram tomando a
forma de outros produtos portáteis de nosso dia a dia
• Isso fez gerar uma infinidade de tamanhos, resoluções e aspectos de telas
• Nos dispositivos móveis, a busca por maiores resoluções sempre
existiu, no entanto, esbarra-se no que é possível enxergar
• Overview mode
• Os browsers dos celulares nasceram navegando por páginas criadas
para o mundo desktop, onde cabe mais coisas legivelmente
• Usuários não costumas gostar de conteúdo com rolagem horizontal. Fica difícil
ler se a cada linha temos que rolar a tela
• A solução para browsers mobile foi aplicar zoom out para visão geral de todo o
conteúdo de telas que não foram criadas pensando neles
• Hoje, webapps focadas em dispositivos móveis são feitas para caberem
nesses aparelhos sem a necessidade do zoom out padrão do navegador
20
23. ZOOM
• Browsers possuem a capacidade de condensar
pixels em operações de zoom
• Quando há um zoom out, os pixels CSS
passam a ocupar um espaço menor do que
os pixels do dispositivo (device pixels)
• Quando há um zoom in, os pixels CSS vão
consumir mais pixels do dispositivo para
exibir o conteúdo
• Dispositivospodem assim ser capazes de
renderizar na área visível uma resolução maior do
que a indicada em seus device pixels
• http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
• http://www.alistapart.com/articles/a-pixel-identity-crisis/
21
24. DENSIDADE
• Maior resolução no mesmo espaço de tela significa maior densidade
de pixels, medida em PPI (pixels per inch)
• Para saber a densidade de uma tela faça os seguintes cálculos:
• Eleve a largura da tela ao quadrado, faça o mesmo com a altura e some os
resultados
• Tire a raíz quadrada desta soma anterior e divida pela dimensão em polegadas
da tela
• Exemplo da tela padrão do Macbook Pro de 13”:
• w = 1280, h = 800
• dp = Math.sqrt(1638400 + 640000) = 1509.4369811290567
• PPI = 1509.4369811290567 / 13” = 116.11
• http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
22
25. MEDIDAS DO IPHONE
• Tela de 3.5” com resolução 320x480 pixels
• Aspect-ratio de 1.5 (ou 2:3) vertical na área total e 1.1125 no
viewport
• Densidade de
165PPI
• Já é acima do
praticado em
monitores
desktop
ou notebooks
23
26. MAIS ESPAÇO NO IPHONE
• Prática
para se obter mais 60px de viewport no
iPhone (retirando a barra de endereços)
• Evitar zoom do usuário e escalar para o tamanho do dispositivo
• <meta name="viewport" content="user-scalable=no, width=device-
width, initial-scale=1 maximum-scale=1"/>
• Ampliar o conteúdo para além da área visível sem a barra
• body {min-height: 416px;}
• Provocar um scroll para o primeiro pixel do conteúdo
• window.scrollTo(0,1);
• Todo scroll Javascript faz o Safari calcular se é interessante retirar a barra a
fim de ganhar espaço. No Android, o Firefox e o Ópera já retiram a barra
sem precisar desta prática.
24
27. MAIS ESPAÇO NO IPHONE
•OSafari permite salvar uma página como aplicativo
standalone. Basta seguir os passos:
• Solicitar fullscreen (retirar a barra de
endereço e de botões)
• <meta name="apple-mobile-web-app-capable"
content="yes" />
• Mandar salvar a página como aplicativo
• Adicionar à Home Screen
• Após salvar, clique no ícone da app
para abri-la em fullscreen
• http://mobile.tutsplus.com/tutorials/
mobile-web-apps/remove-address-bar/
25
28. IOS WEBAPP
•É possível detectar se a webapp está rodando em
modo browser (como uma página) ou diretamente
como aplicativo
• Propriedade navigator.standalone (false se foi chamada pelo
browser)
• Pode ser uma boa prática verificar se a app não está standalone
(está em modo browser) para sugerir que salve na Home Screen
• if (!navigator.standalone) {
alert(‘Adicione esta aplicação à sua Home Screen para chamá-la
diretamente sem precisar do navegador’);
}
26
29. RETINA DISPLAY
• Em 2010, o iPhone 4 aumentou a densidade de
pixels de seu display de 165ppi para 330ppi
• A Apple, por jogada de marketing, chamou isso de retina display,
alegando que acima de 300ppi, o olho humano não consegue mais
detectar os limites dos pixels, assim, com 330, ela colocou 30 pixels
além da nossa capacidade de perceber
• Isso dobrou a resolução
do dispositivo, de
320x480px para
impressionantes
640x960px em uma tela
de apenas 3.5”
• O lado negativo foi que
todas as webapps vistas
no novo iPhone
passariam a ocupar
apenas metade do
espaço do viewport
27
30. IPHONE PIXEL RATIO
• window.devicePixelRatio
• A fim de continuar exibindo as webapps do mesmo jeito, esta
variável foi criada nos dispositivos móveis mais modernos
• Ela aponta a razão de device pixels para CSS pixels
• O iPhone 4, retina display, veio com um devicePixelRatio de
2. Ou seja, 1px no CSS (e no Javascript) ocupa 2px no
dispositivo
• Assim, screen.width e screen.height continuaram apresentando
320X480px e as webapps existentes não quebraram
28
31. MEDIDAS DOS ANDROIDS
• Variam bastante por aparelho
• Desde 176 x 220 em celulares mais simples,
passandos por 480 x 800 de alguns
Androids, (ex.: Samsung Galaxy SII),
chegando a 2560x1600 em tablets
• Existem padrões de classificação de
tamanhos e densidades (low, medium,
high, extra high)
29
32. ANDROID PIXEL RATIO
• window.devicePixelRatio no Android
• A linha top dos dispositivos Android está acima de 200ppi de
densidade (hdpi e xhdpi).
• Nos casos dos aparelhos com resolução 480x800px, o
devicePixelRatio dos browsers costumam ser de 1.5, ou seja 3 device
pixels para cada 2 css pixels
• Linha Samsung Galaxy
• O Galaxy Note possui resolução de 800x1280px (a mesma do
Macbook Pro de 13”, em uma tela de 5.3”). Possui devicePixelRatio
no Opera Mobile acima de 2
• O Galaxy SIII chegou a 306ppi e apresenta devicePixelRatio acima de
2 também. Curiosamente, abandonou o aspect-ratio de 16:10 em
função do 16:9 em resolução de 1280x720px (padrão HD 720p) na
sua tela de 4,8”
30
33. DENSIDADE EM TABLETS
• Tablets Android não costumam repetir a mesma densidade
dos smartphones
• Acer Iconia Pad, Motorola Xoom 2 e Galaxy Tab são mdpi, não
chegando a 150ppi. O Amazon Kindle Fire é mais denso mas só
atinge 170ppi
• Asus Google Nexus 7 (Android Jelly Bean)
• Lançado em Junho de 2012, alcançou a resolução de 1280x800px
(aspecto 16:10) em uma tela de 7”. Densidade de 216ppi.
• Ainda abaixo dos 264ppi do iPad 3. Este pode chegar a
2048x1536px, em sua tela de 9,7”. Aspect-ratio de 4:3
• Microsoft Surface
• Sua versão Pro chega a 1920x1080px (padrão Full HD, aspecto 16:9)
em tela de 10.6”, o que dá uma densidade de 208ppi
31
34. META VIEWPORT
• width/height
• Dimensões em CSS pixels
• Ex.: <meta name="viewport" content="width=320px">
• device-width/height
• Dimensões em device pixels. Read only
• initial-scale:
• Nível de zoom inicial do viewport
• Ex.: <meta name="viewport" content="initial-scale=1">
• user-scalable:
• Booleano que indica se será possível ou não aplicar zoom
• Ex.: <meta name="viewport" content="user-scalable=no">
• Ex. geral:
<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
32
35. CÁLCULOS DE ESPAÇO
• Javascript
• screen.width/height: Largura e altura da tela em device pixels
• Alguns browsers subtraem o espaço da barra superior no Android
• window.innerWidth/Height: Largura e altura da janela aberta
• Medida de espaço da área da janela, em CSS pixels
• muda quando se dá zoom, quanto menos zoom, mais espaço
• element.client/offset/scrollWidth/Height: Espaço do elemento
• Referências:
• http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-
viewport/
• http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
33