1 / 62

WEB DEVELOpment ImmersiVE HTML & Web Fundamentals

WEB DEVELOpment ImmersiVE HTML & Web Fundamentals. Topics. How the Web Works The Development Process Separation of Concerns Work Flow Habits Getting to know HTML elements Validation. How the web works. Request/Response Rendering in the browser Local / Remote

martina-mccall
Download Presentation

WEB DEVELOpment ImmersiVE HTML & Web Fundamentals

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WEB DEVELOpmentImmersiVEHTML & Web Fundamentals

  2. Topics • How the Web Works • The Development Process • Separation of Concerns • Work Flow Habits • Getting to know HTML elements • Validation WEB DEVELOPMENT IMMERSIVE

  3. How the web works • Request/Response • Rendering in the browser • Local / Remote • Frontend / Backend Development WEB DEVELOPMENT IMMERSIVE

  4. Request / response WEB DEVELOPMENT IMMERSIVE

  5. Conversation: passing html, css, & js WEB DEVELOPMENT IMMERSIVE

  6. Rendering in the browser • Each browser has its own rendering engine to interpret and display the markup WEB DEVELOPMENT IMMERSIVE

  7. Rendering in the browser • Top to bottom, left to right WEB DEVELOPMENT IMMERSIVE

  8. Local / remote WEB DEVELOPMENT IMMERSIVE

  9. FTP (File transfer protocol) Things you will need to connect: • Ftp Address • User login • Password Should be provided by your host company or server admin. INTRODUCTION TO WEB DEVELOPMENT

  10. DEVelopment Front end (client-side) • HTML • CSS • Javascript • Back end(server-side) • Ruby • PHP • Python • PERL • C++ • Node.js WEB DEVELOPMENT IMMERSIVE

  11. DEVelopment PROCESS • Work Cycle • Planning • Stages WEB DEVELOPMENT IMMERSIVE

  12. A Typical Web Development Cycle User-Experience (UX) Information Architecture (IA) Design Development WEB DEVELOPMENT IMMERSIVE

  13. 1 UX • Who is our target audience? • How do we know if the user is hitting their goals? • What are the most important features of this site? WEB DEVELOPMENT IMMERSIVE

  14. 1 UX User Needs Business Needs Best Practices Ideal Experience WEB DEVELOPMENT IMMERSIVE

  15. 2 IA A model or blueprint for the site Resulting in deliverables such: • wireframes • flow diagrams • sitemap WEB DEVELOPMENT IMMERSIVE

  16. 2 IA : The Blueprint Sitemaps & Flow Diagrams Establish flow and order Wireframes & Content Define the user interaction and ease the handoff process to the creative team WEB DEVELOPMENT IMMERSIVE

  17. Small Site WEB DEVELOPMENT IMMERSIVE

  18. Large Site WEB DEVELOPMENT IMMERSIVE

  19. Hand drawn WEB DEVELOPMENT IMMERSIVE

  20. Brainstorming WEB DEVELOPMENT IMMERSIVE

  21. Functional WEB DEVELOPMENT IMMERSIVE

  22. Minimal WEB DEVELOPMENT IMMERSIVE

  23. iPhone WEB DEVELOPMENT IMMERSIVE

  24. 3 Design Wireframes become design comps WEB DEVELOPMENT IMMERSIVE

  25. 3 Design Each wireframe template, becomes a comp template Homepage Blog 2 column top 1 column bottom 2 column top 2 column bottom WEB DEVELOPMENT IMMERSIVE

  26. 4 FRONT END DEVELOPMENT Comps become graphics & real text general-assembly-logo.png Real Text: General Assembly offers classes, and events at the intersection of technology, design, and entrepreneurship. Together with our members, thought leaders, and seasoned practitioners, we offer a robust curriculum focused on WEB DEVELOPMENT IMMERSIVE

  27. 5 back END DEVELOPMENT Interacts with database and executes commands acting as a controller that mediates between the database model and the front end users view. If we go to www.zappos.com and search for a pair of shoes, the visual display of the images, the price and the green button "Add To Cart" is all part of the front-end. Now, when I click "Add To Cart" and this an item is moved to my shopping cart in the backend there is some logic written that says something like: "The user just clicked a button, so add this item temporarily to the database and remember this item for the user." The backend takes care of the actions and the directions of how and where to store data. WEB DEVELOPMENT IMMERSIVE

  28. Separation of concerns • HTML = structure (content) • CSS = style • Javascript = behavior WEB DEVELOPMENT IMMERSIVE

  29. Site organization WEB DEVELOPMENT IMMERSIVE

  30. HTML basics • Syntax • Document Structure • Content Tags • Element Display WEB DEVELOPMENT IMMERSIVE

  31. syntax WEB DEVELOPMENT IMMERSIVE

  32. syntax WEB DEVELOPMENT IMMERSIVE

  33. Basic Document structure <html> <head> Document metadata </head> <body> Document contents </body> </html> WEB DEVELOPMENT IMMERSIVE

  34. Content tags Heading Elements <h1>Largest Heading</h1> <h2> . . . </h2> <h3> . . . </h3> <h4> . . . </h4> <h5> . . . </h5> <h6>Smallest Heading</h6> WEB DEVELOPMENT IMMERSIVE

  35. Content tags Text Elements <p>This is a paragraph</p> <br> (line break) <hr> (horizontal rule) <pre>This text is preformatted</pre> WEB DEVELOPMENT IMMERSIVE

  36. Content tags Text Elements Logical Styles <em>This text is emphasized</em> <strong>This text is strong</strong> <code>This is some computer code</code> WEB DEVELOPMENT IMMERSIVE

  37. Deprecated tags  <b>bold</b> <i>italic</i> <u>underline</u><s>strike through</s> <menu>creates a menu</menu> <center>centers content</center> <applet>creates an applet</applet> <font>font style</font> WEB DEVELOPMENT IMMERSIVE

  38. Content tags Unordered list <ul> <li>First item</li> <li>Next item</li> </ul> WEB DEVELOPMENT IMMERSIVE

  39. Content tags Ordered list <ol> <li>First item</li> <li>Next item</li> </ol> WEB DEVELOPMENT IMMERSIVE

  40. Content tags Definition list <dl> <dt>First term</dt> <dd>Definition</dd> <dt>Next term</dt> <dd>Definition</dd> </dl> WEB DEVELOPMENT IMMERSIVE

  41. IMages • File Types • Resolution & Color Mode • Compression • Attributes INTRODUCTION TO WEB DEVELOPMENT

  42. Common File types • GIF (Graphics Interchange Format) • JPG (JPEG) (Joint Photographic Experts Group) • PNG (Portable Network Graphic) • BMP (Bitmap) • SVG (Scalable Vector Graphic) INTRODUCTION TO WEB DEVELOPMENT

  43. Lossyvs lossless • Lossless data compression makes use of data compression algorithms that allows the exact original data to be reconstructed from the compressed data • Lossy data compression does not allow the exact original data to be reconstructed from the compressed data. INTRODUCTION TO WEB DEVELOPMENT

  44. GIF (graphic interchange format) • Lossless compression that simplifies color pallette to reduce file size. • Best for sharp edged graphics with smaller range of colors. (ex: text, simple logos, and icons) • Not good for complex gradients or millions of colors (ex: photos) INTRODUCTION TO WEB DEVELOPMENT

  45. JPG (joint photographic experts group) • Lossy compression that reduces file size by loss in image fidelity. • Best for photographs and paintings of realistic scenes with smooth variations of tone and many colors. • Not as sharp at depicting text, and icons as GIF or PNG. INTRODUCTION TO WEB DEVELOPMENT

  46. PNG-8 (portable network graphic 8 bit) • Lossless data compression that was meant to replace GIF. • PNG-8 works well with text, icons, and logos with sharp edges and simplified color palettes. • Creates much larger file sizes on photos than JPGs. INTRODUCTION TO WEB DEVELOPMENT

  47. PNG-24 (portable network graphic 24 bit) • A higher 24 bit version of PNG. • Excellent results for images with transparency, which makes it work well for UI buttons. Good at both sharp edged simplified palettes and large color range gradients. • Will create a larger file size than JPG for photos however. INTRODUCTION TO WEB DEVELOPMENT

  48. Bmp (bitmap) • Left over from the days of oldver vesions os OS2 and Windows, Bitmaps for web use dithering, pattern or noise inclusion to reduce file size. • Good for making retro web 1.0 graphics. • Not ideal for maintaining clarity in web images at reasonable file sizes. INTRODUCTION TO WEB DEVELOPMENT

  49. svg (scalable vector graphic) • Lossless format that can optionally be defined as vector points instead of pixels allowing scaling. • Good for scalable graphics. • Has limited support in older versions of Internet Explorer 8 and below. INTRODUCTION TO WEB DEVELOPMENT

  50. CHOOSING image RESOLUTION There are only 72 pixels per inch on your screen. • Web = 71 dpi (ppi) • Print Newspaper = 100 dpi (ppi) • Print Magazine = 300 dpi (ppi) [NAME OF PROGRAM] CERTIFICATE PROGRAM

More Related