Internet: An international network of connected computers. The purpose of connecting computers together, of course, is to share information.

Transcription

1 Internet: An international network of connected computers. The purpose of connecting computers together, of course, is to share information. WWW: (World Wide Web) A way for information to be shared over the internet. It is unique in that it allows documents to be linked to one another via hypertext links (text displayed on a computer display with links to other text) thus forming a huge web of connected information. Website: each page of a website is one plain text word document written in a computer language known as HTML. XML: (extensible Markup Language) is not a specific language but a robust set of rules for creating other languages. HTML: (HyperText Markup Language) a markup language used to create web pages. HTML files have.html file suffixes, or file extensions. CSS: (Cascading Style Sheets) styles that describe how content looks.

2 JavaScript: A scripting language that accesses the HTML on a page and adds interactivity (transitions, animations, interactions). JQuery: A library of simplified JavaScript. Server-Side Programming: Advanced functionality such as forms, shopping carts, content management systems, databases, and so on. Serverside means it runs off the server to be more secure than running off a person s machine. PHP is a server-side scripting language used for account management. Java: Complex programming language typically used for developing large applications. Overkill for most web site needs. Small Websites: Often written just using HTML and CSS, possibly some use of JQuery Plugins, and simple PHP. Large Websites: Use HTML, CSS, Javascript, PHP, and possibly Java.

3 Hobbyist: Learn Adobe Dreamweaver. Professional Web Designer: Learn HTML, Style Sheets (CSS), and possibly basic JavaScript knowledge. Web Design Department: Large-scale websites are almost always created by a team of people.

4 Information Architect: Creates and organizes the content for a website logically. Content Strategist: Makes sure that every bit of text on the site supports the brand identity.

5 User Experience Designer: Focuses on how people interact with products, brands, and layouts within digital interfaces. They leverage usability testing and user feedback to create wireframes that will be used to design a website, app, or other type of digital experience. User Interface Designer: Takes those wireframes and designs the interactive elements that are needed to navigate through the website. This includes everything from buttons, dropdown menus, and site navigation. Interaction Designer: Makes the site as easy, efficient, and delightful to use as possible. Web or Graphic Designer: Designers create the look and feel of the site to ensure that the site makes a good first impression and is consistent with the brand and message of the organization it represents. Typically they generate sketches of how the site might look.

6 Development: Developers handle the creation of the files, the code. Backend Development: Focuses on the server, including the applications and databases that run on it. Some programing languages that collect form data include: PHP, Ruby, and Python. Frontend Development: Refers to any aspect of the design process that relates directly to the browser. That includes HTML, CSS, and JavaScript.

7 Authoring: The process of coding with HTML. Marking up the content with HTML tags that describe the content on the web. HTML (HyperText Markup Language) is the authoring language used to create web page documents. Styling: Styling Developers add CSS to the page. Cascading Style Sheets (CSS) describe how that content should look or appearance of the page in the browser. Scripting: Web programmers work with dynamic content and web scripts. They use a JavaScript language that makes elements on web pages do things like add behaviors.

8 SEO Specialists: A website isn t much good if nobody knows it exists, so it is crucial that a site be easily found by search engines. Search Engine Optimization (SEO) is a discipline focused on tweaking the site structure and code in a way that increases the chances it will be highly ranked in search results. Multimedia Producers: Multimedia producers add multimedia elements to a site, including sound, video, animation, and flash movies for interactivity.

9 Rich Text: (RTF) Microsoft Word. Formatting breaks the page code. Plain Text: No formatting. TextWrangler (Mac), Notepad (Win), Coda. Web Page Authoring Program: Adobe Dreamweaver (WYSIWYG: what you see is what you get, the ability to directly manipulate the layout of a document without having to type code). Mac Text Editors: TextWrangler, Coda, Brackets, Sublime Text PC Text Editors: Notepad++, Aptana Studio, Microsoft Visual Studio Graphic Software: Adobe Photoshop for image creation. To sketch your designs: Adobe Illustrator, Adobe InDesign, Adobe XD, Sketch, Figma, and UXPin Multimedia Tools: Adobe Flash (animation, sound, interactive effects), Adobe Final Cut Pro (advanced video editing).

10 Browser: a software that requests websites. The most popular browsers for designers and developers are Firefox and Chrome. Some other browers include: Opera, Safari, Internet Explorer (PC only), and Microsoft Edge (PC only). Internet Tools: Use a variety of browsers because each browser interprets and renders the website or HTML code a little differently. You ll want to test your pages on as many browsers as possible. IP Address: (Internet Protocol Address) every computer or device that connects to the internet is assigned a unique identifying number or IP Address, for example Domain Name System: Human-readable name associated with a numeric IP address, for example oreilly.com. The IP address is useful for computer software, while the domain name is accessible to humans.

11 HTML Pages: are uploaded to a computer called a web server so other viewers can access the website files. Server: software (not a computer) that serves up a website upon request. When you ask your browser for a web page, the request is sent across the Internet to a special computer known as a web server. Web servers are constantly connected to the Internet. Some big companies run their own web servers, but it is more common to use the services of a web hosting company who charge a fee to host your site.

12 Process of Viewing a Web Page: 1. When you enter a URL in your browser, the computer or device sends a request to the IP address of the web server for that page, requesting that all the content found there be sent back. 2. Once the web server receives that request it uses the Domain Name to look for the page. If the server finds the page, it sends the page content back to the IP address of the computer asking for it. If there is not a particular page, just a domain name, it looks for a default document named index.html. 3. The web browser then translates that content into text, pictures, links, videos, etc. Each browser interprets the website a little differently.

13 URL: (Uniform Resource Locator) is also a unique address that every web page on the internet is assigned. URL s state the exact location of a file. URL s are generally made up of three components: Hypertext Transfer Protocol, Name of Site, and Absolute Path. For example: Hypertext Transfer Protocol: Requests files. (method browser uses to get into web mode) Name of Site: Locates the server. Domain Name: oreilly.com (suffixes:.com,.net,.edu, and.co.uk) Absolute Path: Locates the files. Directory Path: /images/ (slashes separate each folder) Document Name and Extension: samples.html

14 Filename: Many addresses do not include a filename, but simply point to a directory: When a server receives a request for a directory name rather than a specific file, it looks in that directory for a default document, typically named index.html. So when someone types into her browser, what she ll actually see is this:

15 Speed: Amazon.com showed that reducing page load times by just 100ms resulted in a 1% increase in revenue. Other studies show that users expect a site to load in under 2 seconds, and nearly a third of your audience will leave your site for another if it doesn t. Furthermore, those people aren t likely to come back. The following list only scratches the surface for site optimization: Optimize images to the smallest file size without sacrificing quality. Avoid unnecessary levels of nested elements. Remove extra character spaces and line returns in documents. Keep JavaScript to a minimum.

16 Purchasing Hosting and Domain Names: For a monthly fee, a web-hosting service offers you storage space for uploading your HTML pages. The hosting service owns and maintains the physical servers that stores your website files (HTML documents, images, and so forth). You have the option to select your own domain name. You should pick a domain name that is unique, relevant, and easy to remember and spell. You cannot buy a domain name that is already taken, and you should not buy a domain name that misrepresents your identity or is too close to the name of an existing company.

17 Free Hosting: Some companies offer free hosting. The hosting is free because ads are shown on every page that you put online. This method of hosting creates an unprofessional website and is confusing. Shared Hosting: For personal and small business use, purchase a shared hosting plan. Shared means you share the server or IP Address where your website resides with many other websites. You will still have a unique Domain Name so the server can locate your exact website. The number of websites on the server has no effect on your website. Suggested Web Hosts: Media Temple, Bluehost, Hostmaster, Go Daddy, Dreamhost, HostGator. Domain Name Purchases: Network Solutions or web hosting service. FTP: (File Transfer Protocol) a tool used for transferring files to a server. You can use either FileZilla, Cyberduck, or Coda.

18 Users with Disabilities: Vision impaired individuals may use the zoom function. Mobility impaired individuals may need special devices to navigate. Auditory impaired individuals may need subtitles to view audio files. Cognitive impaired individuals will need simple designs to navigate. User Preferences: Users settings will override yours, the end user has ultimate control over the presentation of the information. They may change the font face and size, background and text color.

19 Monitor Resolution: You have no idea how big your page will be: as large as user s monitor or smaller according to personal preferences. Most commercial web sites are designed to fit in a 1024w x 768h pixel monitor, allowing for menus that leaves a canvas area or graphic area of 960w x 600h pixels. It is also common to use a width between 900 and 980 pixels. Usually a height is not suggested, but a height longer than 600 pixels will force the visitor to scroll. Mobile Web: Cell phones has resulted in web browsers squeezing into the coziest of spaces.