===== Basics for creating a smartform ===== === HTML === HTML stands for **Hyper Text Markup Language** and is the standard markup language for creating websites. In combination with other languages like **Cascading Style Sheets (CSS)** and **JavaScript** HTML is the basis of web-development. Therefor HTML is used to determine the structure of websites. HTML is therefor not a programming but a markup language and is thus easy to learn. \\ In the following some useful HTML elements for smartform building are presented. A detailed documentation as well as various tutorials can be found under [[http://www.w3schools.com / | W3Schools]]. === CSS === CSS or Cascading Style Sheets are used to affect the **design or presentation** of websites created with HTML. CSS is designed to seperate structure and presentation of a website. Normally the styles are defined in seperate .css files. \\ The User experience besides the functionality heavily influenced by a appealing design. The visual editing with CSS is an important part of the smartform design. \\ A detailed documentation as well as various tutorials can be found under [[http://www.w3schools.com / | W3Schools]]. === JavaScript === Javascript is a client-side programming language, which is executed in the browser. While HTML and CSS represent the website's static content, **user interaction** can be reacted to with Javascript. Furthermore functionalities like calculation or auto completes can be implemented. \\ A detailed documentation as well as various tutorials can be found under [[http://www.w3schools.com / | W3Schools]]. ---- ===== Planning ===== Before implementing a smartform, its structure, design and functionalities should be planned carefully. Smarforms provide a process with necessary information. A good starting point for planning is which information is needed at which point in the process sequence. These are functional requirements. \\ When the functional requirements are clear, they hav to be implemented in a user friendly design. It should be noted which users have to work with the smartform. An appealing user interface really makes working with the smartfrom easier. However the functionalities should always come before the aestethics. \\ When planning a smartform using a paper prototype or mockups can be useful. Drafts can be discussed with endusers and can also be modified. For creating a mockup or a prototype there are many different helpful tools like [[https://balsamiq.com/ | Balsamiq Mockup]] or [[https://www.sketchapp.com/ | Sketch]]. ---- ===== Using Frameworks===== {{ :software:tim:bs.png?}} To make web development more comfortable, various HTML, CSS and JavaScript frameworks have been developed. We regularly use [[http://www.getbootstrap.org | Bootstrap]] when developing smartforms. **Bootstrap** offers predefined CSS classes, that enable the development of an appealing and responsive smartform design. How Bootstrap is integrated into the form is shown in our detailed [[smartform-example | smartform-example]]. Besides **Bootstrap** libraries like [[ http://www.polymer-project.org | Polymer ]] gain in popularity. Besides Bootstrap and Polymer the Javascript library [[https://jquery.com/ | jQuery]] is an important component of smartform development. The extensive API offers various functions, like to catch user input. \\ For very complex smartform with complicated calculations or requests the framework AngularJS, developed by Google, is very useful. Of course it is possible to integrate own frameworks either via the HTML code of the smartform of via the custom.js file (explained in the [[smartform-example | smartform-example]]). {{:software:tim:angularJs.png?150}} ---- ===== An Appropriate Editor===== {{ :software:tim:brackets.jpg?150}} A Smartform can be create in a simple text editor. However editors, that specify in programming, have a lot of advantages, like line indentation, code highlighting or autocompletes. \\ Popular editors are e.g. [[https://notepad-plus-plus.org/ | Notepad++]], [[http://brackets.io/ | Brackets]] and [[http://www.sublimetext.com/3 | Sublime Text]]. ---- === Create a form === For creating a form an opening
- tag are required. These two tags mark the beginning and the end of the document. The content to be displayed is located between these two tags.
----
=== Class and name for the form ===
A form needs a class and a name. Those are defined within the opening