CN107562450A - A kind of cross-platform method for visualizing of local chronicle resource - Google Patents
A kind of cross-platform method for visualizing of local chronicle resource Download PDFInfo
- Publication number
- CN107562450A CN107562450A CN201710607058.6A CN201710607058A CN107562450A CN 107562450 A CN107562450 A CN 107562450A CN 201710607058 A CN201710607058 A CN 201710607058A CN 107562450 A CN107562450 A CN 107562450A
- Authority
- CN
- China
- Prior art keywords
- resource
- design
- local
- module
- local chronicle
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
The invention belongs to local chronicle digitalization resource technical field, there is provided a kind of cross-platform method for visualizing of local chronicle resource, including (1) are collected to traditional local chronicle resource, arrange, organized；(2) required traditional local chronicle resource is digitized；(3) presentation of the data resource to handling well is designed：Information module design, layout modules design, interactive module design；(4) according to corresponding module, corresponding technology is chosen, pc ends and mobile terminal are configured respectively, technology realization is carried out to each module；(5) code generated when realizing three kinds of modules is integrated.Traditional local chronicle resource conversion is that can adaptively be shown at pc ends and mobile terminal and have the local chronicle digital resource of good interactivity by the inventive method, user is set to obtain consistent, complete, available interactive experience, the more conducively popularization of local chronicle resource.
Description
Technical field
The invention belongs to local chronicle digitalization resource technical field, relating in particular to that a kind of local chronicle resource is cross-platform can
Depending on changing method.
Background technology
Local chronicle is a kind of distinctive local collection with higher historical value in China, in order to protect local chronicle, is promoted
Local chronicle culture, as China is information-based, modernization level is constantly lifted, China proposed to carry out local chronicle resource in 2003
Digital Construction.
By the digital local records resource construction of more than ten years, in current local chronicle Numerical Resources Database, it is existing can be real
Existing cross-platform local chronicle digital resource is by being scanned to original, being converted to PDF format, by the side of papery mostly
District annals nationality indiscriminately imitates the book for being converted into electronic format completely, is presented with the static mode of text or picture, exist user interface it is dull,
Lack interactivity the problem of, it is difficult to reader, be not easy to local chronicle culture popularization the problems such as.And at present with interactivity
Local chronicle digital resource is all to realize do not possess cross-platform characteristic using flash technologies, while there is also loading, low-response,
The problems such as word can not immediately replicate, not support content of text to retrieve.
At present in local chronicle digitalization resource field, can also have simultaneously across flat without a kind of local chronicle digitalization resource
Platform and interactivity.Based on this, how in the case where reducing local records content authenticity strengthen local chronicle e-book interactivity,
Content appearance form it is rich, make local chronicle e-book mobilism, interactionization, and with cross-terminal, cross-platform function, increase
Add the readability of local chronicle digital resource, improve the Consumer's Experience of reader, promote chorogophic purpose so as to reach, exactly urgently
Solve the problems, such as.
The content of the invention
It is an object of the invention to overcome above-mentioned deficiency of the prior art, there is provided a kind of local chronicle resource is cross-platform visual
Change method, it is adaptively to be shown and with good at pc ends and mobile terminal by traditional local chronicle resource conversion
The local chronicle digital resource of interactivity, user is obtained consistent, complete, available interactive experience, be more conducive to place
The popularization of will resource.
The present invention seeks to what is be achieved through the following technical solutions.
A kind of cross-platform method for visualizing of local chronicle resource, comprises the following steps：
(1) traditional local chronicle resource is collected, arranged, organized, collect all kinds of related local records documents, picture,
Video, these contents are arranged to the chapters and sections for the system that is organized into；
(2) required traditional local chronicle resource is digitized, passes through scanning or other words, image recognition mode
It is processed into corresponding available data resource；
(3) presentation of the data resource to handling well is designed, and in particular to the design of three modules：Information module is set
Meter, layout modules design, interactive module design；
(4) according to corresponding module, corresponding technology is chosen, pc ends and mobile terminal are configured respectively, each module is entered
Row technology is realized；Specifically include：Information module is realized, layout modules are realized, interactive module is realized；
(5) code generated when realizing three kinds of modules is integrated, the code generated when layout modules are realized and
The code chain generated when interactive module is realized enters in the code generated when information module is realized.
In the above-mentioned technical solutions, described information module to page content information to display designed for setting
Meter, including the design of local records navigating directory, content information appearance form, the shape of the catalogue of the local records navigating directory simulation paper book
Formula clearly shows the subject content of each chapters and sections and the page number, and chorogophic content information is more diversified, covering scope
Compare it is wide, will most can be straight according to people according to the specifying information content characteristic presented when designing content information appearance form
See the mode understood and thinking habit is designed, the mode of presentation can include the multimedias such as word, picture, animation, video
Form.
In the above-mentioned technical solutions, the layout modules are designed for layout and pattern to the page of each terminal platform
It is designed respectively, including design meets the Background of local chronicle characteristic, the design of each information module typesetting and according to specific
The content of local records information optimizes to the pattern of display so that full page meets to be consistent with chorogophic theme, has just looked at
It is clear to carry out content, styles are reasonable, attractive in appearance.
In the above-mentioned technical solutions, the interactive module is designed for being designed the interactive form of user and the page,
I.e. user triggers an action event, and the page makes corresponding response；Include the design of navigating directory interaction；To in hand-written old will
The design that the content annotate, revised interacts；The content that more uncommon needs annotate in local chronicle content is interacted
Design；To the switching of the page and other specific designs for needing interactive element to interact.It can be fitted in this module
When the page interaction of design diversified forms, to increase the interaction between the page and user.The mode of different terminals man-machine interaction is not
Together, pc ends include mouse event and KeyEvent, and mobile terminal uses touch event.
In the above-mentioned technical solutions, the realization of information module is that the particular content information of information module design is presented first
Form is made, and according to designed appearance form, the software corresponding to is made, then using html5 language according to
The design of information module is write to the data resource to be presented, in order that the page can be more suitable for screen in mobile terminal
Display is, it is necessary to setting of the increase to page vision area in html header files so that page vision area is equal with plant width, and forbids
Scaling so that the page can adapt to instrument size in mobile terminal and preferably show.
In the above-mentioned technical solutions, the realization of layout modules is to write CSS using response type layout, according to looking into
The mode for asking media device screen size sets the Show Styles of corresponding device, browser is carried out selectivity according to specific equipment
Pattern present, user is seen that content is consistent in each different equipment, and interface layout shows most suitable page
Face.
In the above-mentioned technical solutions, the realization of interactive module is that interactive module is designed using JavaScript scripts
Pc ends and mobile terminal alternative events simultaneously write so that can be realized in two kinds of terminals, while ensureing cross-platform
Also interactivity is embodied.Original click, onmouseover, onmouseout are to mouse point in using JavaScript at pc ends
Hit, drawn on mouse, mouse removes carry out event setting；A kind of method that customized tap clicks on event is provided in mobile terminal：Envelope
Fill a tap function, displacement difference during by judging to perform touchstart and touchend whether be less than shift value come
Judge whether to perform click event.
Compared with prior art, the beneficial effects of the present invention are：
1st, with it is traditional by original scan generate digital picture resource by way of compared with, utilize the inventive method
So that local chronicle digitalization resource more has interactivity, dynamic.
2nd, compared with flash realizes technology, make local chronicle digitalization resource that there is professional platform independence, energy using the inventive method
Enough reduce code development cost, and load, response speed it is very fast, and the text data characteristic of textual resources can be kept.
Brief description of the drawings
Fig. 1 is the flow chart of the inventive method.
Fig. 2 is the implementation process figure of information module in the inventive method.
Fig. 3 is the implementation process figure of layout modules in the inventive method.
Fig. 4 is the implementation process figure of interactive module in the inventive method.
Embodiment
In order to make the purpose , technical scheme and advantage of the present invention be clearer, below in conjunction with the accompanying drawings and embodiment, it is right
The present invention is further elaborated.It should be appreciated that specific embodiment described herein is only to explain the present invention, not
For limiting the present invention.
If realizing that local chronicle data resource cross-platform can be shown, and can be handed on each platform with user
Mutually, that just needs a kind of suitable for each terminal, the development language of each operating system.Selected by the present invention is Web wrapper language
Speech, can run in the browser of each platform.Html5 at present, css3 standard provides selection inquiry and adaptive terminal
Rule so that the method that each platform can adapt to according to the Attributions selection of itself.JavaScript also supports to monitor respectively simultaneously
Pc ends and the event of mobile terminal so that interaction can be realized on each platform.A kind of local chronicle data cross-platform of the present invention is handed over
Mutual formula method for visualizing is based on these technologies and standard proposed.
As shown in figure 1, the embodiment of the present invention provides a kind of cross-platform method for visualizing of local chronicle resource, including following step
Suddenly：
(1) traditional local chronicle resource is collected, arranged, organized；
The content that local chronicle is recorded includes local natural, humane, an economic dispatch each side, local equivalent to one
Encyclopedia.So needing to collect all kinds of related local records documents, picture, video etc., then these contents are arranged and are organized into
The chapters and sections of system.
(2) required traditional local chronicle resource is digitized, is processed into corresponding available data resource；
Current local chronicle resource is the periodical such as local historical book worked out in each age that various regions government preserves mostly
Thing, most of is all the resource of papery, and digital resource is less.So it is e-sourcing to need the resource conversion of papery, specifically
The modes such as scanning or other words, image recognition can be passed through.
(3) presentation of the data resource to handling well is designed, and in particular to the design of three modules：Information module is set
Meter, layout modules design, interactive module design；
Described information module is designed for being designed page content information to display, including local records navigating directory
Design, the design of content information appearance form.The design of local records navigating directory can simulate the form of the catalogue of paper book by each chapter
The subject content and the page number of section are clearly shown.It is specific according to what is presented when designing content information appearance form
Information content feature can be most designed in the way of intuitivism apprehension by people with thinking habit, can be according to each several part content
Feature, choose suitable mode and carry out various forms of presentations, such as word, picture, audio mode, allow users to more straight
The understanding resource content connect, while improve their interest.For example a local history rail is often described in local chronicle
Mark, can be less clear if reading with simple word description, thus we can use Cause and Effect matrix using the time as
The mode of main line shows the significant events that the place is occurred in each period.
The layout modules are designed for being designed the imposition layout of the page, including design meets local chronicle characteristic
Background；The design of each information module typesetting；And the pattern of display is optimized according to the content of specific local records information, make
Full page meets and is consistent with chorogophic theme, just look at that content is clear, and styles are reasonable, attractive in appearance.Mainly include
Suitable place will be received within each several part；The background of full page is beautified according to the subject content of chapters and sections；To text
Font, the size, paragraph spacing, alignment thereof etc. of word are designed adjustment；Size, form to picture etc. are adjusted.Make
Full page seems more attractive, more comfortable.
The interactive module is designed for being designed the interactive form at user and interface.Just refer to for popular, it is right
Some object sets an event (for example click), if triggering the event on the object, the page can be responded (ratio
Such as eject a dialog box).Suitable, easy-to-use interactive form is selected according to different situations, and interactive object is protruded
It has been shown that, enables users to intuitively find out that the object can interact.It should be noted that the mode of different terminals man-machine interaction is not
Together, pc ends mainly include mouse event and KeyEvent, and mobile terminal mainly uses touch event, so in the mistake of design
Design is interacted respectively to two different terminals in journey.
(4) according to corresponding module, corresponding technology is chosen, pc ends and mobile terminal are configured respectively, each module is entered
Row technology is realized；Specifically include：Information module is realized, layout modules are realized, interactive module is realized；
Wherein, as shown in Fig. 2 the realization of information module is the specifying information appearance form system for designing information module first
Come out, according to designed appearance form, the software corresponding to is made, such as by going through described in above- mentioned information module
Presentation figure in history track is made with photo handling software, then using html5 language according to the design of information module to wanting
The data resource of presentation is write.It should be noted that in order that the page more perfectly can be adapted to screen to show in mobile terminal
Show, it is necessary to setting of the increase to page vision area in html header files so that page vision area is equal with plant width, and forbids contracting
Put.The specific practice of present embodiment is：Add viewport labels, by the attribute in content information be arranged to width be equal to set
Standby width, original zoom ratio, minimum, maximum zoom ratio are respectively set to ' 1.0 ', if allow user to scale and be arranged to
‘no’.I.e.<Meta name=" viewport " content=" width=device-width, initial-scale=
1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no "/>.
As shown in figure 3, the realization of layout modules is that the response of Media Inquiries instrument creation is added in css3 CSS
Formula is laid out, and different layout patterns is set to the viewing area width in different range.It is of different sizes due to distinct device, can
Using the page layout different as different device customizings of the size using equipment.For example, pattern is set to iPad, because iPad is just
Normal screen display width can add following code between 768px to 1024px in css：@media only screen
and(min-width:768px)and(max-width:1024px) { the specific Style Attributes */of/* }.
As shown in figure 4, the realization of interactive module refers to pc in being designed using JavaScript scripts interactive module
The alternative events of end and mobile terminal are write simultaneously so that can be realized in two kinds of terminals.Due to pc ends and mobile end equipment
Characteristic is different, and institute is interactively also different.The alternative events at pc ends mainly have mouse, KeyEvent, and mobile terminal is then led
If touch event.It will be clear that pc ends can use JavaScript in original click,
Onmouseover, onmouseout etc. click on to mouse, drawn on mouse, mouse removes carry out event setting；But in mobile terminal
Because click events have 300ms delays, it is contemplated that Consumer's Experience, it is not recommended that using click events, provide one kind here certainly
The method that the tap of definition clicks on event：Encapsulate a tap function, by judge perform touchstart and touchend when
Whether displacement difference is less than a shift value to judge whether to perform click event, and specific code is as follows, wherein in function parameter
Element represents event object, and handel represents the event functions to be performed：
(5) will realize that the code that three kinds of modules are generated is integrated, the css codes generated when layout modules are realized and
The JavaScript code chain generated when interactive module is realized enters in html codes.
The content not being described in detail in this specification, belong to prior art known to those skilled in the art.
Claims (7)
1. a kind of cross-platform method for visualizing of local chronicle resource, it is characterised in that this method comprises the following steps：
(1) traditional local chronicle resource is collected, arranged, organized, collect all kinds of related local records documents, picture, video,
These contents are arranged to the chapters and sections for the system that is organized into；
(2) required traditional local chronicle resource is digitized, handled by scanning or other words, image recognition mode
Into corresponding available data resource；
(3) presentation of the data resource to handling well is designed, and is specifically included information module design, layout modules design, is handed over
Mutual module design；
(4) according to corresponding module, corresponding technology is chosen, pc ends and mobile terminal are configured respectively, skill is carried out to each module
Art is realized；
(5) code generated when realizing three kinds of modules is integrated, the code generated when layout modules are realized and interaction
The code chain generated when module is realized enters in the code generated when information module is realized.
2. the cross-platform method for visualizing of local chronicle resource according to claim 1, it is characterised in that：Described information module is set
Count and be used to be designed page content information to display, including the design of local records navigating directory, content information appearance form,
The form of the catalogue of the local records navigating directory simulation paper book clearly shows the subject content of each chapters and sections and the page number,
The design of content information appearance form is according to the specifying information content characteristic presented, chooses suitable mode and carries out multi-form
Presentation, including word, picture, audible.
3. the cross-platform method for visualizing of local chronicle resource according to claim 1, it is characterised in that：The layout modules are set
Count and be designed respectively for the layout and pattern of the page to each terminal platform, including design meets the back of the body of local chronicle characteristic
Jing Tu, the design of each information module typesetting and the pattern of display is optimized according to the content of specific local records information.
4. the cross-platform method for visualizing of local chronicle resource according to claim 1, it is characterised in that：The interactive module is set
Count for being designed to the interactive form of user and the page, i.e., user triggers an action event, and the page makes corresponding sound
Should；Include the design of navigating directory interaction；The design interacted to the content for annotating, revising in hand-written old will；By local chronicle
The design that the content that more uncommon needs annotate in content interacts；To the switching of the page and other specifically need to interact
The design that interacts of element；The mode of different terminals man-machine interaction is different, and pc ends include mouse event and KeyEvent, moves
Moved end uses touch event.
5. the cross-platform method for visualizing of local chronicle resource according to claim 1, it is characterised in that：The realization of information module
It is to make the particular content information appearance form of information module design first, according to designed appearance form utilization pair
The software answered is made, and then the data resource to be presented is carried out according to the design of information module using html5 language
Write, in order that the page can be more suitable for screen display, it is necessary to which increase is to page vision area in html header files in mobile terminal
Setting so that page vision area is equal with plant width, and forbids scaling, and specific practice is：Viewport labels are added, by
Attribute in appearance information is arranged to width and is equal to plant width, and original zoom ratio, minimum, maximum zoom ratio are respectively set to
' 1.0 ', if allow user to scale and be arranged to ' no '.
6. the cross-platform method for visualizing of local chronicle resource according to claim 1, it is characterised in that：The realization of layout modules
It is to write CSS using response type layout, the aobvious of corresponding device is set according to the mode of inquiry media device screen size
Sample formula, browser is carried out the pattern of selectivity according to specific equipment and present, make user can in each different equipment
See that content is consistent, and interface layout shows the most suitable page.
7. the cross-platform method for visualizing of local chronicle resource according to claim 1, it is characterised in that：The realization of interactive module
It is the alternative events for the pc ends and mobile terminal designed interactive module using JavaScript scripts while writes, makes
Obtaining can be realized in two kinds of terminals, and original click, onmouseover, onmouseout in JavaScript are used at pc ends
Mouse is clicked on, drawn on mouse, mouse removes carry out event setting；A kind of customized tap is provided in mobile terminal and clicks on event
Method：A tap function is encapsulated, whether displacement difference during by judging to perform touchstart and touchend is less than one
Shift value come judge whether perform click event.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710607058.6A CN107562450A (en) | 2017-07-24 | 2017-07-24 | A kind of cross-platform method for visualizing of local chronicle resource |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710607058.6A CN107562450A (en) | 2017-07-24 | 2017-07-24 | A kind of cross-platform method for visualizing of local chronicle resource |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN107562450A true CN107562450A (en) | 2018-01-09 |
Family
ID=60974575
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710607058.6A Pending CN107562450A (en) | 2017-07-24 | 2017-07-24 | A kind of cross-platform method for visualizing of local chronicle resource |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107562450A (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108874857A (en) * | 2018-04-13 | 2018-11-23 | 重庆三峡学院 | A kind of local records document is compiled and digitlization experiencing system |
| CN110119453A (en) * | 2019-03-12 | 2019-08-13 | 重庆三峡学院 | A kind of local chronicle document method for visualizing and system based on WebGIS |
| CN110334163A (en) * | 2019-05-22 | 2019-10-15 | 平安国际智慧城市科技股份有限公司 | Map background optimization method, device, equipment and the storage medium of big data |
| CN112733504A (en) * | 2020-10-09 | 2021-04-30 | 郑杨 | Method for compiling local Chinese books by computer language |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105512095A (en) * | 2014-09-25 | 2016-04-20 | 北大方正集团有限公司 | Generation method for EPUB e-book |
| CN106445520A (en) * | 2016-09-23 | 2017-02-22 | 北京赢点科技有限公司 | Method and device for making visualized themed page |
| CN106951156A (en) * | 2016-01-06 | 2017-07-14 | 阿里巴巴集团控股有限公司 | A kind of implementation method of cross-platform interchange formula e-book, apparatus and system |
-
2017
- 2017-07-24 CN CN201710607058.6A patent/CN107562450A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105512095A (en) * | 2014-09-25 | 2016-04-20 | 北大方正集团有限公司 | Generation method for EPUB e-book |
| CN106951156A (en) * | 2016-01-06 | 2017-07-14 | 阿里巴巴集团控股有限公司 | A kind of implementation method of cross-platform interchange formula e-book, apparatus and system |
| CN106445520A (en) * | 2016-09-23 | 2017-02-22 | 北京赢点科技有限公司 | Method and device for making visualized themed page |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108874857A (en) * | 2018-04-13 | 2018-11-23 | 重庆三峡学院 | A kind of local records document is compiled and digitlization experiencing system |
| CN110119453A (en) * | 2019-03-12 | 2019-08-13 | 重庆三峡学院 | A kind of local chronicle document method for visualizing and system based on WebGIS |
| CN110334163A (en) * | 2019-05-22 | 2019-10-15 | 平安国际智慧城市科技股份有限公司 | Map background optimization method, device, equipment and the storage medium of big data |
| CN112733504A (en) * | 2020-10-09 | 2021-04-30 | 郑杨 | Method for compiling local Chinese books by computer language |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US6859909B1 (en) | System and method for annotating web-based documents | |
| CN101916245B (en) | A kind of e-book annotation on electronic reader realizes method and apparatus | |
| CN102902661B (en) | Method for realizing hyperlinks of electronic books | |
| CA2372544C (en) | Information access method, information access system and program therefor | |
| CN101025738B (en) | Template-free dynamic website generating method | |
| Edhlund | Nvivo 9 essentials | |
| CN110738037B (en) | Method, apparatus, device and storage medium for automatically generating electronic form | |
| CN103472983B (en) | The method and device of positioning webpage content | |
| CN104317949B (en) | Document snippet method for extracting content, device and system | |
| US20120030553A1 (en) | Methods and systems for annotating web pages and managing annotations and annotated web pages | |
| US20110131299A1 (en) | Networked multimedia environment allowing asynchronous issue tracking and collaboration using mobile devices | |
| CN107562450A (en) | A kind of cross-platform method for visualizing of local chronicle resource | |
| US20070061703A1 (en) | Method and apparatus for annotating a document | |
| US20050066267A1 (en) | Information processing system and method, program, and recording medium | |
| CN103778200B (en) | A kind of message information source abstracting method and its system | |
| JP2009524883A (en) | Presenting digital content to the network | |
| US10650186B2 (en) | Device, system and method for displaying sectioned documents | |
| CN105988568A (en) | Method and device for acquiring note information | |
| CN103268340B (en) | Format reflowable file based on hierarchy type index is set up and method for drafting | |
| CN102902697A (en) | Method and system for generating structured document guide view | |
| CN104915186B (en) | A kind of method and apparatus making the page | |
| US20150121203A1 (en) | System and method for generating uniform format pages for a system for composing messages | |
| CN107203498A (en) | A kind of method, system and its user terminal and server for creating e-book | |
| CN105824788A (en) | Method and system for converting PowerPoint file into word file | |
| WO2009136524A1 (en) | Information processing device, method, and computer-readable recording medium containing program |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20180109 |
|
| RJ01 | Rejection of invention patent application after publication |