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
devwiki:html [2021/06/08 14:34] – [Use custom Font in web] yingdevwiki:html [2023/02/07 18:21] (current) – [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>
 +  * 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: center;
 +    align-items: center; /* flex-start: align top, flex-end: align btm; */
 +}
 +</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.1623162876.txt.gz
  • Last modified: 2021/06/08 14:34
  • by ying