![]() It does not allow omission of any tags or use of attribute minimization. XHTML is a family of XML languages which extend or mirror versions of HTML. Though we often use the terms HTML and XHTML indifferently throughout the documentation, PubCoder pages are actually XHTML files, since this format ensure compatibility with EPUB format and better tooling for code parsing and handling. SCContent container we finally have our text object with class SCText. The structure of the body provides a container div for the page, which always has classes SCPage and SCPage, which encapsulates the two layers of your page: one with the contents of the overlay page (in a div with class SCOverlay, which here is empty) and another one, below the overlay, with the actual contents of your page (in a div with class SCContent).Īs you can see, inside the. 1 Hello, world! Īs you can see the code is very clean & simple: after declaring some namespaces and meta tags, we import the required CSS and Javascript, both generic code and code specific to your page in styles.css and actions.js. Here’s an example of the HTML page file for an “Hello World” page made with PubCoder, that is a page containing only a text box saying “Hello, world!” Javascript file containing framework initialization, code for all interactictivity on the page, and eventually including your custom Javascript code The CSS file containing styles for the page and object, eventually including your custom CSS code The HTML page file with the page contents Page Structureįor each page, PubCoder outputs a folder containing three files: /page.xhtml ![]() In this section, we analyze more deeply the code outputted by PubCoder to create your pages and objects, so that you can undestand how to how interact with it using your own code. Opens the ACE help page that lists keyboard shortcutsįinally, when editing XHTML, the editor automatically checks that the code entered is valid XHTML, giving a warning if it is not. When editing CSS, opens a window that allows to replace fonts definitions On top of the editor, you can find a toolbar with buttons for the various code editor functionalities. Layers: visible only when editing page-level code, it lists all layers in your page, double-click one to insert a reference to an object.Assets: quick access to Assets Library, double-click one to insert a reference to one of the assets in your project.Snippets: a list of code snippets to quckly add ready-to-use code to include scripts, get objects, trigger events and more. ![]() On the left, it displays up to three panels with snippets, double-click a snippet to append code to the code editor: The Code Editor in PubCoder is really powerful based on the widely adopted Ace, it features syntax highlighting for HTML, XML, Javascript and CSS, powerful find/replace with regular expressions, automatic code reindent, matching parentheses highlighting, hidden characters display, text drag and drop, line wrapping, code folding, multiple cursors and selections, live syntax check for JavaScript and CSS and much more. This is the best option to add custom content or embed external content.įinally, you also have a Run Javascript action that allows you to run custom javascript code as a PubCoder action, so you can combine it with other standard actions in PubCoder’s event/actions mechanism. You can also use Smart Objects to add contents directly to the page DOM: at its core, a smart object is an blank DIV that you can fill with whatever you like, even an iframe. You can use the Code button in the project window to customize HTML headers, CSS or JavaScript code, both at a project-level and page-level: basically project-level custom code will be included in every generated HTML page. Since the first version, PubCoder approach to code was that of trying to export clean code and don’t hide it to the final user, though understanding and writing code is an option and not a requirement when using the app.Īll PubCoder exports are based on web technologies (one XHTML, one CSS and one Javascript file per page, plus various shared code), and you have many ways of customizing the code or adding more.
0 Comments
Leave a Reply. |