Table of Content Starting User Guide... 1 Register... 2 Create a new site... 3 Using a Template... 3 From a RSS feed... 5 From Scratch... 5 Edit a site... 6 In a few words... 6 In details... 6 Components description... 9 Basic components... 9 Link... 9 Button... 10 Navigation Menu... 10 RSS Reader... 12 Image Library... 12 Simple Form... 12 Video... 15 Marketing & Social components... 16 Slider... 16 Map... 16 Download... 17 Document shelf... 18 Facebook fanpage... 18 Twitter account... 19 Facebook «Like button»... 19 Tweet button... 19 Technical components... 20 HTML Code... 20 Rules & Redirect conditional... 20 1
Register The Mobile CMS is available here: http://cms.tekora.com To start using the Mobile CMS, you can create your own account: just click the link Register, fill in the form and click Create my account button. Then you receive an email entitled Registered mail from Mobile CMS! Then you click the Sign In link. Fill in the form with your credentials (email address and password) and click the Sign In button: 2
Create a new site When you are logged in, you are redirected to your Dashboard. This is the main page of the Mobile CMS: in the top panel, you can find on the left the name of your company, the list of your existing sites (your first site is selected by default), the logo of your company, the 2D barcode of the current selected site, 3 buttons (Edit Mobile Site, Reports & More Statistics) and some statistics: The curve shows the number of daily visitors. And the pie chart shows the different devices used by the visitors to see your site. If you need more detailed statistics, click the More Statistics button. So to edit one of your sites, select it using the dropdown list and click the Edit Mobile Site button. You are redirected to the Edit Site page (see below). And to create a new site, the Mobile CMS offers you 3 possibilities: Using a Template Some very professional and beautiful templates are provided for free! Just select the one that suits your needs, click Next, type in the name of your new site, click Next and that s it: it s as easy as 1-2-3! 3
4
From a RSS feed Just type in: the URL of the RSS feed you want, the number of displayed items the name of the new site Click Next and that s it! Click Publish and your site is online: it s as easy as 1-2-3! From Scratch Just type in the name of the new site, click Next and enjoy all the powerful components that the Mobile CMS provides to you! 5
Edit a site The Edit Site page of the Mobile CMS permits you to modify and publish your site in a very easy way. In a few words You can add as many pages as you want, simply organize them in a tree that suits your needs, add simple links to any resource you want, add text, add images or videos from the public library the Mobile CMS provides to you or your own library, add simple or image buttons, add automatic menu, add your own menu, add dynamic map, and so on And even see what all this will show on an iphone in real time. You ll never need to know how HTML works! The page editor that is provided to you is a WYSIWYG powerful editor. You organize every component in your pages with your mouse pointer: just drag and drop. In details Panel Site Strucure 6
1. This is the tree of all pages accessible within the mobile site. Root page is called Start page for a new site; it has been renamed to Home page here. Here in the screenshot, three other pages will be accessible: About us, Services and Contact us. 2. Here are explanations about the buttons (from left to right): a. Find : to find a page in the tree. b. Add new item : creates a new page and adds it among children of the selected page. c. Edit : opens a popup window to rename the selected page. d. Move up : changes order of selected page among its sisters. e. Move down : changes order of selected page among its sisters. f. Duplicate : duplicates selected page; the new page becomes a sister of the selected page. Panel Page Editor This is the standard tools for editing some texts. Tools or Components from left to right and from top to bottom : 1st line: Bold, Italic, Strikethrough, Underline, Align Left, Align Center, Align Right, Align Full, Font family, Font size, Text Color, Background Color, 2nd line: Undo, Redo, Edit HTML Source, Horizontal Line, Remove Formatting, Show/Hide Guide Lines, Subscript, Superscript, Special Character, Bulleted List, Ordered List, Decrease Indent, Increase Indent, Block Quote 3rd line: Insert/Edit Table, Table Row Properties, Table Cell Properties, Insert Row Before, Insert Row After, Delete Row, Insert Column Before, Insert Column After, Delete Column, Split Merged Table Cell, Merge Table Cells. These are specific components especially designed for this Mobile CMS. Tools or Components from left to right and from top to bottom : 7
3rd line: Insert/Edit HTML Code, Insert/Edit Background Image, Insert/Edit Conditional Redirect, Insert Page Header, Insert Page Footer 4th line: Insert/Edit Link, Insert/Edit Button, Insert/Edit Navigation Menu, Insert/Edit Image From Library, Insert/Edit Slider, Insert/Edit Video, Insert/Edit Simple Form, Insert/Edit RSS Reader, Insert/Edit Google Maps, Insert/Edit File Upload Link, Insert/Edit Document Shelf, Insert/Edit Facebook Like button, Insert/Edit Tweet This Page button, Insert/Edit Facebook Fan Page link, Insert/Edit Twitter Page link, Insert/Edit LinkedIn Page link This is where you must edit directly the content of every page When your mouse pointer hovers over a component, it is highlighted with a red dotted line around. And 4 buttons appear in his top right hand corner (from left to right): Remove, Move (simply click then drag & drop), Edit and Set visibility condition. / 8
Panel Preview Popup window Advanced Preview This is the real time preview of the site you are currently editing And if you want to see how the site you are currently editing will look like on both simple phone, medium phone et smartphone, click the Preview link on the right panel entitled Preview. Components description Basic components Link There are four possibilities: 1. URL to another page of the same site (currently edited) 2. URL to an external page 3. An email address to send the email to 4. A telephone number to call somebody or some company s service 9
Button Here is the settings window of a button component: Navigation Menu There are three possibilities: - Horizontal Menu with icons and texts below (see what is done on an iphone) - Horizontal Menu with texts only separated with the character (option: automatically built with all pages of the first level) - Vertical Menu with icons on the left, texts in the middle and right-arrow on the right side (see what is done on an iphone) Here is the settings window of Button component: 10
11
RSS Reader Allows you to aggregate RSS feed on your mobile site. RSS1, RSS2 and Atom formats are supported. Parameters: - URL of the feed: a simple input text - #items / page: a simple input text - Checkbox to an automatically generated menu (Previous & Next links) Image Library This component is not seen graphically in a site visit but rather serves to manage all the images from the webmaster. The Library lists the images that were loaded onto the Tekora platform by your care and that you currently use to fill your site. You can insert multiple image libraries to classify / sort all images that are present on your site. You can insert images into the library to facilitate the insertion of images in your site. You can adjust the image size to the size of the screen and automatically set the size in percentage compared to the mobile screen. Simple Form Insert a form on a page in a few clicks. Note that the three tabs below allow you to customize your form: Fields Presentation Action. - The Fields tab helps you define the content of your form. It may contain text fields to fill. Ask your visitors for their first or last name for example. You can insert a default text; require entering letters or numbers or doing an audit of the input format for e- 12
mails or telephone numbers. You can also enter a default text in the field. They impose binary responses (yes or no). The box can be checked by lists of choices. The visitor must choose one proposal among many proposed in a list. The display of the proposals can be compact (only 1 proposal) or developed (all proposals).in order to insert a proposal, click on +. You can move up or down a proposal from the list by clicking on the arrows up and down. You can select a proposal by default. You can immediately make a field of file download if the mobile supports it, add a hidden field, add an email field. For each proposal, you must define an identifier (for your treatment) and a label (which will be displayed on the mobile). - The Action tab defines what should happen to the data entered on the form. You can also choose to deal with them by sending them via e-mail, store them in a local database exportable to Excel via the Reports popup window or deal with them directly via a CGI server. - The Presentation tab. You can name the buttons sending and deleting the form, as well as edit a text confirmation form sent by e-mail (e.g.: Your form has been sent ). Here is the Fields tab of the settings window of Simple Form component: Notes: There are 9 buttons in the upper right corner of the Form Fields window: 1. New text field 2. New selectbox 3. New checkbox 4. New email address text field 13
5. New label 6. New hidden field 7. Move field up 8. Move field down 9. Delete selected field 14
And here are the 2 other tabs of the settings window of Simple Form component: Video Parameters: - A radiobox entitled Set thumbnail with two options: automatically / manually - A video import functionality to upload and convert the video (in 3 formats: 3GP, MPEG4 and H.264) 15
Marketing & Social components Slider Map To locate a point of interest on a Google Maps. There is two possibilities: 1. By address Fields: Title, Address, City, State, Zipcode 2. By geographical coordinates 16
Fields: Title, Latitude, Longitude The component deals with the static and dynamic map automatically depending on the family Smartphone (basic or enhanced). Download Allows you to download an application on your mobile phone with a different version according to the family of mobile devices (Windows Mobile, Symbian, BlackBerry ). The user must upload some files (example: MP3, PDF, DOC, ). Same file for all family devices (direct link) or one file for each family devices. 17
Document shelf This feature allows you to save a number of documents on your site. You can then, send these documents from your website to any e-mail from your site! Insert this component in your page. Set the address and the name that will appear when you send a document from your site. You can then add as many documents as you want (all formats are accepted). Once on your site, you only have to select the documents to send, enter your e-mail in which you want to send, and optionally enter a word of support. Click send and all the desired documents instantly arrive on the mailbox you want! Facebook fanpage 18
It is near the same as a button component. There is a input text field (pre filled with the user Facebook page defined in his account) where the designer enter the desired fanpage. Designer can choose an icon in the image library. Twitter account It is near the same as a button component. There is a input text field (pre filled with the user Twitter page defined in his account) where the designer enter the desired Twitter account. Designer can choose an icon in the image library. Facebook «Like button» Here is what it looks like on a mobile site page: Tweet button Here is what it looks like on a mobile site page: 19
Technical components HTML Code This component allows you to insert HTML code within an existing page. You can then move the component within the desired page. For example, you can insert tables or something else. By cons, we warn against an error in typing or HTML programming: indeed, an HTML tag not closed, for example, can have a negative impact not only on the page you are working on, but also on everything else in your site (no display, erroneous display, etc.). Be aware of the HTML code that you insert with this component and be sure of what you are doing Rules & Redirect conditional - Make the components either visible or invisible according to some conditions. - Allows you to redirect the browser to one of the sub-components according to condition. (See also Condition component to check the properties) For example, if you want that a component will be visible only on an iphone: request.getheader("user-agent").contains("iphone") 20