Web Development

Lession One: Introduction

Created by Feng Zhichao

http://www.chaojiwudi.com

chaojiwudi.com

History

history of web

Dinosaur Ages

dinosaur ages

Dinosaur Ages

<html>
<head>
<title>TITLE</title>
<style type="text/css">
.TITLEPage { width:300px;border-collapse:collapse;background-color:white; }
.TITLEPage td { font:normal 14px/1.5em Goudy, Georgia, serif;color:#47ae32; }
***snip (all of the css is like the above)***
</style>
***snip***
<table>
<td width="350px" height="128px"> <td><a href="/css">blah
</a> <a onclick="clickHander();return false"
 href="/css/properties/" style="color:red"></a> </td>
***snip (the pattern above repeats about 10 times)***
</table>
<br><br><br>
</html>

Standard Ages

web standard

Standard Ages

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Morden Ages

morden ages

Agenda

  • html, css, javascript
  • Web Standard
  • Accessibility
  • Usability
  • Performance
  • Security
  • Advanced

html, css, javascript

Separation of concerns

  • html: content
  • css: style
  • javascript: behaviour

demo

Integrity

  • Uniformity in Implementation
  • Cross Browser
  • Web Standard
  • Data Interchange

  <img alt="floorplan" src="http://host/floorplan.jpg" />
  <a title="save" href="http://host/save">Save</a>

Accessibility

  • Semantics
  • Text, images and sound
  • Multimedia Fallback
  • User agents, client browsers and media players
  • Assistive technologies
  • Web accessibility standard

demo

Usability

  • Users don’t read web pages, they scan them
  • Site search and site map
  • Workflow and UI controls
  • Meaningful feedback
  • Registration

Performance

  • Cache
  • Maximizing parallel downloads
  • Css, javascript, images
  • Third-party

Security

  • Privacy
  • Cross-site scripting
  • SQL injection
  • Do not trust user input

一次简单的 Cross-Site Scripting XSS 跨站脚本攻击

Advanced

  • Progressive enhancement
  • Responsive web design
  • Search engine optimization
  • Single page application
  • Mobile web

Following lessions

  • A
  • B
  • C
  • D
  • E

Q&A

Thanks!

Do it yourself!

chaojiwudi.com