Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ada Lovelace Day 2017

114 views

Published on

We were celebrating Ada Lovelace Day 2017 with a workshop organized by Lesbian-feminist university where we were learning about web technologies.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Ada Lovelace Day 2017

  1. 1. Ada Lovelace Day 2017 Web technologies and Lezba.si/Dyke.tech
  2. 2. ● Intro ○ Ada Lovelace Day- History ○ Lezba.si ○ Firefox and help at MDN ● HTML ○ Source code ○ Code added with JavaScript/jQuery ○ Changing code ● CSS ○ Changing styles ○ Images ○ Images as code Topics for today ● Good to know ○ Google and robots.txt ○ Saving data in the browser - cookies and Local Storage ○ Privacy badger ● JavaScript ○ Variables ○ If, for, forEach ○ RegEx ○ Elements on the web page ○ Getting data from web pages ● Lezba.si/Dyke.tech - solving tasks
  3. 3. 1. https://www.lezba.si 2. https://developer.mozilla.org/en-US/ 3. https://www.mozilla.org/en-US/firefox/new/ 4. http://lizzythelezzy.com/ 5. https://www.lezfemuniverza.org/ 6. https://moments.epic.net/#bird 7. https://www.typewithpride.com/ 8. http://edition.cnn.com/robots.txt 9. https://www.facebook.com/robots.txt 10. http://edition.cnn.com/ 11. https://www.eff.org/privacybadger 12. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions 13. https://www.typewithpride.com/ 14. http://radiostudent.si/dru%C5%BEba/sektor-%C5%BE/podcast 15. https://www.lezba.si Links
  4. 4. mozilla.org/en-US/firefox/new/
  5. 5. developer.mozilla.org
  6. 6. Open new tab CTRL + Klik
  7. 7. Change font size Ctrl + Ctrl -
  8. 8. Web page is built with ● HTML ● CSS ● JavaScript ● Images ● Fonts …
  9. 9. lizzythelezzy.com
  10. 10. Task: Review code #1 ● Right click > View Page Source ● Ctrl + U
  11. 11. lezfemuniverza.org
  12. 12. Task: Review code #2 ● Right click > View Page Source ● Ctrl + U
  13. 13. Firefox Developer Tools
  14. 14. Task: Review code #3 - Inspector tab F12
  15. 15. HTML Elements ● body ● H1 ● ... Attributes ● class= ● id= ● style= ● src=
  16. 16. Task: HTML ● Select an element on the web page ● Use the search ● Change content ● Add elements ● Remove elements
  17. 17. CSS Style HTML elements
  18. 18. body { /* background color */ background: #000; } #id { /* hide element */ display: none; } .class { font-size: 20px; }
  19. 19. Task: CSS Change CSS and see changes on the website ● Color of the background ● Font size ● Hide title, image...
  20. 20. moments.epic.net/#bird
  21. 21. Images
  22. 22. typewithpride.com
  23. 23. Images as code
  24. 24. SVG
  25. 25. SVG <svg class="sqs-svg-icon--social" viewBox="0 0 64 64"> <use class="sqs-use--icon" xlink:href="#twitter-icon"></use> <use class="sqs-use--mask" xlink:href="#twitter-mask"></use> </svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:none"> <symbol id="twitter-icon" viewBox="0 0 64 64"> <path d="M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0 .1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z"></path> </symbol> <symbol id="twitter-mask" viewBox="0 0 64 64"> <path d="M0,0v64h64V0H0z M44.7,25.5c0,0.3,0,0.6,0,0.8C44.7,35,38.1,45,26.1,45c-3.7,0-7.2-1.1-10.1-2.9 c0.5,0.1,1,0.1,1.6,0.1c3.1,0,5.9-1,8.2-2.8c-2.9-0.1-5.3-2-6.1-4.6c0.4,0.1,0.8,0.1,1.2,0.1c0.6,0,1.2-0.1,1.7-0.2 c-3-0.6-5.3-3.3-5.3-6.4c0,0,0-0.1,0-0.1c0.9,0.5,1.9,0.8,3,0.8c-1.8-1.2-2.9-3.2-2.9-5.5c0-1.2,0.3-2.3,0.9-3.3 c3.2,4,8.1,6.6,13.5,6.9c-0.1-0.5-0.2-1-0.2-1.5c0-3.6,2.9-6.6,6.6-6.6c1.9,0,3.6,0.8,4.8,2.1c1.5-0.3,2.9-0.8,4.2-1.6 c-0.5,1.5-1.5,2.8-2.9,3.6c1.3-0.2,2.6-0.5,3.8-1C47.1,23.4,46,24.5,44.7,25.5z"></path> </symbol> </svg>
  26. 26. data:image/jpeg;base64,/9j/7AARRHVja3kAAQAEAAAAZAAA/+EDMWh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8APD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz 4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS41LWMwMjEgNzkuMTU1NzcyLCAyMDE0LzAxLzEzLTE5OjQ0OjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3J nLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpz dFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowNDk2NTIyMTE1MDIxM UU3QjhENEFFMDUxNUQ3Mjk1NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowNDk2NTIyMjE1MDIxMUU3QjhENEFFMDUxNUQ3Mjk1NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA0OTY1MjFGMTUwMjExRTdCOEQ0 QUUwNTE1RDcyOTU3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjA0OTY1MjIwMTUwMjExRTdCOEQ0QUUwNTE1RDcyOTU3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGT AAAAAAf/bAIQAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAgICAgICAgICAwMDAwMDAwMDAwEBAQEBAQECAQECAgIBAgIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM 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
  27. 27. HTML <div> <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38 GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" /> <img src="//d2wd18kp3k18ix.cloudfront.net/no rdicdesign2017/pens.svg" alt="Pens" /> </div> CSS div { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZ J….."); }
  28. 28. Task: CSS With CSS ● Add an image to the background of HTML element
  29. 29. Task: Add image in the background with CSS #page{ background: url("https://static1.squarespace.com/static/58e d2d6244024330c0a58707/t/58ee4bed9de4bbc8715ce8c a/1497857366405/?format=1500w"); }
  30. 30. Task: Add image in the background with CSS #page { background: url("data:image/jpeg;base64,/9j/7AARRHVja3kAAQA EAAAAZA..."); }
  31. 31. cnn.com/robots.txt Sitemap: http://www.cnn.com/sitemaps/sitemap-index.xml Sitemap: http://www.cnn.com/sitemaps/sitemap-news.xml Sitemap: http://www.cnn.com/sitemaps/sitemap-video-index.xml Sitemap: http://www.cnn.com/sitemaps/sitemap-section.xml Sitemap: http://www.cnn.com/sitemaps/sitemap-interactive.xml User-agent: * Allow: /partners/ipad/live-video.json Disallow: /editionssi Disallow: /ads Disallow: /aol Disallow: /audio Disallow: /beta Disallow: /browsers Disallow: /cl Disallow: /cnews Disallow: /cnn_adspaces Disallow: /cnnbeta Disallow: /cnnintl_adspaces Disallow: /development Disallow: /help/cnnx.html Disallow: /NewsPass Disallow: /NOKIA Disallow: /partners Disallow: /pipeline Disallow: /pointroll Disallow: /POLLSERVER Disallow: /pr/ Disallow: /PV Disallow: /quickcast Disallow: /Quickcast Disallow: /QUICKNEWS Disallow: /test Disallow: /virtual Disallow: /WEB-INF Disallow: /web.projects Disallow: /search
  32. 32. Cookies and saving data in the browser
  33. 33. eff.org/privacybadger
  34. 34. JavaScript In the console
  35. 35. Variables
  36. 36. Numbers var one = 1; one = Math.random();
  37. 37. String var word; word = 'beseda'; word.length;
  38. 38. Array var list = [1, 2, 3]; list.length;
  39. 39. Object var myObj = { name: "LFU", location: "World" }; myObj.name
  40. 40. Boolean var bool = true; var bool = false;
  41. 41. Null var moon = null;
  42. 42. Function function add(num) { return num + num; } var result = add(5); console.log(result);
  43. 43. If
  44. 44. var one = 1, first = 1, best = 1; if (one === first) { console.log(They are the same'); } else if (first === best) { console.log('Top 2!'); } else { console.log ('They are not the same'); }
  45. 45. For loop
  46. 46. for (var i = 1; i < 10; i++) { console.log('LFU'); }
  47. 47. for (var i = 1; i < 10; i++) { console.log(Math.random()); }
  48. 48. forEach
  49. 49. var list = [1, 2, 3]; list.forEach( item => console.log(item) );
  50. 50. Regular Expressions RegEx
  51. 51. ^HTML
  52. 52. developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
  53. 53. var name = 'LFU' var pattern = /LFU/; // whole word // var pattern = /^L/; // beginning // var pattern = /U$/; // end // var pattern = /.{3}/; // 3 characters // var pattern = /.*/; // anything // var pattern = /L.U/; // LIU, LAV ... if (pattern.exec(name) !== null) { console.log(name) }
  54. 54. Let’s play with elements on the web site
  55. 55. Get elements $$(selector)
  56. 56. $$('h2') $$('div li') $$('#page') $$('.black')
  57. 57. $$('li').forEach( item => console.log (item) );
  58. 58. $$('h2').forEach( h2 => console.log(h2.innerText) )
  59. 59. $$('img').forEach( img => console.log(img.src) )
  60. 60. radiostudent.si/dru%C5%BEba/sektor-%C5%BE/podcast
  61. 61. Task: Get data from the web site ● All titles ● All mp3 links
  62. 62. All titles $$('h3 a span').forEach( title => console.log(title.innerText) )
  63. 63. All mp3 links $$('.enclosure a').forEach( a => console.log(a.href) )
  64. 64. All mp3 links - alternative $$('[href$=".mp3"]').forEach( a => console.log(a.href) )
  65. 65. Remember, multiple solutions are available!

×