Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

TDI - Project #1 by Mind Map: TDI - Project #1
0.0 stars - 0 reviews range from 0 to 5

TDI - Project #1

CSS 3

OverView CSS (Cascade Style Sheet)

Modules

Borders, border-color, border-image, border-radius, box-shadow

Backgrounds, background-origin, background-clip, background-size, layering multiple background images

Colors, HSL colors, HSLA colors, RGBA colors, Transparency, Opacity

Texto, text-shadow, text-overflow, text-wrap

User Interface, box-sizing, resize, outline, nav-top, nav-right, nav-bottom, nav-left

Basic Box Model, overflow y, overflow x

Generated Content, content

Selectores, attribute selectors

*other modules*, media queries, multiple column layout, web fonts, speech

http://www.css3.info based on http://www.w3.org/TR/css3-roadmap/

Cross-Browser / Compatibilidades com Browsers

Css3 e Html5 - Combinação de Recursos

Guia de Referência Css3

@font-face

typekit

HTML5

Porquê HTML5 e não XHTML2?

WhatWG

W3C

New features

http://ajaxian.com/archives/introduction-to-html-5

http://htmlfive.appspot.com/

app cache and database

geolocation

web workers

Elements

root

document metadata

scripting

sections, section, nav, article, aside, hgroup, header, footer, address

grouping content

text level semantics

edit

embedded content, video, non-proprietary, canvas / svg, programmatically driven images / animation, audio

tabular data

forms

interactive elements, drag n drop, http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html http://www.alertdebugging.com/2009/08/16/on-html-5-drag-and-drop/, contenteditable

miscellaneous elements

web forms 2.0

validation

syntax

doctype

cross-browser

Características

string = "html5" http://googlecode.blogspot.com/

javascript

História

EcmaScript

Estrutura

JS no Browser

carregar javascript, como incluir?, html normal, script tag, lazy loading, modularization, dependency management

clientside JS, sem acesso ao file system, um unico thread

Objectos criados pela engine

DOM Scripting

manipular o documento é a razão de existência do JS, e a história do JS é a história da evolução do DOM nos browsers, JS: the def guide, p.298

Eventos

centralizar acções do user para permitir event driven architecture

Comunicar com o utilizador

Comunicar com o Servidor

http requests / comunicaçao assincrona, same/cross domain

consumo e manipulação de dados estruturados, JSON XML RSS JSONP, aceder a APIs, Ajax in Action, cap. 12

Persistência do lado do cliente

movimento de informação entre páginas, Ajax in Action, cap. 10 - 11, data frame, cookies, New node, URL - query string (get) - fazer set e dps parse, forms / post

Ferramentas e práticas de desenvolvimento

Tópicos avançados

Interactividade, Animação, Drag and Drop

performance, lazy loading / modularization, http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html, http://code.google.com/speed/articles/, HTTP requests, multiplos clicks - Ajax in Action, cap. 10

Criação de widgets dinâmicas - exemplo de código

Ajax in Practice

Boas práticas de programação

Frameworks, jQuery, Prototype, Dojo, YUI

esperar pelo DOM load

Quebrando os confins do Browser

online/offline, Google Gears

Bookmarklets

Serverside Javascript

Anexo - Funções úteis

Recursos

http://ajaxpatterns.org/

Introdução

origens e história da web

Info Mngmnt: a proposal

arquitectura e tecnologia base

HTTP, stateless

Cliente / Servidor

http://www.w3.org/DOM/

open web

Browsers

rendering/layout engines, webkit, Chrome, Safari, iPhone, webCore, gecko, Firefox, Netscape, Trident, Internet Explorer, http://en.wikipedia.org/wiki/Layout_engine, http://en.wikipedia.org/wiki/Comparison_of_layout_engines, Presto, Opera, http://en.wikipedia.org/wiki/Presto_%28layout_engine%29

parsers

Validation

javascript engines, V8, Chrome, Rhino, SpiderMonkey, http://www.mozilla.org/js/spidermonkey/, http://en.wikipedia.org/wiki/SpiderMonkey_%28JavaScript_engine%29, TraceMonkey, https://wiki.mozilla.org/JavaScript:TraceMonkey, http://en.wikipedia.org/wiki/List_of_JavaScript_engines

Document Object Model