Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
devwiki:html [2021/06/08 14:29] – ying | devwiki:html [2023/02/07 18:21] (current) – [HTML5 Elements (Widgets)] ying | ||
---|---|---|---|
Line 12: | Line 12: | ||
font-style: normal; | font-style: normal; | ||
+ | } | ||
+ | body.CN{ | ||
+ | font-family: | ||
} | } | ||
</ | </ | ||
+ | |||
+ | ===== HTML5 Standards ===== | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | <meta name=" | ||
+ | </ | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | * html5 tag attribute reference: https:// | ||
====== Problem and Solution ====== | ====== Problem and Solution ====== | ||
Line 22: | Line 41: | ||
* 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=' | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ** center image in div** | ||
+ | * horizontal center image, just put div text-align as center <code css> | ||
+ | * another way is to put image to respond to div center, margin itself, and it need to be block not inline to have margin <code css> | ||
+ | * 3rd method is to use latest div tech, flex, put div as flex< | ||
+ | .div_name{ | ||
+ | display: flex; | ||
+ | justify-content: | ||
+ | } | ||
+ | </ | ||
+ | * in 3rd method, as it is like hbox default, those elements inside div is like widget in UI, to align those widgets together, set align-items in .div_name <code css> | ||
+ | .div_name{ | ||
+ | display: flex; | ||
+ | justify-content: | ||
+ | align-items: | ||
+ | } | ||
+ | </ | ||
+ | ====== 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 = " | ||
+ | </ |