Web Design Blueprints

Packt Publishing Limited
  • 1. Auflage
  • |
  • erschienen am 29. April 2016
  • |
  • 290 Seiten
E-Book | ePUB mit Adobe DRM | Systemvoraussetzungen
978-1-78355-212-2 (ISBN)
Build websites and applications using the latest techniques in modern web developmentAbout This BookCreate amazing modern day applications that run seamlessly across multiple platformsImplement multiple methodologies by creating different apps with dynamic featuresThis unique project-based guide will help you build your own websites efficientlyWho This Book Is ForThis book is a must-have for web developers who want to stay on top of the latest trends in web app and site development. If you are a web developer who is already familiar with HTML, CSS, and functional JavaScript, and you want to learn the latest trends in web development, this is the book for you.What You Will LearnFind out how to create responsive websitesCreate websites using the principals of Flat designCreate deep-dive sites using parallax scrollingDiscover how to use Ajax in single-page applicationsCreate responsive navigation with CSS and JavaScriptCreate responsive padding with the box model propertyIn DetailThe book delivers simple instructions on how to design and build modern Web using the latest trends in web development. You will learn how to design responsive websites, created with modern Flat User Interface design patterns, build deep-scrolling websites with parallax 3D effects, and roll-your-own single-page applications. Finally, you'll work through an awesome chapter that combines them all.Each chapter features actual lines of code that you can apply right away.Style and ApproachUsing real-world examples, Web Design Blueprints presents practical how-to projects for site enhancements, with a light-hearted, easy-to-understand tone. This book has individual projects that cumulate until you finally build a super-project at the end, using all the skills learned
  • Englisch
  • Birmingham
  • |
  • Großbritannien
978-1-78355-212-2 (9781783552122)
1783552123 (1783552123)
weitere Ausgaben werden ermittelt
Benjamin LaGrone is a web developer who lives and works in Texas. He got his start in programming at the age of 6 when he took his first computer class at the Houston Museum of Natural Science. His first program was "choose your own adventure book", written in BASIC; he has fond memories of the days when software needed you to write line numbers. Fast forward to about thirty years later: after deciding that computers are here to stay, Ben has made a career combining two of his favorite things, art and coding-creating art from code. One of his favorite projects was using the GMaps API to map pathologies to chromosomes for cancer research. Fascinated with mobile devices for a long time, Ben thinks that the responsive Web is one of the most exciting, yet long time coming, new aspects of web development. He now works in a SaaS development shop and is the mobile and responsive Web evangelist of the team. When he's not working on some Internet project, Ben spends his time building robots, tinkering with machines, drinking coffee, surfing, and teaching Kuk Sool martial arts.
  • Cover
  • Copyright
  • Credits
  • About the Author
  • About the Reviewer
  • www.PacktPub.com
  • Table of Contents
  • Preface
  • Chapter 1: Responsive Web Design
  • Introduction to responsive web design
  • Getting familiar with the basics
  • Using the inspector
  • Understanding the viewport meta tag
  • Learning about the viewport meta tag by example
  • Viewing your work on the tag
  • Fixing the problem by adding the proper meta tag
  • Further explanation of the viewport meta tag
  • Understanding and changing the user agent string
  • Using the user agent string for testing
  • How to change the user agent string in Chrome
  • What next?
  • Using media queries for responsive design
  • Some background information
  • A small example
  • A better example
  • Adding style
  • Viewing your example
  • Adding complexity to your stylesheet
  • Adding more media queries
  • More complicated examples
  • Working with responsive media
  • Creating responsive images with srcset
  • How things have changed
  • A brand-new solution
  • Enough theory, let's do something
  • Layout basics
  • Making the img element responsive
  • Viewing your responsive image
  • Creating responsive images with CSS
  • Getting started coding
  • Responsive style
  • Above and beyond
  • Calculating the responsive image size
  • Adding responsive video to your site
  • Working with two use cases
  • Use case #1 - self-hosted video
  • Use case #2 - embedded through the iframe element
  • Responsive video CSS
  • Modifying the layout
  • Viewing the example
  • Communicating with responsive typography
  • A good solution for responsive typography
  • Working with an example
  • Create the typography's CSS
  • Finished!
  • Building responsive layouts
  • Creating responsive padding with the box model property
  • A real-world example
  • Applying the box model property
  • Finished!
  • Going further
  • Viewing your example
  • Adding more complexity
  • Finished! Now view your work
  • Creating responsive navigation with CSS and JavaScript
  • Jump into an example
  • Creating the responsive CSS with media queries
  • Your first version is complete
  • Going further
  • Adding interaction
  • Finally, the interaction function
  • Viewing your interactive responsive navigation
  • Summary
  • Chapter 2: Flat UI
  • A brief history of flat design
  • Flat UI color
  • Sample color swatches for flat UI
  • The vivid color swatch
  • The retro color swatch
  • The monotone color swatch
  • Creating a color swatch for your project
  • Creating a flat UI layout
  • Adding content
  • Creating a working JavaScript clock
  • Adding textual content
  • Let's talk about the weather, travel, and the stock market
  • Flat UI typography
  • Adding webfonts
  • Adding flat UI elements
  • Flat UI CSS cleanup
  • Creating universal classes
  • Fixing time
  • Fixing the news and tasks elements CSS
  • Adding CSS for the weather section
  • Creating more universal classes
  • Final cleanup of the landscape orientation
  • Final cleanup of the portrait orientation
  • Summary
  • Chapter 3: Parallax Scrolling
  • Starting off
  • The HTML markup
  • Color classes
  • Using SVG font icons
  • Getting the fonts
  • That's no moon!
  • OMG, it's full of stars!
  • Clouds, birds, and airplanes
  • The rocket
  • Terra firma
  • Next up, the CSS
  • Styling the objects with CSS
  • Styling the ground objects
  • Writing the JavaScript effects
  • Setting the row height
  • Spreading the objects
  • Spreading the clouds
  • Loading the page functions
  • Smoothening the scroll
  • Updating elements on the scroller
  • Collecting the moving elements
  • Creating functions for the element types
  • Setting the left positions
  • Creating the rocket's movement function
  • Finally, moving the earth
  • Summary
  • Chapter 4: Single Page Applications
  • What is an SPA?
  • The SPA's relevance
  • Getting to work
  • Getting the old files
  • Getting the project set up
  • Object and function conventions
  • Creating utility functions
  • Creating a services layer for AJAX
  • Creating and using the file structure
  • Working with the home structure
  • Putting the content in the new file structure for the home
  • Modifying index.html and CSS
  • Modifying the JavaScript to use the structure
  • Finish the home to make it work
  • Setting up other sections
  • Breaking out the content into directories
  • Separating concerns and making objects
  • Making the routing registry tables
  • Using routing registry tables to load home content
  • Loading all sections in the structure
  • Making #hashes
  • Using #hash for routing
  • Performing housekeeping
  • Creating a callBack function for the API
  • Using the callBack function
  • Using the callBack function
  • Adding links that use hashes
  • Using APIs
  • Summary
  • Chapter 5: The Death Star Chapter
  • Where to begin?
  • Deleting unnecessary features
  • Adding new routes
  • Adding the directories
  • Adding levels to JavaScript
  • Editing home.html
  • Dropping in the parallax game
  • Fixing the broken level
  • Moving the load functions to levels.js
  • Fixing the namespacing in Level1.js
  • Loading elements from JSON
  • Using the data requests
  • Parsing the AJAX
  • Moving the spreadObjects function to a general pattern
  • What can be done in the shared levels service
  • Updating elements on the scroll
  • Modifying the CSS
  • Adding message objects
  • Creating a clickable object
  • Creating a moving object
  • Editing the home JavaScript
  • Adding more to make the home interesting
  • Creating the other pages - credits and leaderboard
  • Replicating credits for the leaderboard
  • Creating the second level
  • Getting SVG objects
  • Creating the directory structure and routes
  • Creating the new JSON for each level
  • Creating the level 2 HTML
  • Creating the level2 JS
  • Parsing the AJAX
  • Updating the elements
  • Moving the elements
  • Adding some CSS
  • Creating the home page version
  • Adding final touches
  • Creating explosive final touches
  • Summary
  • Index

Dateiformat: EPUB
Kopierschutz: Adobe-DRM (Digital Rights Management)


Computer (Windows; MacOS X; Linux): Installieren Sie bereits vor dem Download die kostenlose Software Adobe Digital Editions (siehe E-Book Hilfe).

Tablet/Smartphone (Android; iOS): Installieren Sie bereits vor dem Download die kostenlose App Adobe Digital Editions (siehe E-Book Hilfe).

E-Book-Reader: Bookeen, Kobo, Pocketbook, Sony, Tolino u.v.a.m. (nicht Kindle)

Das Dateiformat EPUB ist sehr gut für Romane und Sachbücher geeignet - also für "fließenden" Text ohne komplexes Layout. Bei E-Readern oder Smartphones passt sich der Zeilen- und Seitenumbruch automatisch den kleinen Displays an. Mit Adobe-DRM wird hier ein "harter" Kopierschutz verwendet. Wenn die notwendigen Voraussetzungen nicht vorliegen, können Sie das E-Book leider nicht öffnen. Daher müssen Sie bereits vor dem Download Ihre Lese-Hardware vorbereiten.

Weitere Informationen finden Sie in unserer E-Book Hilfe.

Download (sofort verfügbar)

32,73 €
inkl. 19% MwSt.
Download / Einzel-Lizenz
ePUB mit Adobe DRM
siehe Systemvoraussetzungen
E-Book bestellen

Unsere Web-Seiten verwenden Cookies. Mit der Nutzung dieser Web-Seiten erklären Sie sich damit einverstanden. Mehr Informationen finden Sie in unserem Datenschutzhinweis. Ok