HOME BOOKS QUICK GUIDES VIDEO COURSES APPLICATIONS
NEWSLETTER CONTACT
HTML5 for Masterminds
How to take advantage of HTML5 to create responsive websites and revolutionary applications
Revised 3rd Edition
ISBN: 978-0-9918178-7-0
Buy Now
Figures
Book publishers automatically compress the images in ebooks to reduce the size of the file. This may affect the quality of textbooks and turn some images illegible. If this is affecting you, you can download all the images included in the SwiftUI for Masterminds book or open the image you want to see from the list.
Download Figures
40.1 MBytes
CHAPTER 1 — WEB DEVELOPMENT
Figure 1-1: Clients and Servers
Figure 1-2: Website's files
Figure 1-3: URLs
Figure 1-4: HTML element
Figure 1-5: CSS property
Figure 1-6: Atom editor with an empty file
Figure 1-7: Add Project Folder option
Figure 1-8: Project's files
Figure 1-9: Options offered by cPanel
Figure 1-10: Filezilla's interface
Figure 1-11: Connection's setup
Figure 1-12: Connection's manager
Figure 1-13: Folders in the root directory
Figure 1-14: HTML document in the browser
Figure 1-15: MAMP's main screen
Figure 1-16: Apache server's folder
CHAPTER 2 — HTML
Figure 2-1: Browser showing the document's icon
Figure 2-2: Visual representation of a typical layout
Figure 2-3: Visual representation of a document’s structure with HTML5 elements
Figure 2-4: Title represented by an <h1> element with styles by default
Figure 2-5: Quotes defined inside <p> elements
Figure 2-6: Text introduced with a <pre> element
Figure 2-7: Line breaks in a paragraph defined by <br> elements
Figure 2-8: Highlighted text
Figure 2-9: Complementing the <article> element
Figure 2-10: Complementing the <footer> element
Figure 2-11: Programming code presented by the <code> and <pre> elements
Figure 2-12: Hyperlinks
Figure 2-13: Navigation between documents
Figure 2-14: Link to external documents
Figure 2-15: Image in the document
Figure 2-16: Image with a custom size
Figure 2-17: Image with a caption
Figure 2-18: Unordered list
Figure 2-19: Ordered list
Figure 2-20: List in reverse order
Figure 2-21: List of terms and descriptions
Figure 2-22: List of items with the <blockquote> element
Figure 2-23: The <details> element before and after is clicked
Figure 2-24: Table with styles by default
Figure 2-25: Table's header with styles by default
Figure 2-26: Multicolumn cells
Figure 2-27: Text translated by the browser
Figure 2-28: Form in the browser
Figure 2-29: Form with two input fields and a Submit button
Figure 2-30: Elements identified by a label
Figure 2-31: Input fields of different type
Figure 2-32: Input of type range
Figure 2-33: Inputs of type radio
Figure 2-34: Inputs of type checkbox
Figure 2-35: Input of type date
Figure 2-36: Input of type color
Figure 2-37: Input of type image
Figure 2-38: The <textarea> element
Figure 2-39: Selecting a value with the <select> element
Figure 2-40: Predefined values with the <datalist> element
Figure 2-41: Progress bar
Figure 2-42: Bar created with the <meter> element
Figure 2-43: Name/value pairs in the URL
Figure 2-44: Input field with a placeholder
Figure 2-45: Error in an input field with a custom pattern
CHAPTER 3 — CSS
Figure 3-1: Cascading styles
Figure 3-2: Descendant selectors
Figure 3-3: Child selector
Figure 3-4: Adjacent Sibling selector
Figure 3-5: General Sibling selector
Figure 3-6: The :nth-child() pseudo-class
Figure 3-7: The :not() pseudo-class
Figure 3-8: The font property
Figure 3-9: The text-align property
Figure 3-10: The word-spacing property
Figure 3-11: The text-decoration property
Figure 3-12: Title with custom font
Figure 3-13: Title with custom color
Figure 3-14: Custom box
Figure 3-15: Main content with a custom size
Figure 3-16: Content overflow
Figure 3-17: Overflow hidden
Figure 3-18: Scrollbars
Figure 3-19: Margins, paddings, and borders
Figure 3-20: Header with custom margins and paddings
Figure 3-21: Background color
Figure 3-22: Background image
Figure 3-23: Background image
Figure 3-24: Background image combined with a background color
Figure 3-25: Solid border
Figure 3-26: Dashed border
Figure 3-27: Round corners
Figure 3-28: Different corners
Figure 3-29: Elliptic corners
Figure 3-30: Second border
Figure 3-31: Pattern to build a border
Figure 3-32: Border image of type stretch
Figure 3-33: Border image of type round
Figure 3-34: Basic shadow
Figure 3-35: Realistic shadow
Figure 3-36: Bigger shadow
Figure 3-37: Inner shadow
Figure 3-38: Text shadow
Figure 3-39: Linear gradient
Figure 3-40: Different starting position for a linear gradient
Figure 3-41: Linear gradient with a direction set in degrees
Figure 3-42: Multicolor linear gradient
Figure 3-43: Translucent gradient
Figure 3-44: Linear gradient with color-stop values
Figure 3-45: Radial gradient
Figure 3-46: Radial gradient with color-stops values
Figure 3-47: A blurry header
Figure 3-48: Mirror image with scale()
Figure 3-49: Horizontal skew
Figure 3-50: Coordinate system
Figure 3-51: 3D effect with perspective
Figure 3-52: 3D effect using the perspective property
CHAPTER 4 — WEB DESIGN
Figure 4-1: Block and Inline elements
Figure 4-2: Inline-Block elements
Figure 4-3: Image and paragraph with styles by default
Figure 4-4: Image floats to the left
Figure 4-5: Image floats to the right
Figure 4-6: The image is taller than its container
Figure 4-7: The image does not overflow its container anymore
Figure 4-8: Document's normal flow
Figure 4-9: Boxes organized with the float property
Figure 4-10: Boxes automatically fill the space available
Figure 4-11: Space between boxes
Figure 4-12: Relative position
Figure 4-13: Absolute position
Figure 4-14: Custom z index
Figure 4-15: Structure to present a slide with additional information
Figure 4-16: Slide over an image
Figure 4-17: Content in two columns
Figure 4-18: Columns separated by a rule
Figure 4-19: Document with basic rules
Figure 4-20: Header
Figure 4-21: Menu
Figure 4-22: Main content
Figure 4-23: Absolute position for the <time> element
Figure 4-24: Articles
Figure 4-25: Footer
Figure 4-26: Submenus
Figure 4-27: Same values for the flex property distribute the space equally
Figure 4-28: Uneven distribution with flex
Figure 4-29: Only the free space is distributed
Figure 4-30: Empty space distributed among the boxes
Figure 4-31: Boxes with a maximum size
Figure 4-32: Axes of flexible containers
Figure 4-33: Boxes in reverse order
Figure 4-34: New positions for every box defined by the order property
Figure 4-35: Boxes and empty space inside a flexible container
Figure 4-36: Empty space distributed with justify-content: flex-end
Figure 4-37: Empty space distributed with justify-content: center
Figure 4-38: Empty space distributed with justify-content: space-between
Figure 4-39: Empty space distributed with justify-content: space-around
Figure 4-40: Vertical alignment with align-items: center
Figure 4-41: Stretching the boxes with align-items: stretch
Figure 4-42: Boxes aligned with align-items: flex-start
Figure 4-43: Boxes aligned with align-items: flex-end
Figure 4-44: Boxes aligned with align-items: baseline
Figure 4-45: Box aligned with align-self
Figure 4-46: Multiple lines in a flexible container
Figure 4-47: New line order using flex-wrap: wrap-reverse
Figure 4-48: Lines aligned with align-content: flex-start
Figure 4-49: Lines aligned with align-content: flex-end
Figure 4-50: Lines aligned with align-content: center
Figure 4-51: Lines aligned with align-content: space-between
Figure 4-52: Lines aligned with align-content: space-around
Figure 4-53: Lines aligned with align-content: stretch
CHAPTER 5 — RESPONSIVE WEB DESIGN
Figure 5-1: Flexible elements with the Traditional Box Model
Figure 5-2: Flexible elements with paddings and margins
Figure 5-3: Flexible and Fixed columns
Figure 5-4: Fixed column on the left
Figure 5-5: Fixed columns on both sides
Figure 5-6: Relative font size
Figure 5-7: Font size relative to the container
Figure 5-8: Image with a maximum width
Figure 5-9: Original logo
Figure 5-10: Logo for small screens
Figure 5-11: High-resolution image shown in Retina displays
Figure 5-12: Limitations for high-resolution images
Figure 5-13: Responsive website with only flexible elements
Figure 5-14: The date is displaced below the article's title with Media Queries
Figure 5-15: One-column design
Figure 5-16: Mobile menu
Figure 5-17: Menu button
Figure 5-18: Menu shown with Javascript code
CHAPTER 6 — JAVASCRIPT
Figure 6-1: Popup window generated by the alert() function
Figure 6-2: Popup window showing the value of a variable
Figure 6-3: Popup window showing a string stored in a variable
Figure 6-4: Styles assigned from Javascript
Figure 6-5: Styles modified from Javascript
Figure 6-6: Content added to an element
Figure 6-7: Element added to the document
Figure 6-8: Only the element that received the event is affected
Figure 6-9: The element is modified with the values received by the function
Figure 6-10: The value passed to the function is always 3
Figure 6-11: The value is different for each element
Figure 6-12: Progress bar
Figure 6-13: Google Chrome console
Figure 6-14: Error reported on the console
Figure 6-15: Messages on the console
Figure 6-16: Information about an error
CHAPTER 8 — MEDIA
Figure 8-1: Video poster
Figure 8-2: Custom video player
CHAPTER 11 — CANVAS API
Figure 11-1: Rectangles on the canvas
Figure 11-2: Linear gradient for the canvas
Figure 11-3: Open path
Figure 11-4: Close path
Figure 11-5: Solid triangle
Figure 11-6: Clipping area
Figure 11-7: Semicircle with the arc() method
Figure 11-8: Representation of Bézier curves and their control points on the canvas
Figure 11-9: Different types of lines
Figure 11-10: Working with text
Figure 11-11: Text with a shadow
Figure 11-12: Applying transformations
Figure 11-13: Modifying the transformation matrix
Figure 11-14: Applying globalCompositeOperation
Figure 11-15: Image on the canvas
Figure 11-16: Image stretched to cover the canvas
Figure 11-17: A piece of the image on the canvas
Figure 11-18: Pattern
Figure 11-19: Negative image
Figure 11-20: Image created from the canvas' content
Figure 11-21: Simple Animation
Figure 11-22: Simple Video Game
Figure 11-23: Mirror image of a video
CHAPTER 12 — WEBGL
Figure 12-1: Cube in a 3D coordinate system
Figure 12-2: Object displaced on the x axis
Figure 12-3: Mesh to build a sphere
Figure 12-4: Animated wireframe cube
Figure 12-5: Light reflecting on a cube
Figure 12-6: Cube with texture
Figure 12-7: Cube turned into a dice
Figure 12-8: 3D text on the canvas
Figure 12-9: Video texture
Figure 12-10: COLLADA model
Figure 12-11: Expanding the area occupied by the sphere
Figure 12-12: 3D video game for the Web
CHAPTER 15 — INDEXEDDB API
Figure 15-1: Objects with different properties stored in an Object Store
CHAPTER 16 — FILE API
Figure 16-1: Text file loaded from the user's computer
Figure 16-2: Information about an image in the user's computer
Figure 16-3: Image created from a Blob
Figure 16-4: Progress bar to show progress while loading a file
CHAPTER 17 — DRAG AND DROP API
Figure 17-1: Drop Box
Figure 17-2: The image number 4 was not admitted
Figure 17-3: Images dragged onto a canvas
CHAPTER 18 — GEOLOCATION API
Figure 18-1: Image returned by the Google Maps API
CHAPTER 21 — AJAX LEVEL 2
Figure 21-1: Response from the server received by the application
CHAPTER 23 — WEBSOCKET API
Figure 23-1: Application talking with the WS server
Figure 23-2: Connection closed
CHAPTER 24 — WEBRTC API
Figure 24-1: Current paradigm
Figure 24-2: New paradigm for the web
Figure 24-3: ICE Servers
CHAPTER 25 — WEB AUDIO API
Figure 25-1: Basic node organization
Figure 25-2: Complex audio system
Figure 25-3: Nodes controlled by AudioParam properties and methods
Figure 25-4: GainNode controlling volume
Figure 25-5: Two paths for the same audio source
Figure 25-6: Audio chart for the video created with the AnalyserNode
Select Country
Paperback
$ 25.95 BUY NOW
Kindle
$ 9.95 BUY NOW
Apple Books
$ 9.99 BUY NOW
Google Books
$ 9.99 BUY NOW
Information
Revised 3rd Edition 2017
ISBN: 978-0-9918178-7-0
More than 600 Codes Explained!