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
Last revisionBoth sides next revision
devwiki:html [2021/06/08 14:34] – [Use custom Font in web] yingdevwiki:html [2023/02/07 17:21] – [HTML5 Elements (Widgets)] ying
Line 18: Line 18:
 </code> </code>
  
 +
 +===== HTML5 Standards =====
 +
 +<code>
 +<!DOCTYPE html>
 +<html>
 +<head>
 +<meta charset="UTF-8">
 +<meta name="viewport" content="width=device-width, initial-scale=1">
 +</head>
 +<body>
 +</body>
 +</html>
 +</code>
 +
 +  * html5 tag attribute reference: https://www.w3schools.com/tags/ref_attributes.asp
 ====== Problem and Solution ====== ====== Problem and Solution ======
  
Line 25: 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|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
 +
 +**Responsive Elements**
 +
 +  * responsive image map: 
 +    * image map basic and tool
 +      * https://www.w3schools.com/html/html_images_imagemap.asp
 +      * http://www.htmldrive.net/items/show/704/pure-CSS-Image-Maps
 +      * (works) https://summerstyle.github.io/summer/
 +      * https://www.mobilefish.com/services/image_map/image_map.php
 +    * (works) js method to recalculate map when image resize (need to call when image visible): https://github.com/davidjbradshaw/image-map-resizer
 +    * (not sure, not on attemp) instead map, it use generated svg method: https://imagemapper.noc.io/#/
 +      * https://stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container
 +      * https://css-tricks.com/scale-svg/
 +    * (similar js but old) https://github.com/stowball/jQuery-rwdImageMaps
 +      * https://researchasahobby.com/responsive-image-clickable-areas-free/
 +**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>
 +
 +
 +** center image in div**
 +  * horizontal center image, just put div text-align as center <code css>.div_name{ text-align: center; } </code>
 +  * 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>.img_name{ margin: auto; display: block;} </code>
 +  * 3rd method is to use latest div tech, flex, put div as flex<code css>
 +.div_name{
 +    display: flex;
 +    justify-content: center;
 +}
 +</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