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.

Rails Girls - Introduction to HTML & CSS

609 views

Published on

Rails Girls - Introduction to HTML & CSS

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Rails Girls - Introduction to HTML & CSS

  1. 1. A Rails Girls Introduction to HTML & CSS Rails Girls Helsinki, Finland, Spring 2015 Timo Herttua & Vesa Vänskä
  2. 2. Agenda 1. Why HTML & CSS are crucial in life? 2. Why HTML & CSS are crucial in RG? 3. Bonus: Why to learn them already today and not tomorrow 4. Division of Labor on the Internet 5. The Front-end Bentobox 6. Live demo: Codeacademy 7. Extra credit exercise 8. Appendix: instructions, HTML primer, Frontend Bentobox
  3. 3. Why HTML & CSS ● Perhaps the single most important, and easiest to grasp entry point to the world of web tech ○ WYSIVCTWYG or “What you see is very close to what you get” ● Many of today’s professional developers started with making websites ● The other entry point you typically hear is computer graphics (CG) and/or games (i.e. the Finnish Demoscene*) – which are much more difficult to make than websites ● The third, and perhaps hardest entry point, is tinkering with hardware (e.g. Commodore, Amiga, Arduino, Raspberry Pi, drones, robots, etc.), because of so many moving parts and “low level” programming languages involved *Wikipedia article about the Demoscene: http://en.wikipedia.org/wiki/Demoscene; A Finnish TV series about the Demoscene: http://areena.yle. fi/tv/demoscene; Grand Cru’s account of the Demoscene: http://grandcrugames.com/2013/03/what-the-hll-is-in-the-water-of-finland/
  4. 4. HTML & CSS in the Internet ● Close to everything you see on the internet is a combination of HTML, CSS & JavaScript ● Even some apps on iOS & Andoid are made with them (e.g. Facebook’s first gen mobile) ● Web browser is the universal app that everyone has ● HTML, CSS & JS are the language of the web, and the web browsers ● HTML, CSS & JS are open source standards, meaning that no plugins are required to run them
  5. 5. Role of HTML & CSS in Rails Girls ● Rails Girls is an introduction to (web application) technology ● Rails in Rails Girls refers to “Ruby on Rails”, a popular web application programming framework (Rails) built with the Ruby programming language ● Web applications are pieces of software that dynamically generate HTML pages that make further use of CSS and JavaScript to make them more visually pleasing and interactive
  6. 6. Today: HTML; tomorrow: (among other things) dynamic generation of HTML ● Web applications are used to transmit and transform information by dynamically generating HTML based on user inputs (e.g. Facebook’s chat) ● In order to understand web applications, you need to understand HTML ● In order to make web applications pretty, you need CSS ● In order to make web applications more interactive / responsive, you need JavaScript
  7. 7. A bonus “why” ● By engaging with HTML & CSS today, you’ll increase your chances of getting access to a personal coach for a 3-6 month period to help you enter the world of web tech in great company! ● Details on how exactly, stay tuned for more info later in the presentation
  8. 8. What is a website made of? ● An HTML page is ○ a structured text file with hyperlinks ■ to other HTML pages ■ to assets, such as ● embedded files, that the browser can display, such as ○ images ○ videos ○ audio ● CSS stylesheets ● script files (JavaScript) ● downloadable files such as PDF’s,
  9. 9. A website, “visually” <html> <head> <title>Google</title> <link rel="stylesheet" type="text/css" href=" /style/style.css"> </head> <body> <div id="logo" style="/images/logo.png"></div> <input id="keywords"> <button id="search">Google Search</button> <button id="lucky">I'm Feeling Lucky</button> </body> </html> HTML: http://www.google.com/index.html or just http://google.com body { background-color: white; } button { background-color: light grey; } Stylesheet: style.css Google logo: logo.png
  10. 10. Connected devices such as smart TV’s Clients and servers Server (a.k.a backend a.k.a. the cloud) Desktop web browser Mobile device web browser & embedded browsers in “hybrid apps” Client (a.k.a frontend) examples: The cloud (=many servers someone else like Amazon or Google owns, priced per usage per month, not per physical server) Structured data (HTML, JSON, XML, …)
  11. 11. HTTP request - response cycle Browser Server 1. Request to http://google.com 2. Server decides what it wants to respond Web page 3. The response tells the browser what to show in the browser 4. The browser renders the page
  12. 12. Division of labor on the Internet For browsers: HTML <h1>This is a heading</h1> <p>This is a paragraph</p> <img src=”cat_picture.gif” /> <video><source src=" cat_video.mp4" type="video/mp4"></video> For JS / servers: JSON / XML {“presenters”: [{“id”: 1, “name”: “Vesa”}, {“id”: 2, “name”: “Timo”}]} Structured content CSS body { background-color: red; }; JavaScript confirm(“Are you ready for some cat vids?”); // OK or Cancel Adobe Flash Microsoft Silverlight ... The Browser (=frontend) (e.g. Chrome, Firefox, Safari, ..) Style & behavior Rails, CakePHP, Django, Spring Ruby, PHP, Python, Java Frameworks (=productivity tools by programmers for programmers) Languages (=ways to instruct machines) The Server (=backend) (proprietary) Browser plugins
  13. 13. What was all that Confucianism? The Rails Girls workshop uses the Bentobox model to make the world of tech more approachable by helping you attach meaning to the many acronyms of tech (HTML, JS, CSS, etc.) Read more: http://blog.railsgirls.com/post/20405930015/bentobox-learn-the-language-of-technology
  14. 14. Using the Bentobox today Frontend Bentobox Backend (tomorrow’s subject)
  15. 15. Frontend Bentobox The Browser (=frontend) The Frontend Bentobox The Server (=backend) (i.e. “not frontend” stuff) Behavior Style Content for browsers Content for servers / backend
  16. 16. Frontend Bentobox The Browser (=frontend) The Frontend Bentobox: acronyms The Server (=backend) (i.e. “not frontend” stuff) Behavior Style Content for browsers Content for servers / backend HTML <h1>This is a heading</h1> <p>This is a paragraph</p> <img src=”cat_picture.gif” /> <video><source src=" cat_video.mp4" type="video/mp4"></video> CSS body { background-color: red; }; JavaScript confirm(“Are you ready for some cat vids?”); // OK or Cancel JSON / XML {“presenters”: [{“id”: 1, “name”: “Vesa”}, {“id”: 2, “name”: “Timo”}]} Ruby Rails MongoDB Hadoop Backbone Bacon.js
  17. 17. Frontend Bentobox The Browser (=frontend) The Frontend Bentobox: tasks The Server (=backend) (i.e. “not frontend” stuff) Behavior Style Content for browsers Content for servers / backend Display a picture of a kitteh Make the background red Confirm that the user actually wants to delete a file Transfer World Bank statistics needed to determine relationship of GDP and birth rate Perform serious data crunching on which kitteh should be shown to which user
  18. 18. Frontend Bentobox Exercise: acronyms & tasks Rules: Figure out the term and place it on the bentobox in the right place. There might be false friends and doubles. Googling allowed! ● HTML ● JavaScript ● PHP ● EcmaScript ● CSS ● Java ● jQuery ● Angular ● JSON ● Ember ● XML ● Rails ● Make the font size bigger ● Have a chat app show new messages without having to refresh the page ● Show an ordered list of items (e.g. todo list) Acronyms Tasks
  19. 19. Live demo: HTML & CSS on Codecademy.com Let’s look at the first exercise, “HTML Basics”: http://www.codecademy.com/en/tracks/web
  20. 20. Extra credit exercise: earn a badge! ● Option 1: CodeSchool.com video course https://www. codeschool.com/courses/front-end-foundations (requires a free signup, the part about HTML is free) ● Option 2: Codecademy.com text-based course http: //www.codecademy.com/en/tracks/web (requires a free signup, the whole course is free) ● For extra credit: ○ Post a link to your badge(s) here (see appendix for instructions): https://docs.google.com/a/efekta.fi/forms/d/1DlXmnyicUvmvprjipXTyBdALoymksF1b9irtv5TDLPc/viewform
  21. 21. Appendix
  22. 22. Extra Credit Instructions: How to find the URLs to badges http://www.codecademy.com/users/username/achievements CodeCademy.comCodeSchool.com https://www.codeschool.com/users/12345
  23. 23. HTML primer: principles ● HTML documents are a set of nested “tags” which declare the structure of a document ○ e.g. <p>This is a paragraph of text</p> ● Most tags have a starting tag (<[tag]>) and an ending tag (</[tag]>) ● Tags can be nested inside each other, e.g.
  24. 24. HTML “hello world”, or a very simple example – open up a text editor*, save to index.html and open with a web browser <body> <h1>Hello Rails Girls!</h1> <h2>Menu</h2> <ul> <li><a href=”about.html”>About</a></li> </ul> <p>If you paste this into a text file and save it as index. html, it should work if you open it in your browser.</p> </body> * text editor is a (desktop) application that edits plain text files, for example HTML, CSS, JavaScript and Ruby. Examples of free text editors are: https://atom.io/ http://www.sublimetext.com/ or http: //brackets.io/
  25. 25. HTML primer: basic tags <html> </html> HTML tags declare the file is an HTML document. Everything else is nested inside these tags. <h1> </h1> <h2> </h2> Heading tags (H1, H2, H3, H4, ..) are meant for declaring different levels (H1 is more important than H2) of headings <ul> <li></li> </ul> <ol> <li></li> </ol> UL (unordered list) and OL (ordered list) declare lists of list items, LI, which are essentially bullet points and numbered lists <p> </p> Paragraph of text. Each new paragraph automatically leaves a little space between the previous. <a href=”http://google.com”>Google</a> Anchor tags can be used to make links to other pages, files, images, etc. Note that the A tag has a “href” attribute, which is used to tell that the anchor tag points to some other file than itself. <img src=”logo.png”> <img src=”http://example.com/logo.png”> The IMG tag is used for embedding image files into the page, and the “src” attribute is used to tell which file should be embedded. The example uses a “relative file path” on the local server, which means that the file should be found in the same folder as the HTML file with the filename of logo.png. You can also link to pictures on other sites using a path starting with “http://”, which is known as “hotlinking” and considered bad practice. Note that the IMG tag does not have a separate end tag.
  26. 26. HTML primer: index.html <html> <head> <title>Google</title> <link rel="stylesheet" type="text/css" href="/style/style.css"> </head> <body> <h1>Main heading</h1> <ul> <li>Home</li> <li>About</li> </ul> <p>Paragraph text</p> </body> </html> Declares the document as HTML Header: helps the browser prime the page before showing any content Link to CSS file in the header Closing tag for header and start tag for page body, which is shown to user H1 heading tag for the main heading UL tag for an unordered list and LI tags for individual list items P tag for paragraph text Closing tags for body (visible part of the page) and html tag (which explicitly tells the browser where the document ends)
  27. 27. Frontend Bentobox The Browser (=frontend) The Frontend Bentobox The Server (=backend) (i.e. “not frontend” stuff) Behavior Style Content for browsers Content for servers / backend
  28. 28. Photo credits (Creative Commons) ● Gold iPhone 6: http://pl.wikipedia.org/wiki/IPhone#mediaviewer/File:IPhone_6_Gold_Side.png ● Dell rack server: http://it.wikipedia.org/wiki/Rack_(informatica)#mediaviewer/File:Servers_at_LAAS_(FDLS_2007)_0392c.jpg ● Samsung Smart Tv: https://www.flickr.com/photos/samsungtomorrow/7505176858/ ● Google Logo: http://commons.wikimedia.org/wiki/File:Googlelogo.png

×