WP: Glossary

ISP

An acronym for Internet Service Provider which is the company that provides internet service to your home or office.  In Sacramento, there are 2 types of services: DSL (Digital Subscriber Line) and Cable.  The 2 main companies are AT&T and Xfinity formerly Comcast.

HTTP

Tin Berners Lee invented HTTP (Hyper-text Transfer Protocol which is a communication standard allows browser and web-server to send and receive HTML data.   HTML or Hyper-Text Markup Language, the coding language used to create hypertext documents for the World Wide Web. In HTML, a word or blocks of text, or an image can be linked to another file on the Web. HTML files are viewed with a World Wide Web browser.

DNS

In Internet/Network termology there 2 definitions: Domain Name System or Service and Domain Name Server.  The former is a hierarchical distributed naming system for computers, services, or any resource connected to the Internet or a private network. The latter are the servers known a DNS whose job is to translate Domain names into IP addresses.  The importance of DNS is to make website address easy to the user because TCP-IP address are difficult to remember.  Instead of typing a numeric dot address scheme you simply type in a domain name.

URL or URI

URL stands for Uniform Resource Locator and URI is Uniform Resource Identifier.  The URI is made up of URL + URN. Basically it is the website address that you enter into your browser to load a particular webpage.  The World Wide Web, using specific protocol that usually begins with http://www.   More rarely seen in usage is the uniform resource name (URN), which was designed to complement URLs by providing a mechanism for the identification of resources in particular namespaces.

GUI (goo-ey)

GUI stands for Graphical User Interface. Before GUI most computers where text based.  Used had to type commands with a keyboard into a flashing cursor.  This type of OS was known as command line.

The first GUI computer was developed by Xerox which used a pointing device known as a mouse to control the arrow or cursor on the screen.  Later, this system was popularize by the instruction of the Macintosh in 1984.  Today all computers are GUI based.

FTP

The File Transfer Protocol (FTP) is a standard protocol used to transfer data file from one computer to another computer or server over a TCP-IP-based network, such as the Internet.  By using a FTP client application such as FileZilla, a web designer is able update or download a webpage on the server.  Many web editing application have an FTP client built in as a convience.

FTP is built on a client-server architecture and uses separate control and data connections between the client and the server.  FTP users’ needs to authenticate themselves by a username and password, but can connect anonymously if the server is configured to allow it. For secure transmission that protects the username and password, and encrypts the content, FTP is often secured with SSL/TLS (FTPS).

CMS

In website design CMS is content management system which is a computer application that allows users to publishing, editing and modifying content, organize and maintain content on a website without having to hand code in HTML.

CMSs are often used to run websites containing blogs, news, and shopping. Some of the most popular CMS systems today are WordPress, Drupal and Joomla.  These system make is easier for the client to change the content of their website without having to hirer a programmer.

W3C

The World Wide Web Consortium is an international community currently made up of 385 member how are industry expert who purpose is the develop standards for the World Wide Web (WWW or W3). Founded by Tim Berners-Lee, the mission of the W3C is to lead the Web to its full potential by developing relevant protocols and guidelines. This is achieved primarily by creating and publishing Web standards.W3C also engages in education and outreach, develops software and serves as an open forum for discussion about the Web.

As a web-designer/developer, one of the most W3C web standards is cross compatibility across different browsers such as IE, Chrome, Safari and Opera and across different devices.

 

SOPA

The Stop Online Piracy Act (SOPA) was a United States bill introduced by U.S. Representative Lamar S. Smith(R-TX) to expand the ability of U.S. law enforcement to combat online copyright infringement and online trafficking in counterfeit goods.

Some may argue that the proposed law can really stop hacking, viruses and malware but rather is just a vehicle to lobby to cause of the RIAA (Recording Industry Association of America) and MPAA (Motion Picture Association of America).

HTML

HTML or HyperText Markup Language  is the computer code standard language used to create web pages. Its was invented by the father of the modern Internet, Tim Berners-Lee.

HTML is written in the form of elements consisting of tags enclosed in angle brackets (like<html>). These tags are read my your browser and display as formatted text or images on the screen.  HTML tags most commonly come in pairs like <h1> and </h1, for example an <img> tag is used to link to an image.  Tags can also be used to link to another webpage, thus the word HyperText.

CSS

In 1996 the idea of the Cascading Style Sheets (CSS) was invented to eliminate the browser-specific markup that threatened to fragment the emerging web. In 1997, some browsers began to support parts of CSS-1, but the standard did not become truly usable until 2001. Currently CSS3 is still in working draft and has not been fully finalized by the W3C.

CSS is designed primarily to enable the separation of web content from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and thus reduce redundancy code.

CSS also make website easier to manage.  If the client wants to change the heading or color of their website, you only need to modify one CSS file instead of touching every page.

 

WYSIWYG

WYSIWYG pronounced “wiz-ee-wig”is an acronym for “What You See Is What You Get“. In computing, a WYSIWYG editor is a system in which content (text and graphics) onscreen during editing appears in a form closely corresponding to its appearance when printed or displayed as a finished product, which might be a printed document, web page, or slide presentation.

The first most widely use WYSIWYG system was on the Macintosh in 1984 although similar product from Xerox came out years before, but with a substantially higher cost.  Basically user can view something very similar representation while the document is being created or modified on the screen. In other words, Times-Roman, bold look like Times-Roman bold on the screen.  However, this did not exist until computer monitor became graphical.  This is because before GUI, computer monitors and OS were text based.

SEO

Search engine optimization (SEO) is the process of affecting the visibility of a website or a webpage in a search engine’s “natural” or un-paid (“organic”) search results. In general, the earlier (or higher ranked on the search results page), and more frequently a site appears in the search results list, the more visitors it will receive from the search engine’s users. SEO may target different kinds of search, including image search, local search, video search, academic search, news search and industry-specific vertical search engines.

SEO can also encompass compliance with Section 508 of the ADA to may website more accessible regardless of handicap.  For example, proper code of HTML img tag with alt=”description” not only makes image more accessible for the blind, it also make it easier for search engine spiders to read.

Internet marketing strategy and SEO optimization should be considered when you are developing a website for your client.  There are methods that a designer/developer can use to make a client’s website more SEO friendly. In addition to coding, website promotion is another tactic used to increase the number of backlinks, or inbound links.

 

API

API, an abbreviation of Application Program Interface, is a set of routines, protocols, and tools for building software applications. The API specifies how software components should interact and are used when programming graphical user interface (GUI) components.  A good API is like a building block, a programmer use APIs to write code then using these building block without have to re-write code manually.

There are many different types of APIs for operating systems, applications or for websites. Windows, for example, has many API sets that are used by system hardware and applications — when you copy and paste text from one application to another, it is the API that allows that to work.

In web development, APIs are incorporated into websites to do a specific function.  For example, Amazon or eBay APIs allow developers to use the existing retail infrastructure to create specialized web stores.

Browser

A web browser (commonly referred to as a browser) is a software application for retrieving, presenting and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier (URI/URL) and may be a web page, image, video or other piece of content. Hyperlinks present in resources enable users easily to navigate their browsers to related resources.

One of the most popular early browser was Netscape until Microsoft include Internet Explorer for Free when they released Windows 98.

The major web browsers are Firefox, Internet Explorer, Google Chrome, Opera, and Safari.  As a web designer/developer you should look into Firefox because it has a lot of plugin for developers.

Hyperlink

In computing, a hyperlink is a reference to data that the reader can directly follow either by clicking or by hovering or that is followed automatically.  A hyperlink points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks.

Tim Berners-Lee, inventor of the HTTP protocol saw the possibility of the hyperlink system.  On a webpage a hyperlink can be both text or images.  The user following a hyperlinks is said to navigate browse the hypertext.  In HTML a hyperlink is created using specific type element or tag known as an “anchor” by typing “<a href=” with a closing </a>.

On a webpage, hyperlinks are often used as reference to such things as tables of contents, footnotes, bibliographies, indexes, letters, and glossaries.

Mobile First design

Is a design strategy and an approach to “responsive design” which includes design for devices with smaller screens first, then add more features and content for bigger and bigger screens. This design approach is also known as “progressive enhancement.” The alternative, or “graceful degradation,” entails designing for a fully functional site first and working backward from there.

Before the idea of “responsive” most web designers design primarily for the desktop computer. When the current technology of the time, design were is to a fixed screen resolution of 800 X 600 or 1024 X 768.  Media Query specification was add to CSS3 in order to sense the device screen size the end-user device.  The developer still needs to program how to website should look for each screen size.

Web Page Header

Usually this is at the top of the web page which include the name of title of the website and navigation menu.  The current design trend is to use a fixed heading when you design a website.  This give a website a consistent look throughout.

One problem with the fixed header is that the navbars or navigation bar takes away some real estate from the screen with no value added into the user experience while users may also find it easier to navigate through the site.  As a compromise, headers on most of the most popular websites have shrunk in size.

Breadcrumb Navigation

Breadcrumbs typically appear horizontally across the top of a Web page, often below title bars or headers. They provide links back to each previous page the user navigated through to get to the current page or—in hierarchical site structures—the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting or entry point  A greater-than sign (>) often serves as hierarchy separator, although designers may use other glyphs (such as » or ›), as well as various graphical treatments.

In general, breadcrumbs should only be use on website that have a secondary navigation. You should not use breadcrumbs for single-level navigation that have no hierarchical structure.  However   I beginning to see breadcrumb used less and less; site like Amazon and even Zappos do not use them.  This is because breadcrumbs assume that the user understands the hierarchy and path structure of the website.

User-Centered Design

Design thinking in general directs us to identify problems and create a solution to the problem. UX Design think does the same thing, but from the users’ perspective or experience.  “User-Centered Design” means that the solution is for the USER not the designer.  The designers own biases should NOT influence this process.  The designer must be able to empathize with the user.

  1. The step is first to define the problem or needs of the user
  2. Research the user. Ask, who is the audience?
  3. Research the competition.
  4. “Ideate” —Brainstorm to generate with ideas. Generate a wide range of solutions and create a prototype.
  5. Test usability

User-Centered Design also related to website “Usability”.  Defining the target audience or design for universal usability.  For example, if you are design a Senior Center website, you might what to look a font size, since your target audience is over the age of 65.

UI/UX

UI/UX mean User Interface and User Experience.  UI is the user interface — buttons, menu navigation, icon symbol, etc.

UX only deals with how the user feels in terms of human psychology like their perceptions and emotions. Did the user have a sucessuful experience? Or was it fustratating experience navigating through the complex menu system?   Do the colors make him happy or sad?  UX Design are methods used by the designer/developer to make user experience the primary goal.

Information Architecture

This is the structure of the data content (text and images) of a website.  Basically how information is categorized — which content goes not what page.

Wireframe

A diagram showing the structural layout of a webpage.

Site Map

A graphical diagram or schematic showing the relationship of the main pages in a website.

Responsive Design

A design philosophy that includes all devices screen sizes from phone, tablets to desktop.

 

Advertisements