Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revisionBoth sides next revision | ||
devwiki:html [2021/08/27 09:01] – [HTML5 Standards] ying | devwiki:html [2022/07/08 02:08] – [Responsive Design] ying | ||
---|---|---|---|
Line 40: | Line 40: | ||
* solution: make sure no number in theCSSName.css | * solution: make sure no number in theCSSName.css | ||
+ | ====== Responsive Design ====== | ||
+ | * my notes on [[[[devwiki: | ||
+ | |||
+ | * bootstrap (twitter): http:// | ||
+ | * with built-in UI elements, 12 grid scaffolding | ||
+ | * amazium (less) | ||
+ | * 960 grid into 1200 grid | ||
+ | * 960 grid system -> unsemantic (sass) | ||
+ | * 12 or 16 grid system | ||
+ | |||
+ | **Responsive Elements** | ||
+ | |||
+ | * responsive image map: | ||
+ | * image map basic and tool | ||
+ | * https:// | ||
+ | * http:// | ||
+ | * (works) https:// | ||
+ | * https:// | ||
+ | * (works) js method to recalculate map when image resize (need to call when image visible): https:// | ||
+ | * (not sure, not on attemp) instead map, it use generated svg method: https:// | ||
+ | * https:// | ||
+ | * https:// | ||
+ | * (similar js but old) https:// | ||
+ | * https:// | ||
+ | **CSS Pre-processor** | ||
+ | * SASS/ | ||
+ | * in SASS, variable support, nesting | ||
+ | **HTML pre-processor** | ||
+ | * hammer? | ||
+ | **javascript pre-processor** | ||
+ | * coffeescript | ||
+ | |||
+ | to read about web | ||
+ | * http:// | ||
+ | * http:// | ||
+ | |||
+ | Done: | ||
+ | * PACKT Responsive Web Design From Concept to Complete Site | ||
+ | < | ||
+ | https:// | ||
+ | https:// | ||
+ | https:// | ||
+ | https:// | ||
+ | https:// | ||
+ | https:// | ||
+ | https:// | ||
+ | http:// | ||
+ | https:// | ||
+ | https:// | ||
+ | https:// | ||
+ | https:// | ||
+ | https:// | ||
+ | https:// | ||
+ | https:// | ||
+ | https:// | ||
+ | https:// | ||
+ | https:// | ||
+ | https:// | ||
+ | |||
+ | </ | ||
+ | |||
+ | example | ||
+ | < | ||
+ | http:// | ||
+ | http:// | ||
+ | http:// | ||
+ | http:// | ||
+ | http:// | ||
+ | http:// | ||
+ | http:// | ||
+ | http:// | ||
+ | http:// | ||
+ | http:// | ||
+ | http:// | ||
+ | http:// | ||
+ | http:// | ||
+ | http:// | ||
+ | |||
+ | </ | ||
+ | |||
+ | ====== HTML5 Elements (Widgets) ====== | ||
+ | |||
+ | **Video** | ||
+ | |||
+ | * code for video <code html> | ||
+ | < | ||
+ | video# | ||
+ | min-width: | ||
+ | width: auto; height: | ||
+ | background: url(./ | ||
+ | background-size: | ||
+ | </ | ||
+ | |||
+ | <!-- if no poster, it will loop --> | ||
+ | <video id=' | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ====== HTML 5 - Interactive Charts and Canvas ====== | ||
+ | |||
+ | * no flash, no video, just interactive graphics purely in HTML5, and with 3D as well | ||
+ | |||
+ | |||
+ | Tutorial | ||
+ | * Intro to charts and canvas: http:// | ||
+ | |||
+ | Resource | ||
+ | * list of HTML5 chats library | ||
+ | * http:// | ||
+ | * http:// | ||
+ | * social visualization : http:// | ||
+ | * D3 data driven graph library: http:// | ||
+ | * arbor.js a graph visualization library: http:// | ||
+ | * yFile, a diagram library: http:// | ||
+ | * Neo4j, Graph Database | ||
+ | * http:// | ||
+ | * demo: http:// | ||
+ | * a cloud service based on easy infograph building: https:// | ||
+ | |||
+ | Reference | ||
+ | * advanced feature of HTML5s: | ||
+ | * http:// | ||
+ | * http:// | ||
+ | * http:// | ||
+ | * http:// | ||
+ | * HTML5 api: http:// | ||
+ | |||
+ | App | ||
+ | * online HTML5 3D graph plot: http:// | ||
+ | * online 3D card folder: http:// | ||
+ | * online 3D ship viewer: http:// | ||
+ | * social network lined canvas: http:// | ||
+ | |||
+ | Simulation | ||
+ | * http:// | ||
+ | |||
+ | ====== Web GL ====== | ||
+ | |||
+ | * a Japanese ref site: http:// | ||
+ | |||
+ | ====== Javascript for Web ====== | ||
+ | |||
+ | ===== Style related operation ===== | ||
+ | |||
+ | * toggle class with jquery: http:// | ||
+ | * toggle class without jquery: | ||
+ | * http:// | ||
+ | * <code javascript> | ||
+ | function toggleColor() { | ||
+ | var myButtonClasses = document.getElementById(" | ||
+ | |||
+ | if (myButtonClasses.contains(" | ||
+ | myButtonClasses.remove(" | ||
+ | } else { | ||
+ | myButtonClasses.add(" | ||
+ | } | ||
+ | if (myButtonClasses.contains(" | ||
+ | myButtonClasses.remove(" | ||
+ | } else { | ||
+ | myButtonClasses.add(" | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== html select dropdown and remove focus ===== | ||
+ | * problem: when select dropdown, the select focus still stuck on the dropdown list, (when you press arrow key) | ||
+ | * solution: to remove focus after choose, add onchange event and remove its focus <code javascript> | ||
+ | const choice_input = document.querySelector(" | ||
+ | choice_input.onchange = function(event){ | ||
+ | choice_input.blur() // remove focus from this input | ||
+ | } | ||
+ | // also if you have onload function, you can add this to onload to reset last choice when refresh browser | ||
+ | const tmp_choice_input= document.querySelector(" | ||
+ | tmp_choice_input.selectedIndex = " | ||
+ | </ |