Unit Three

Overview

El alumno recibirá y desarrollará los conocimientos necesarios para poder diseñar y crear los contenidos de un sitio Web utilizando las tecnologías fundamentales para su construcción.

Contenido Temático

  1. HTML como lenguaje para proveer estructura y organización estática al contenido
  2. CSS como lenguaje para proporcionar formato y presentación visual al contenido
  3. JavaScript como lenguaje para promover contenido dinámico
  4. XML como lenguaje para generar contenido
  5. Integración de tecnologías usando herramientas de desarrollo disponibles
  6. Implementación del sitio Web en un servidor de aplicaciones

HTML and CSS

Introduction

  • When you look at a web page in a web browser, you see, at the simplest level, words.
  • It is rare to see a web page containing only plain text.
  • Instead the words you see and read have style characteristics.
  • Web pages may also contain images, video clips, and background music.
  • They may include drop down menus, search boxes, clickable links to products or other pages.
  • within the same website, or links to external web pages.
Several technologies (such as CSS, JavaScript, Flash, AJAX, JSON) can be used to define the elements of a web page. However, at the base level, a web page is created using HTML (HyperText Markup Language). Without HTML, there is no web page. HTML is what a browser "reads" to present the page on the client-side computer.

Reference

Introduction to HTML

HTML

HyperText Markup Language (HTML) is used for creating and visually representing a webpage.

HTML adds "markup" to standard English text. "Hyper Text" refers to links that connect Web pages to one another, making the World Wide Web what it is today. By creating and uploading Web pages to the Internet, you become an active participant in the World Wide Web. HTML supports visual images and other media as well. HTML is the language that describes the structure and the semantic content of a web document. These elements form the building blocks of a website.

Reference

HTML (HyperText Markup Language) HTML element reference

CSS

Cascading Style Sheets, most of the time abbreviated as CSS, is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS describes how the structured element must be rendered on screen, on paper, in speech, or on other media.

CSS is one of the core languages of the open web and has a standardized W3C specification. Developed in levels, CSS1 is now obsolete, CSS2.1 a recommendation and CSS3, now split into smaller modules, is progressing on the standard track.

Reference

Tools

  • Firebug
  • Chrome Developer Tools (Cmd + Opt + i)

Recommended Course

JavaScript

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

JavaScript® is the Netscape-developed object scripting language used in millions of web pages and server applications worldwide. Netscape's JavaScript is a superset of the ECMA-262 Edition 3 (ECMAScript) standard scripting language, with only mild differences from the published standard.

JavaScript is not to be confused with the Java programming language. Java is a trademark or registered trademark of Oracle in the U.S. and other countries.

Reference

Tools

  • Firebug
  • Chrome Developer Tools (Cmd + Opt + i)

Recommended Course

XML

XML (Extensible Markup Language) is a markup language for documents containing structured information.

Structured information contains both content (words, pictures, etc.) and some indication of what role that content plays (for example, content in a section heading has a different meaning from content in a footnote, which means something different than content in a figure caption or content in a database table, etc.). Almost all documents have some structure.

A markup language is a mechanism to identify structures in a document. The XML specification, derived from SGML (ISO 8879), defines a standard way to add markup to documents. It was originally designed to meet the challenges of large-scale electronic publishing.

XML APIs

SAX

SAX is the Simple API for XML, SAX (Simple API for XML) is an Application Program Interface (API) that allows a programmer to interpret a Web file that uses the Extensible Markup Language (XML) - that is, a Web file that describes a collection of data. SAX is an alternative to using the Document Object Model (DOM) to interpret the XML file. As its name suggests, it's a simpler interface than DOM and is appropriate where many or very large files are to be processed, but it contains fewer capabilities for manipulating the data content.

SAX was originally a Java-only API and it was the first widely adopted API for XML in Java, and is a “de facto” standard. The current version is SAX 2.0.1, and there are versions for several programming language environments other than Java.

DOM

The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document (a tree) and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods.

The XML DOM is:
  • A standard object model for XML
  • A standard programming interface for XML
  • Platform- and language-independent
  • A W3C standard
  • The XML DOM defines the objects and properties of all XML elements, and the methods (interface) to access them.
The XML DOM is a standard for how to get, change, add, or delete XML elements.

SAX and DOM

SAX requires much less memory than DOM, because SAX does not construct an internal representation (tree structure) of the XML data, as a DOM does. Instead, SAX simply sends data to the application as it is read; your application can then do whatever it wants to do with the data it sees.

SAX API acts like a serial I/O stream. You see the data as it streams in, but you cannot go back to an earlier position or leap ahead to a different position. SAX works well when you simply want to read data and have the application act on it.

DOM was designed for documents (e.g. articles and books). It was intended to be language-neutral. Because it was designed for use with languages such as C and Perl, DOM does not take advantage of Java's object-oriented features.

DOM is an in-memory model that makes more sense when you need to modify an XML structure ( especially when you need to modify it interactively).

DOM provides many powerful capabilities for large-scale documents (like books and articles), but it requires a lot of complex coding.

Reference:

Java API for XML Processing (JAXP)

The Java API for XML Processing (JAXP) is for processing XML data using applications written in the Java programming language. JAXP leverages the parser standards Simple API for XML Parsing (SAX) and Document Object Model (DOM) so that you can choose to parse your data as a stream of events or to build an object representation of it. JAXP also supports the Extensible Stylesheet Language Transformations (XSLT) standard, giving you control over the presentation of the data and enabling you to convert the data to other XML documents or to other formats, such as HTML. JAXP also provides namespace support, allowing you to work with DTDs that might otherwise have naming conflicts. Finally, as of version 1.4, JAXP implements the Streaming API for XML (StAX) standard.

Designed to be flexible, JAXP allows you to use any XML-compliant parser from within your application. It does this with what is called a pluggability layer, which lets you plug in an implementation of the SAX or DOM API. The pluggability layer also allows you to plug in an XSL processor, letting you control how your XML data is displayed.

Read more...

Reference