Web Design & Development - Session 1
10 likes8,344 views
The document provides an overview of web design and development. It begins with defining key concepts like the world wide web, web browsers, HTTP, URLs, and the W3C. It then discusses where to start with web design and the main things someone needs to learn, including HTML, CSS, JavaScript, responsive design, and server-side programming languages like PHP. The document serves as a high-level introduction to the main components of web design.
Web Design & Development - Session 1
- 1. Web Design and Development By: Shahrzad Peyman Session 1 October-2017 [email protected] 1
- 2. 2 Today’s Presentation What is the web? Web browsers HTTP Request/Response W3C Where Do I Start? What Do I Need To Learn?
- 3. What is the Web? Internet = Web ??? 3 World Wide Web (abbreviated WWW or the Web) is certainly what most people think of when they see the word “internet”. BUT the WWW is only a subset of Internet. Internet is a network of connected computers.
- 4. What is the Web? The World Wide Web (abbreviated WWW or the Web) is an information space where documents and other web resources are identified by Uniform Resource Locators (URLs), interlinked by hypertext links, and can be accessed via the Internet. 4
- 5. What is the Web? English scientist Tim Berners-Lee invented the World Wide Web in 1989. He wrote the first web browser computer program in 1990 while employed at CERN in Switzerland. So,Web Design started in early 1993, pretty close to the start of the Web itself. 5
- 6. Serving Up Your Information Let’s talk more about the computers that make up the Internet. Because they “serve up” documents upon request, these computers are known as servers. More accurately, the server is the software (not the computer itself) that allows the computer to communicate with other computers. The role of server software is to wait for a request for information, then retrieve and send that information back as quickly as possible. 6
- 7. Web Browsers We now know that the server does the servin’, but what about the other half of the equation? The software that does the requesting is called the client. On the Web, the browser is the client software that makes requests for documents. The server returns the documents for the browser to display. 7
- 9. HTTP HTTP (Hypertext Transfer Protocol) is a communication standard governing the requests and responses that take place between the browser running on the end user’s computer and the web server. 9
- 10. URLs With all those web pages on all those servers, how would you ever find the one you’re looking for? Fortunately, each document has its own special address called a URL (Uniform Resource Locator). 10
- 12. W3C 12 The World Wide Web Consortium (called the W3C for short) is the organization that oversees the development of web technologies. The group was founded in 1994 by Tim Berners-Lee, the inventor of the Web, at the Massachusetts Institute of Technology (MIT). In the beginning, the W3C concerned itself mainly with the HTTP protocol and the development of the HTML. Now, the W3C is laying a foundation for the future of the Web by developing dozens of technologies and protocols that must work together in a solid infrastructure.
- 13. Where Do I Start? One thing is certain: the Web as a communication and commercial medium is here to stay. Though my experience teaching web design courses and workshops, I've had the opportunity to meet people of all backgrounds who are interested to learning how to build web pages. 13
- 14. Where Do I Start? Whatever the motivation, the first question is always the same:" Where do I Start?" It may seem like there is an overwhelming amount of stuff to learn and it's not easy to know where to jump in. 14
- 15. Where Do I Start? The Web has become an essential part of standard business practice. We’re at the point where we just assume that a business, regardless of its size, will have a useful web site. It also remains a uniquely powerful tool for self-publishing, whether to a small circle of friends or to a worldwide audience. We can be certain that there will be a steady need for web designers and developers. 15
- 16. Where Do I Start? Your particular starting point will no doubt depend on your background and goals. However, a good first step for everyone is to get a basic understanding of how the Web and web pages work. Once you learn the fundamentals, there are plenty of resources on the Web and in bookstores for you to further your learning in specific areas. 16
- 17. Where Do I Start? The first step is understanding the fundamental of how the Web works. 17
- 18. What Do I Need to Learn? This one’s a big question. The short answer is “not everything.” You’ll learn that the term “web design” has come to encompass many skills, and you don’t necessarily need to learn all of them (most people don’t). 18
- 19. What Do I Need to Learn? “Web design” actually combines a number of disciplines, including: A. Graphic design B. Information design C. Interface design D. HTML, style sheet, and graphic production E. Scripting and programming F. Multimedia 19
- 20. Graphic Design Because the Web is a visual medium, web pages require attention to presentation and design. The graphic designer makes decisions regarding everything you see on a web page: graphics, type, colors, layout, etc. 20
- 21. Graphic Design Because the Web is a visual medium, web pages require attention to presentation and design. The graphic designer makes decisions regarding everything you see on a web page: graphics, type, colors, layout, etc. If you work as a graphic designer in the web design process, you may never need to learn any backend programming languages. 21
- 22. Information Design One easily overlooked aspect of web design is information design, the organization of content and how you get to it. Information designers also called “information architects”. 22
- 23. Interface Design If graphic design is concerned with how the page looks, interface design focuses on how the page works. The concept of usability, how easily visitors can accomplish their goals on the site, as well as the general experience of using the site, is a function of the interface design. In most cases, the interface, information architecture, and visual design of a site are tightly entwined. 23
- 24. Document Production A fair amount of the web design process involves the creation and troubleshooting of the documents, style sheets, scripting, and images that make up a site. The people who handle production need to have an intricate knowledge of HTML (the markup language used to make web documents) and style sheets, and often additional scripting or programming skills. In some cases, the tasks may be separated out into specialized positions for CSS designer, HTML author/ coder, and client-side programmer. 24
- 25. Scripting and Programming Advanced web functionality (such as forms, dynamic content, and interactivity) requires web scripts and sometimes special programs and applications running behind the scenes. Scripting and programming is handled by web programmers (also called developers). Developers who specialize in the programming end of things may never touch a graphic file or have input on how the pages look, although they need to communicate well with the information and interface designers to make sure their scripts meet intended goals and user expectations. 25
- 26. Multimedia One of the cool things about the Web is that you can add multimedia elements to a site, including sound, video, animation, and Flash movies for interactivity. 26
- 27. Frontend Versus Backend Frontend design “Frontend” refers to any aspect of the design process that appears in or relates directly to the browser. The following tasks are commonly considered to be frontend disciplines: A. Graphic design B. Interface design C. Information design as it pertains to the user’s experience of the site D. Site production, including HTML documents, style sheets and JavaScrip 27
- 28. Frontend Versus Backend “Backend”refers to the programs and scripts that work on the server behind the scenes to make web pages dynamic and interactive. In general, backend web development falls in the hands of experienced program- mers, but it is good for all web designers to be familiar with backend functionality. The following tasks take place on the backend: A. Information design as it pertains to how the information is organized on the server B. Forms processing C. Database programming D. Content management systems E. Other server-side web applications using Perl/CGI, PHP, ASP, JSP, Ruby on Rails, Java and other programming languages 28
- 29. What Do I Need to Learn? • HTML • CSS • JavaScript • Responsive Design • Server-Side Programming (PHP) 29
- 30. HTML HTML (HyperText Markup Language) is the language used to create web page documents. HTML is not a programming language; it is a markup language, which means it is a system for identifying and describing the various components of a document such as headings, paragraphs, and lists. Everyone involved with the Web needs a basic understanding of how HTML works. The best way to learn is to write out some pages by hand. 30
- 31. HTML5 Why HTML4 is boring? A. Text is just text B. No video or audio C. Dynamic capabilities are limited to javascript D. Need Flash or Silverlight to RIA(Rich Internet Application) E. Works only when you are connected to web 31
- 32. HTML5 New in HTML 5: • GeoLocation • Semantic Elements • Video/Audio • Offline Application • Local Storage • File Access • WebSockets • Server Push 32
- 33. CSS 33 While HTML is used to describe the content in a web page, it is Cascading Style Sheets (CSS) that describe how you want that content to look. In the web design biz, the way the page looks is known as its presentation. CSS is now the official and standard mechanism for formatting text and page layouts.
- 34. JavaScript 34 Despite its name, JavaScript is not at all related to Java. JavaScript is a scripting language that is used to add interactivity and behaviors to web pages, including these (just to name a few): • Checking form entries for valid entries • Swapping out styles for an element or an entire site • Making the browser remember information about the user for the next time they visit JavaScript is a language that is commonly used to manipulate the elements on the web page or certain browser window functions. There are other web scripting languages, but JavaScript (also called ECMAScript) is the standard and most ubiquitous.
- 35. Responsive Design 35 We need to sketch, visualize, test, prototype and understand the dynamic behavior on the different devices with different resolutions.Our job now is future friendly design ecosystems.
- 36. Responsive Design 36 It means that, Web page works well in your browser size, or whatever device you are using to view it. Responsive Web Design: Designing your website so that is responds to your user environment based on screen size, platform and orientation.
- 37. Responsive Design 37 Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only.
- 39. Server-side Programming 39 Some web sites are collections of static HTML documents and image files, but most commercial sites have more advanced functionality such as forms handling, dynamically generated pages, shopping carts, content management systems, databases, and so on. These functions are handled by special web applications running on the server. There are a number of scripting and programming languages that are used to create web applications, including: • CGI Scripts (written in C+, Perl, Python, or others) • Java Server Pages (JSPs) • PHP • ASP.NET • Ruby on Rails
- 40. PHP 40 • PHP is a popular, general-purpose and server- side scripting language that is especially suited to web development. • Commonly used to build web applications. • PHP: Personal Home Page --- Php Hypertext Preprocessor • PHP (Hypertext Preprocessor) was created by Rasmus Lerdorf in 1994. It is now developed and improved by a large team of people. • http://www.php.net
- 41. PHP 41 PHP2 1995 Added database support, file uploads, variables, arrays, recursive functions, conditionals, iterations, regular expression and etc. PHP3 1998 Added support of ODBC data sources, multiple platform support, email protocol, and new parser written by Zeev Suraski and Andi Gutmans. PHP4 2000 The parser was renamed the Zend Engine. Many security features were added. PHP5 2004 Adds Zend Engine 2 with object oriented programming, robust XML support, SOAP extension for interoperability with Web Services, SQLLite has been bundled with PHP. PHP7 2015 Revolution in PHP
- 42. Who Uses PHP? 42 • Yahoo! • Facebook (HACK) • Wikipedia • 20+ million other domain names
- 43. Which Tools based on PHP? 43 • Wordpress (Blog engine) • Drupal (CMS) • Slack (Chat Service) • Joomla (CMS) As of January 2013, PHP was used in more than 240 million websites (39% of those sampled) and was installed on 2.1 million web servers.
- 44. Why I Choose PHP? 44 • Cost nothing, it is free to download and use. • Open source • Runs on different platforms • Codes and solutions are easily available • Lots and lots of knowledge and documentation • Speed of development