Este curso tem como objetivo dotar os participantes de conhecimentos em 3 tecnicas fundamentais de Responsive Web Design: Floating e Positioning, Liquid Layout com Atributos Responsive e extended Media Queries.

No final deste curso os participantes saberão:

·         Alavancar técnicas de responsive floating, de compensação e de posicionamento

·         Leverage responsive floating, clearing and positioning techniques

·         Optimizar e reduzir marcação com CSS3 sintaxe seletor pseudo

·         Implementar fontes da web e tipografia, formulários de resposta e animação CSS

·         Desenhar extended media queries para responsive Web Design

·         Criar menus de navegação ocultados que funcionam em qualquer dispositivo

·         Seguir as melhoras práticas de suporte aos browsers modernos

Este Curso destina-se a todos os profissionais envolvidos na elaboração, concepção, desenvolvimento e manutenção de websites e que tenham bastante  experiência com HTML.

1 -    Isolating Content from Design

·         Introduction to Cascading Style Sheets (CSS)

·          Assessing the benefits of CSS

·          Supporting multiple devices and browsers

·          Selecting via element, class or ID

·          Decoding the CSS Color Model

·         Integrating style sheets

·          Evaluating inline vs embedded style

·          Linking to external style sheets

·          Leveraging the Cascade Inheritance Model

·          Revising markup for performance

·          Fixing Internet Explorer quirks

2 -    Leveraging the CSS Box Model

·         Navigating HTML container attributes

·          Styling margins, borders, and padding

·          Exploiting single and multiple background

·          Replacing align attribute with float and clear

·          Distinguishing relative from absolute position

·          Exploring transparency and rounded borders

·         Adopting accessible units of measure

·          Tailoring global style resets

·          Overriding author styles

·          Preventing element and image misuse

·          Defining accessibility obligations

3 -    Enhancing Style with CSS3

·         Selecting elements for style

·          Manipulating DOM elements by content

·          Extending DOM selections via behavior or position

·          Optimizing rules via group selectors

·          Targeting elements with contextual selectors

·          Advancing selections with pseudo elements

·          Combining multiple backgrounds

·         Enhancing web typography

·          Applying shadow, overflow and wrap

·          Embedding custom fonts

·         Creating 2D and 3D effects

·          Customizing box shadows and gradients

·          Implementing rounded corners

4 -    Extending CSS3 with Advanced Effects

·         Drawing attention with focal points

·          "Speaking" with speech bubbles

·          Producing breaking-news ribbons

·          Adding dynamic tooltips

·          Customizing box shadows and gradients

·         Managing images for effect

·          Clipping images to fit

·          Masking images for effect

·          Replacing images with transformed text

·         Transforming content with animation

·          Leveraging transitions and transforms

·          Grouping images into sprites

5 -    Designing Responsive Content

·         Contrasting modern vs traditional design

·          Assessing mobile-specific design theory

·          Incorporating a mobile-first design

·          Designing forms for responsive layout

·         Enhancing relative element size

·          Analyzing CSS3 viewpoint units of measure

·          Performing basic calculations with calc()

·         Exploiting CSS3 flexible layout

·          Assigning flexible image resets

·          Developing flexible embedded media resets

·          Composing meta tags for viewport control

·          Introducing the flexible box layout module

6 -    Combining CSS with Dynamic Content

·         CSS properties and JavaScript

·          Detecting CSS3 and HTML5 support

·          Creating responsive menu navigation

·          Investigating selector and value pre-processing

·          Manipulating depth of field backgrounds

·          Delaying content load via viewpoint status

·         Supporting legacy browsers

·          Testing for CSS support with Modernizr

·          Polyfilling CSS in legacy browsers

·          Offloading JavaScript rerendering to CSS classes