1. Web Design & Development Introduction to the Internet & Web design challenges in 2013

2. Internet, Packets and Routing Internet is a network of computer networks Data is transmitted by packet switching using the standard Internet Protocol (IP) Packet – a unit of information carriage Packet switching – process of moving packets from one node (computer device) to another

3. A Visualization of Internet

5. Internet, Packets and Routing At the sender, data is broken into packets and sent to the nearest node (router) At each router, it sends the packet to another router that is closer to the final destination At the receiver, packets are reassembled to get the original data A simple analogy: mailing system

6. Mailing System AB Pitt MIT Admin

7. TCP/IP and Domain Names Basic task of IP – moving packets as quickly as possible from one router to another Yet, it doesn’t check whether packets are delivered successfully, thus need TCP TCP (Transmission Control Protocol) – disassemble/reassemble packets, error checking, ACK packets

8. TCP/IP and Domain Names We need some sort of address in order to identify different nodes, as if every house has a mailing address in order to receive mail from others The one used by Internet Protocol is called IP address Every host on the Internet has a unique IP address, made up of four numbers. E.g.. 192.56.215.131, each number is between 0 and 255

9. TCP/IP and Domain Names The numbers in an IP address is hard to remember, while names are easier Domain Name System – a mapping between the human-readable name (domain name) of a host and its IP address A domain name consists of two or more parts, e.g. cs.pitt.edu The rightmost label conveys the top- level domain, e.g. edu

10. TCP/IP and Domain Names Each label to the left specifies a subdomain, in our example, subdomain is pitt (University of Pittsburgh), and sub-subdomain is cs (computer science). A top-level domain contains of multiple subdomains, each subdomain can contain multiple sub-subdomain, so on. The database contains the mapping between a domain name and an IP address is stored on a DNS server.

11. World Wide Web The World Wide Web (commonly shortened to the Web) is a system of interlinked, hypertext documents accessed via the Internet. It is created to share files/documents and overcome the barrier of different file formats Hypertext refers to text on a computer that will lead the user to other, related information on demand.

12. World Wide Web hypertext documents are created using a special kind of document formatting or “markup” language called HyperText Markup Language (HTML). HTML is sent or received over the network using HyperText Transfer Protocol (HTTP). A browser is a software program which interprets the HTML documents and displays it on the user’s screen.

13. URLs and Client-Server Model Each document/resource on the WWW needs to have an identifier in order to be accessed by others. A Uniform Resource Identifier (URI), is a compact string of characters used to identify or name a resource. A Uniform Resource Locator (URL) is a URI which provides means of obtaining the resource by describing its network “location”.

14. URLs and Client-Server Model Two things are given by the URL –Exact location of the document –The method or protocol by which to retrieve and display the document Example, http://www.cs.pitt.edu/~mehmud/cs134/inde x.html http:// – specifies the protocol www.cs.pitt.edu – specifies the host name / domain name /~mehmud/cs134/index.html – specifies the path of the document on the host

15. Putting it All Together

16. 10 Web Design Trends for 2013 1.Content First Content-first will be the center of the galaxy. We need to create efficient, searchable, accessible, multi- platform content and make sure it reaches the user via the best interactive experience possible.

17. 10 Web Design Trends for 2013 2. Simplicity of Design Interaction and Content Simplicity is the new paradigm. The process of simplification will be the only tool we have to make content accessible and readable on the greatest possible number of devices, with the best user experience. Content strategy, UX, Usability, Accessibility and Visual Design must all be guided by this new paradigm.

18. 10 Web Design Trends for 2013 3. UX Centered Design The user’s point of view and their experience of using the site and its content is what is ultimately important. All participants agree on simplification on a visual and interaction level. Traditional websites will continue to adopt mobile app UI patterns precisely because they offer a more simple and efficient user experience, which brings us to the next point, “App Style Interfaces”...

19. 10 Web Design Trends for 2013 4. App Style Interfaces Over the next few months we’re going to witness a process of transformation for most desktop websites, which will increasingly imitate the style and interfaces of mobile apps, unifying and simplifying content and design and at the same time facilitating the creation of responsive projects.

20. 5. The unification of desktop and mobile into a single version Responsive, Adaptative Content, Mobile First, Device Agnostic, Resolution Independent; all these terms are evolving towards a common destination which is the unification of desktop and mobile into a single version. 10 Web Design Trends for 2013

21. 6. Responsive Techniques The search for multi-platform versions and cross-platform technologies will lead to responsive techniques such as webfonts, design with typography and icon fonts evolving and becoming more widespread, and on a visual level we’ll see trends like the ones coming up in the next point... 10 Web Design Trends for 2013

22. 7. Flat Colors and no more skeuomorphism The main visual trends identified are simplicity, minimalism, clear layouts, app-style interfaces, design focusing on typography, less decoration, less skeuomorphic interfaces, flat style, flat colors... This exact trend towards simplification in design and seemingly aesthetic matters, such as flat colors, responds to the need to create adaptive projects and serve images and scalable elements to retina displays with excellent performance on 3G connections, but also to mobiles with inferior provisions from the non-western market and to devices such as eReaders.

23. 8. Technology Agnostic Technology agnostic, of course, is the main idea. In web standards based applications, looking at the data graphic below we can see that the HTML/ CSS/ JavaScript trio is the “primordial soup”. We then have lots of CSS in its various forms, custom filters, CSS Effects, 3D Transforms, Preprocessors and technologies such SVG ( Scalable Vector Graphics) or webfonts related to responsive techniques. It’s worth pointing out the growing interest in JavaScript for web app development, but when it comes to effects, animation, filters etc., it will step aside to make way for the new capacities of CSS3.

24. ….Contd… 8. Technology Agnostic In server-side languages Ruby and Python and experimentation with Node.js are becoming more widespread. The multiplicity of frameworks and builders will be another constant. On the other hand we have the development of native apps for iOS and Android, where there’s nothing new either, just the intense and continual increase in demand and the desire to have more suitable cross-platform technologies, based on web standard technologies or otherwise. The spread of Android means demand for Android apps seems to be gaining in importance. Another thing that really stands out is the growing interest in WebGL, particularly among the big agencies. This technology is raising high expectations thanks to its performance and the potential it offers on an experimental level.

25. 9. Experimentation and innovation in device sensors and interaction It will be a time for getting the best out of mobile technology and creating new user experiences, exploring device sensors and experimenting widely with touch-enabled- interfaces, speech-based, etc.

26. 10. The internet of things Soon we’ll be able to communicate not only with our fridges and televisions, but even with devices with tiny LED screens, In-kitchen devices, In-car audio interfaces... Hundreds of totally different platforms will spring up. Without a doubt, interactive TV will have a leading role. How will we be able to evolve towards a rational unification of all this? As Aarron Walter says, we’ll see an “Ecosystem of connected services” and we’ll have to work hard on integrating services and user accounts.