What is H5 development

Based on HTML5, CSS3 and other web technologies, I was responsible for the development of visual UI interface and dynamic effects. The specific content of H5 development included the development of PC web page, mobile terminal page, H5 marketing activities and H5 small game page.

Responsive H5 development requires: basic page development, responsive page development, slide-screen application development, animation development and other basic skills, as well as higher-order game development skills.

Basic page development

Basic page development: The ability to use JavaScript, HTML, CSS and other technologies to convert high-fidelity design to web pages based on the design draft (PSD or Sketch) and interactive requirements.

The development of the basic page to do the design draft back to the real web page. This process is usually divided into the following steps:

Step 1- Design review

  1. Know if the design is development-friendly, for example, it is expensive to develop, or impossible to implement, or the page display may be flawed (text overflow, image clipping)
  2. Break down the layout and content composition of the design draft. The idea of modularization is used to decompose the design draft into components, and the reusability and scope of each component are defined.

The layout and content composition can be abstracted and simplified to a wireframeter first, and then identified reusable components across the page (e.g., header-top navigation, footer-bottom information), and reusable components of the current page (e.g., Billboard-information bulletin board, ad-board – product advertising space, etc.)

Step 2- Write the page skeleton frame

  • The box model

Each element of HTML can be represented as a rectangular box that describes the space it occupies through a model called the standard box model. The box model consists of margin, border, padding and content.

In order to avoid the box model size changes affecting the layout of the page, the development of the first to reset the style:

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
Copy the code

CSS3 border-box indicates that the width of the box model = the width of the element. Border-width + padding-width + content-width indicates the width of the box

The size of the box is composed of content, padding and border, and margin represents the space occupied by the box

  • layout

Page layout:

  1. Normal document flow layout: Default layout by block level elements (display: block) and inline elements (display: inline), elements arranged in order from left to right and top to bottom.
  2. Floating layout: Floating layout will be separated from the normal document flow, divided into left and right floating, generally in the normal document flow layout on the top of the interface layout, to avoid the floating layout to cover the normal layout, you can use clear floating.
  3. Absolute layoutUse:position: absoluteAttribute to perform absolute layout, and elements of absolute layout are removed from the document flow and positioned to reference the ancestor elementpositionFor thestaticThe first element of the value.
  4. Elastic layout: Flex layout, which is a complete module (not a single attribute) with settable attributes on both parent and child elements. Layout is built onflex-flowIn the direction of the axis.
  5. Grid layout: A two-dimensional CSS layout method for specifying rows and columns, dividing a page into major areas, or defining the size, placement, and layer relationships between elements within a component.
  • semantic

Semantic HTML is to let the tag itself can reflect the meaning of its content, different content to choose the appropriate tag, not only easy to read and maintain, but also easy to search engine crawler better recognition.

HTML5 provides many semantic tags, such as

,

Step 3- Fill in the page flesh and blood

  • Cut the figure

The cut diagram is used to cut out the material from the design draft and fill it into the page.

Common Photoshop cut-out techniques:

  • Extract Assets Resource generator(Photoshop CC 2014)
    • Open the PSD file
    • Go to Generate > Image Resources
    • Change the file name of a layer or layer group
  • Export Artboards, Layers, and more(Photoshop CC 2015)
    • Right-click on the layer or layer group you want to export and click in the pop-up menuExport As 或 Export to.
  • PS action slice
    • Extract AssetsOnly the resources within the canvas can be cut. The resources beyond the canvas can be cut directly.
    • You can slice the image using the original export layer method
      • Right-click on layer or layer group
      • Select convert to smart object
      • Edit content
      • Export images
    • You can use Photoshop to record a cutting action

Step 4- Beautify web skin decoration – CSS retouch

  • CSS naming conventionsBEM

BEM is a component-based naming method. The basic idea is to divide the user interface into independent modules, which makes the development process simpler and faster even if the user interface is complex. And it can improve the reusability of code to a certain extent.

BEM: Block (defines a class of modules), Element (Element, the child Element of the current module), Modifier (Modifier, the state of the module or Element). This naming method makes the class name meaningful and self-explanatory, making it development-friendly. Make front-end code easier to read and understand, easier to collaborate with and control, more robust and unambiguous, and more rigorous.

The main concatenators are:

– Hyphen: used only as a hyphen to connect multiple words of a module or a child element.

__ Double underline: Double underline is used to connect a block to its children

Double hyphen: Double hyphen is used to indicate the state of a block or its children

For example:

<! -- Search Bar -->
<div class="search-bar search-bar--hidden">
  <input class="search-bar__input search-bar__input--focus"/>
  <! -- / input box child element -->
  <button class="search-bar__button search-bar__button--on"></button>
  <! -- / button Search button child element -->
</div>
<! -- Search Bar module -->
Copy the code

Module semantics, easy to maintain later, and reduce the layer of CSS style nesting, improve the rendering efficiency of web pages.

The BEM format should be used when relational module relationships need to be clarified. But there is no point in using the BEM format for a single common style, such as:

.hide {
    display: none ! important;
}
Copy the code

BEM naming has a rough point is: naming long, inelegant writing. Therefore, SCSS and other pre-processing languages are usually used to solve these tedious problems:

.search-bar{ &__input { ... } &__button { ... }}Copy the code

For projects with many levels of nesting, BEM names may be very long, so you can adjust the BEM naming rules to avoid tedious.

Step 5- Compatibility test

There are two main concerns:

  1. Does the page display properly in different browsers and resolutions (HTML/CSS compatibility)
  2. Whether the functionality of the web page works in different browsers (JavaScript compatibility)

Compatibility is divided into progressive enhancement and graceful degradation (smooth degradation).

  • Progressive Enhancement: Build a page to do basic functionality in a lower version browser, and then effect, interact, and add functionality to make the experience better in a more advanced browser.

  • Graceful Degradation: Build the full functionality and advanced effects of your site from the start, then test and fix it for the browser. Start with CSS3 features and then gradually hack it to work on older browsers.

They are equivalent to upward compatibility and downward compatibility in traditional development, respectively.

For compatibility issues, what scenarios should be identified first? Such as which browser, what version, what circumstances; Then find out the cause of the problem; Identify solutions.

This article is part of the “Gold Nuggets For Free!” Event, click to view details of the event