devwiki:html

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
Next revisionBoth sides next revision
devwiki:html [2021/08/27 09:01] – [HTML5 Standards] yingdevwiki:html [2021/12/20 07:19] – [html select dropdown and remove focus] 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|bootstrap 3]]
 +
 +  * bootstrap (twitter): http://getbootstrap.com/getting-started/#download
 +    * 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
 +
 +**CSS Pre-processor**
 +  * SASS/SCSS/LESS likes, it turns what you write into a css code
 +    * in SASS, variable support, nesting
 +**HTML pre-processor**
 +  * hammer?
 +**javascript pre-processor**
 +  * coffeescript
 +
 +to read about web
 +  * http://bradfrost.github.io/this-is-responsive
 +  * http://browserstack.com
 +
 +Done:
 +  * PACKT Responsive Web Design From Concept to Complete Site
 +<code>
 +https://www.youtube.com/watch?v=R52AsglN0DE
 +https://colorlib.com/wp/html5-one-page-website-templates/
 +https://colorlib.com/wp/one-page-website-templates/
 +https://onepagelove.com/tag/html5
 +https://html5up.net/fractal
 +https://designscrazed.org/flat-onepage-responsive-html5-templates/
 +https://designscrazed.org/free-responsive-html5-css3-templates/
 +http://www.informit.com/articles/article.aspx?p=1405555&seqNum=4
 +https://www.youtube.com/watch?v=FqMIyTH9wSg
 +https://www.youtube.com/watch?v=gxM1XErjMrc
 +https://www.youtube.com/watch?v=topjvXzjdYM
 +https://www.youtube.com/results?sp=SBTqAwA%253D&q=fast+way+to+build+cross+platform+mobile+app
 +https://www.youtube.com/channel/UCGp1zoGrCqT54f32L6tGgqg/videos
 +https://www.youtube.com/watch?v=A6Jq7NVBVxU
 +https://www.youtube.com/watch?v=KBPIRen9ABI
 +https://www.youtube.com/watch?v=sCnGSOaaZFo
 +https://www.youtube.com/watch?v=C-UwOWB9Io4
 +https://www.youtube.com/watch?v=jbopML8dnqg
 +https://www.youtube.com/watch?v=PE81fyfEJUA
 +
 +</code>
 +
 +example
 +<code>
 +http://preview.themeforest.net/item/definity-multipurpose-onemulti-page-template/full_screen_preview/12379946?ref=cirvitis
 +http://www.octarinethemes.com/demos/definity/#multipage
 +http://www.octarinethemes.com/demos/definity/index-fs-slider-mp.html
 +http://www.octarinethemes.com/demos/definity/index-fs-video-mp.html
 +http://www.octarinethemes.com/demos/definity/index-kenburn-mp.html
 +http://www.octarinethemes.com/demos/definity/index-fw-slider-mp.html
 +http://www.octarinethemes.com/demos/definity/index-animated-mp.html
 +http://www.octarinethemes.com/demos/definity/index-fw-video-mp.html
 +http://www.octarinethemes.com/demos/definity/index-text-mp.html
 +http://www.octarinethemes.com/demos/definity/index-freelancer-mp.html
 +http://www.octarinethemes.com/demos/definity/index-agency-mp.html
 +http://www.octarinethemes.com/demos/definity/index-agency2-mp.html
 +http://www.octarinethemes.com/demos/definity/#onepage
 +http://www.octarinethemes.com/demos/definity/#speciality
 +
 +</code>
 +
 +====== HTML5 Elements (Widgets) ======
 +
 +**Video**
 +
 +  * code for video <code html>
 +<style>
 +video#bgcover{ 
 +  min-width:100%; min-height:100%; 
 +  width: auto; height:auto; 
 +  background: url(./image/my_video.png) no-repeat;
 +  background-size: cover;
 +</style>
 +
 +<!-- if no poster, it will loop -->
 +<video id='bgcover' autoplay poster='./image/my_video.png'>
 +  <source  src='./image/my_video.ogv' type='video/ogv' />
 +  <source  src='./image/my_video.webm' type='video/webm' />
 +  <source  src='./image/my_video.mp4' type='video/mp4' />
 +</video>
 +</code>
 +
 +====== 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://www.script-tutorials.com/html5-charts-and-graphs/
 +
 +Resource
 +  * list of HTML5 chats library
 +    * http://www.webresourcesdepot.com/category/goodies/charts/
 +    * http://mag.splashnology.com/article/15-awesome-free-javascript-charts/325/
 +    * social visualization : http://readwrite.com/2008/03/13/the_best_tools_for_visualization#awesm=~oHD0na5GWy5jvS
 +  * D3 data driven graph library: http://d3js.org/
 +  * arbor.js a graph visualization library: http://arborjs.org/
 +  * yFile, a diagram library: http://www.yworks.com/en/products_yfileshtml_about.html
 +  * Neo4j, Graph Database
 +    * http://www.neo4j.org/
 +    * demo: http://www.youtube.com/watch?v=h1OIUnqRjH4
 +  * a cloud service based on easy infograph building: https://www.kickstarter.com/projects/trinachi/infoactive-drop-live-data-into-interactive-infogra
 +
 +Reference
 +  * advanced feature of HTML5s: 
 +    * http://webdesignledger.com/inspiration/12-fun-clever-examples-of-html5
 +    * http://www.chromeexperiments.com/
 +    * http://www.brianmokeefe.com/html5_graph
 +    * http://updates.html5rocks.com/
 +  * HTML5 api: http://www.w3.org/TR/html5/embedded-content-0.html 
 +
 +App
 +  * online HTML5 3D graph plot: http://www.graphycalc.com
 +  * online 3D card folder: http://caa1211.github.io/webOAcard/?m=castle
 +  * online 3D ship viewer: http://www.eveonline.com/universe/spaceships/avatar/
 +  * social network lined canvas: http://9elements.com/io/projects/html5/canvas/
 +
 +Simulation
 +  * http://codepen.io/suffick/pen/KrAwx
 +
 +====== Web GL ======
 +
 +  * a Japanese ref site: http://wgld.org/
 +
 +====== Javascript for Web ======
 +
 +===== Style related operation =====
 +
 +  * toggle class with jquery: http://www.w3schools.com/jquery/html_toggleclass.asp
 +  * toggle class without jquery:
 +    * http://codepen.io/qualitydixon/pen/GoeOOP
 +    * <code javascript>
 +function toggleColor() {
 +  var myButtonClasses = document.getElementById("btn1").classList;
 +
 +  if (myButtonClasses.contains("blue")) {
 +    myButtonClasses.remove("blue");
 +  } else {
 +    myButtonClasses.add("blue");
 +  }
 +  if (myButtonClasses.contains("red")) {
 +    myButtonClasses.remove("red");
 +  } else {
 +    myButtonClasses.add("red");
 +  }
 +}
 +</code>
 +
 +===== 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(".my_choice")
 +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(".my_choice")
 +tmp_choice_input.selectedIndex = "0";
 +</code>
  • devwiki/html.txt
  • Last modified: 2023/02/07 18:21
  • by ying