Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Just Enough Code

1.040 visualizaciones

Publicado el

Introduces the idea of "Just Enough Code" -- to add a 2- or 3-week module on Web coding into courses like editing, or design, or multimedia. There are 2 reasons to do this. One is to demystify how Web and mobile sites are made. The other is to open a door -- for (at least) some students -- to something they might really have an aptitude for, something they might really enjoy, if you just have a chance to explore it.

Publicado en: Educación
  • Inicia sesión para ver los comentarios

Just Enough Code

  1. 1. Web Design in 2016: Just Enough Code Mindy McAdams University of Florida
  2. 2. These are files for you to use. I will refer to them throughout this presentation.
  3. 3. Using software tools is like this.
  4. 4. Using code is like this.
  5. 5. Warning HTML, CSS and JavaScript have all evolved over the years. Check carefully for a date on any tutorials or examples you use (books too), and teach your students to do the same.
  6. 6. Outline Step 1. Step 2. Step 3. Step 4. HTML CSS Using a text editor and managing files; document structure JavaScript and jQuery
  7. 7. HTML Step 1.
  8. 8. A free, interactive site for experimentation, for learning the tags and how they operate.
  9. 9. 1) Start with 4 essential HTML tags for (in order from top): a main heading, a paragraph, an image, and a link.
  10. 10. 2) Fill each of the essential HTML tags with (respectively) a main heading, a paragraph, an image URL, and a link URL.
  11. 11. 3) Click the “Run” command in JSFiddle.
  12. 12. 4) View the outcome in the JSFiddle “Result” pane.
  13. 13. Free, and you can save your work indefinitely.
  14. 14. 5) Encourage students to add more HTML elements, then “Run” again to update the results.
  15. 15. HTML JavaScript CSS Results
  16. 16. HTML JavaScript CSS Results
  17. 17. CSS Step 2.
  18. 18. Memorize and Teach This HTML marks up the structure of the document. Headings, paragraphs, images, links … CSS is used to control design: all the visual effects and layout of elements. Color, margins, rules and borders, fonts ...
  19. 19. Tip: Start CSS with colors, and apply them to HTML elements already used. We’re still using JSFiddle and clicking “Run” after changes to see results.
  20. 20. body refers to most of the visible page h1 a pair of h1 tags wraps the main heading at the top of the page Beginner CSS background sets the background color (this property can also be used for more) color sets the foreground color only (text color)
  21. 21. Students get pretty excited about this free site.
  22. 22. While the students are playing with CSS colors, it’s a good time to introduce link styles. a affects all links on the page a:hover affects each link when moused over
  23. 23. After colors: border margin padding
  24. 24. CSS Teaching Tips 1–4 1. Do not get into DIVs, HTML5 elements, or positioning until students have experimented thoroughly with padding, margins, and borders. 2. Using borders is a great way to learn the different effects of margins and padding.
  25. 25. CSS Teaching Tips 1–4 3. Require students to look up the “CSS box model” and create a fiddle that uses borders and explains difference between margin and padding, with visual examples. 4. Do not teach fonts until later, when the students are working with real files and not JSFiddle.
  26. 26. div Like duct tape, this element has thousands of uses. After a thorough workout with border, margin, and padding, have the students experiment with div tags.
  27. 27. HTML
  28. 28. CSS
  29. 29. One Last CSS Teaching Tip Beginners and computer-science types and random self-taught coders do many bad things with CSS. There are established Web standards that professionals follow and respect. Impress this upon your students. is a good source.
  30. 30. Using a text editor, managing files, document structure Step 3.
  31. 31. Text editor: Atom is free, and excellent.
  32. 32. Text editor: You must not use Notepad (Windows) or TextEdit (Mac), because they don't do the right things in the right way.
  33. 33. Good Work Habits 1. Always create a new folder for a new code project. 2. Inside that folder, create three separate folders for css, images, and scripts. 3. Save all files into their proper folders. 4. Do not save any project files outside that project’s folder.
  34. 34. A well-ordered project
  35. 35. Document Structure <!DOCTYPE html> <html> <head> <!-- meta tags, title, link tags --> </head> <body> <!-- all content visible to users --> </body> </html>
  36. 36. The HTML head element <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial- scale=1"> <title> Title for search engines </title> </head>
  37. 37. Now your students can create complete standalone documents outside a content management system. They can create a site consisting of many pages, or a single-page application for web, mobile or both.
  38. 38. Next Steps • Page layouts and responsive design/design for mobile devices • Responsive images • Optimizing image file size for best performance • Accessibility for people with disabilities
  39. 39. JavaScript and jQuery Step 4.
  40. 40. Why teach JavaScript and jQuery to beginners? Tip: Never say "Java" when you mean JavaScript. They are not even related! Java is a completely different programming language.
  41. 41. HTML JavaScript CSS Results
  42. 42. The aim is to start students with JS code they can manipulate, change, and run, to inspire them.
  43. 43. The three blocks of jQuery code here each do the same thing, but each block is “listening” for a different action by the user.
  44. 44. The first block of jQuery code “listens” for a change in the first text field.
  45. 45. The second block of jQuery code “listens” for a change in the second text field.
  46. 46. The third block of jQuery code “listens” for a change in the third text field.
  47. 47. The paragraph below the three text fields changes whenever you change any of the fields and then leave it (return, enter, tab).
  48. 48. There is no change until you leave the field (return, enter, tab).
  49. 49. This jQuery example is explained in the “handout” and there’s a link to the fiddle, which you can play with.
  50. 50.
  51. 51.
  52. 52. Most people learn code by looking at fairly simple scripts, playing with them, and modifying them. You don’t need to know everything to be able to do something.
  53. 53. Web Design in 2016: Just Enough Code Mindy McAdams University of Florida Twitter: @macloo