Ada Lovelace Day 2017
âą
1 gefĂ€llt mirâą489 views
We were celebrating Ada Lovelace Day 2017 with a workshop organized by Lesbian-feminist university where we were learning about web technologies.
Empfohlen
Weitere Àhnliche Inhalte
Ăhnlich wie Ada Lovelace Day 2017
Ăhnlich wie Ada Lovelace Day 2017 (20)
Mehr von Maja KraljiÄ
Mehr von Maja KraljiÄ (12)
KĂŒrzlich hochgeladen
KĂŒrzlich hochgeladen (20)
Ada Lovelace Day 2017
- 1. Ada Lovelace Day 2017 Web technologies and Lezba.si/Dyke.tech
- 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. 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
- 7. Open new tab CTRL + Klik
- 8. Change font size Ctrl + Ctrl -
- 9. Web page is built with â HTML â CSS â JavaScript â Images â Fonts âŠ
- 11. Task: Review code #1 â Right click > View Page Source â Ctrl + U
- 14. Task: Review code #2 â Right click > View Page Source â Ctrl + U
- 17. Task: Review code #3 - Inspector tab F12
- 18. HTML Elements â body â H1 â ... Attributes â class= â id= â style= â src=
- 19. Task: HTML â Select an element on the web page â Use the search â Change content â Add elements â Remove elements
- 21. body { /* background color */ background: #000; } #id { /* hide element */ display: none; } .class { font-size: 20px; }
- 22. Task: CSS Change CSS and see changes on the website â Color of the background â Font size â Hide title, image...
- 25. Images
- 28. Images as code
- 29. SVG
- 30. 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>
- 32. 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âŠ.."); }
- 33. Task: CSS With CSS â Add an image to the background of HTML element
- 35. Task: Add image in the background with CSS #page{ background: url("https://static1.squarespace.com/static/58e d2d6244024330c0a58707/t/58ee4bed9de4bbc8715ce8c a/1497857366405/?format=1500w"); }
- 38. Task: Add image in the background with CSS #page { background: url("data:image/jpeg;base64,/9j/7AARRHVja3kAAQA EAAAAZA..."); }
- 40. 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
- 41. Cookies and saving data in the browser
- 46. Variables
- 47. Numbers var one = 1; one = Math.random();
- 48. String var word; word = 'beseda'; word.length;
- 49. Array var list = [1, 2, 3]; list.length;
- 50. Object var myObj = { name: "LFU", location: "World" }; myObj.name
- 51. Boolean var bool = true; var bool = false;
- 52. Null var moon = null;
- 53. Function function add(num) { return num + num; } var result = add(5); console.log(result);
- 54. If
- 55. 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'); }
- 56. For loop
- 57. for (var i = 1; i < 10; i++) { console.log('LFU'); }
- 58. for (var i = 1; i < 10; i++) { console.log(Math.random()); }
- 59. forEach
- 60. var list = [1, 2, 3]; list.forEach( item => console.log(item) );
- 63. ^HTML
- 65. 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) }
- 66. Letâs play with elements on the web site
- 69. $$('li').forEach( item => console.log (item) );
- 73. Task: Get data from the web site â All titles â All mp3 links
- 74. All titles $$('h3 a span').forEach( title => console.log(title.innerText) )
- 75. All mp3 links $$('.enclosure a').forEach( a => console.log(a.href) )
- 76. All mp3 links - alternative $$('[href$=".mp3"]').forEach( a => console.log(a.href) )