Membuat Peta Pusat Perbelanjaan dengan Menggunakan Google Maps API v3.pdf
CSS3 and a brief introduction to Google Maps API v3
-
Upload
jeffrey-barke -
Category
Technology
-
view
4.921 -
download
1
description
Transcript of CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 Watercooler Session28 April 2010
Jeffrey Barke
CSS3: What is it?
A style sheet language used to describe the presentation semantics of a document written in a markup language.
CSS specifications are maintained by the World Wide Web Consortium (W3C).
• CSS level 1 was published in December 1996.• CSS level 2 was published in May 1998.• CSS level 3 is currently under development.
CSS level 3 has been in development for a long time!
CSS3: What is it? (cont’d)
CSS3 is modularized and will be composed of several separate recommendations. Progress report at http://www.w3.org/Style/CSS/current-work#table
• CSS Template Layout (positioning)• CSS Aural Style Sheets (audio)• CSS Backgrounds and Borders• CSS Basic User Interface (forms)• CSS Basic Box Model (layout)• CSS Extended Box Model (floats)• CSS Marquee (for mobile)• CSS Cascading and Inheritance• CSS Color• CSS Fonts
...
CSS3: A bit more terminology
Each level of CSS builds on the last and adds new features.
Profiles are a subset of a CSS level designed for a particular device or use interface (mobile devices, printers and television sets).
Back to practical web design
It’s about the browsers.
So, what the browser support? Well, that's complicated. Because it's not just a binary opposition of support or not.
Except, of course, there’s IE.• IE 8 and below have no native support for any of the CSS3 modules
(except for @font-face and a few of the CSS3 selectors).• The IE 9 pre-alpha looks very good, but it requires Vista SP 2 or
Windows 7 and Internet Explorer 8. Windows XP users are SOL.
CSS Compatibility and Internet Explorer
Test drive IE 9
How/when/why to use
It’s still in draft form and browser support is patchy, so what’s the use cases?
Performance!• Slim down the markup for smaller file size• Slim the DOM for faster parsing• Fewer HTTP requests
Less compelling, but the ability to do cool things without Flash and with less JavaScript.
Probably not for a large, complicated corporate website with a lot of IE traffic.
Ways to use: Pure CSS3 approach
Use as much CSS3 as possible (say for rounded corners)
Compliant browsers get the full experience
Non-compliant browsers “gracefully” degrade (square edges)
Advantages• Per the previous slide• Less development time (no cutting images)• Less maintenance time (no re-cutting images)
Disadvantages• Design looks different in different browsers. If a large percentage of
your traffic uses IE, this is probably not good. If your CEO does a little browsing on IE and doesn’t understand what happened to the design, this is probably not good.
Ways to use: CSS3 with fallback to images
Use as much CSS3 as possible (say for rounded corners)
Create browser-specific or fallback stylesheets that use background images per usual
Advantages• Design is consistent across browsers• Compliant browsers make fewer HTTP requests (though the HTML and
DOM will not be slimmer)
Disadvantages• More development time (CSS3 + standard approach)• More maintenance time (need to remember to change things in two
places)• May require CSS hacks and may not target all browsers correctly
Ways to use: My recommendation
If your traffic/user base justifies a pure CSS3 approach, I say use it. The advantages are real and it’s the future of web design.
However, if you’re forced to do the CSS3 with fallback to images approach, I would probably avoid using CSS3 altogether (especially if the site is large or complex).
I started out doing a project the hybrid way and ended up scrapping it for background images for all browsers—I didn’t see the advantages as outweighing the development costs. Plus, the markup would be handed off to a different team for implementation and maintenance, which means that team would need to know to change the CSS3 in one place and update the background images in another.
CSS3 Selectors
Probably most familiar from jQuery.
There’s an excellent article on them at 456 Berea St
E[att^=”val”]
E[att$=”val”]
E:last-child
E:checked
E:selection
What about the performance hit? Overrated:
http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/
CSS3 Selector browser support
Probably most familiar from jQuery.
Browser Version OS Results
Chrome 5.0 Mac 43/43/0/0
Firefox 3.0 Win XP 43/36/0/7
Firefox 3.6 Mac 43/43/0/0
IE 6.0 Win XP 43/10/1/32
IE 7.0 Win Vista 43/13/4/26
IE 8.0 Win 7 43/22/1/20
IE 9 preview Win 7 43/43/0/0
Opera 10.52 Mac 43/43/0/0
Safari 4.0 Mac 43/43/0/0
All the fun new CSS rules
Borders, backgrounds, colors, columns, etc.
No new code examples, because there are a ton out there:• Style Master CSS Editor• CSS3.info CSS3 preview• CSS3 Generator
RGBA and HSLA
Alpha-transparency possible for both.
I’m not a designer, but according to Molly Holzschlag, HSL is better:• Not CRT specific• Easier, more intuitive to work with• Working with a set of colors allows for easy palette creation• Reduces errors• Reduces dependency on charts and other value lookup tools
Works in Firefox, Webkit and Opera
Notes from Molly’s presentation
HSL chart
Transforms and transitions
NSFW! The sexy stuff, however browser support is the worst here.
Transforms are presently supported in Safari 4, Chrome Firefox 3.5. and Opera 10.5
Transitions are supported in Safari 4, Chrome and Opera 10.5. Opera 10.5 pre alphas crash animating these transforms, and so this is not enabled at present for Opera.
Lightsaber
3D rotating cube
CSS3 JavaScript alternatives
CSS3 accordion
CSS Coke can
47 Amazing CSS3 Animation Demos
@font-face
Web typography is a huge issue, but the good news is that all browsers support it. However, the font format supported is another thing.
IE: .eot
Other browsers: .ttf or .otf
@font-face browser support
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('Graublau Web Regular'), local('Graublau Web'), url('GraublauWeb.otf') format('opentype');
}
Licensing is another issue altogether.
@font-face licensing
A nice overview of font embedding on the web (EOT, sIFR, font linking):
http://www.fontembedding.com/fonts-and-the-web/
Ascender study of free/shareware fonts:
http://www.ascendercorp.com/news/web-fonts-study/
Out of the 4572 fonts tested, 4385 fonts (95.9%) failed one or more of the six tests that were performed
More useful links:• Web fonts licensing overview• List of fonts available for embedding• List of commercial foundries that permit embedding
@font-face
Enter Typekit!
Advantages• They have clout when it comes to type foundries• Handle the font format issues for you
Problems:• Not free (I’m cheap!)• JavaScript-based
The future
When will CSS3 be published as a recommendation?• Some modules are stable and have been implemented• Some may be dropped, but it’s hoped that they rest will be
implemented 4-5 years
Will there be a CSS4?• Maybe, but no definite plans
When will IE 9 be released?• Hopefully in 2011
When will IE 6 finally die?• ???
Tools, links, etc.
Info, news, tutorials• CSS3.info
Toolkits, CSS Generators• CSS Generator• CSS3 Please! The Cross-Browser CSS3 Rule Generator• Modernizr
Tests, browser compatibility tables• CSS Compatibility and Internet Explorer• CSS3 Selectors Test• HTML5 Readiness• QuirksMode: CSS compatibility tables• When Can I Use…
Tools, links, etc. (cont’d)
Demos, interactive demos• 3D rotating cube• 47 Amazing CSS3 Animation Demos• CSS3.info CSS3 preview• CSS3 Generator• Style Master CSS Editor
And a very brief into to Google Maps API v3
Things to love about the new API• Smaller (faster?) for mobile platforms• No more API key!• No more GUnload! (Everyone hates to clean-up)
Things to note about the new API
• It’s marked beta (does that mean anything from Google?)• Smaller feature set
Things that are ambiguous about the new API• API style (I prefer it)
Bottom line: I would use this in production depending on the feature set required and target audience
Some early thoughts on v3
In the Google Maps JavaScript API v3 group, John Coryat writes:
From my understanding, v3 isn't a direct replacement for v2 but instead is a complete re-write from scratch. V3 on the other hand, being a complete re-write, has very few features at this point but is extremely efficient, fast loading, modular and potentially much more extensible.
I would recommend that any developer who is considering using v3 think of it as a "mobile only" API
Some early thoughts on v3
Google's response:
We wanted to get this in your hands as soon as possible, so we've intentionally released it early, and with a basic set of features. We're releasing it in Labs because it's not fully baked yet; we want to get your feedback on the new design and what you'd like to see in future revisions now that we have a chance for a fresh start.
I would urge you to not think of this as a "mobile only" API. While mobile browsers are a new focus for us, the API is fully supported on desktop browsers (including the addition of Chrome).