IBS TYPO3 Developer Template Value

The manual is currently under construction.
Please understand for any inconvenience.

product image ibstv

Extension Key: ibstv

Language: en

Version: 5.0.0

Keywords: ibstv, templavoilà, template, developer, package

Copyright 2012, IBS Bangkok, Thailand www.ibs-webdevelopment.com

<support(at)ibs-webdevelopment(dot)com>

This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml

 The content of this document is related to TYPO3 - a GNU/GPL CMS/Framework available from www.typo3.org

Introduction

What does it do?

IBS TYPO3 Developer Template Value (IBSTV) is the alternative solution to binding new TYPO3 Website for fast and easy based on templavoila.

System Requirement

  • Operating System: Unix (e.g. Linux), Windows or Mac
  • Web server: Apache, IIS
  • Middleware: PHP 5.2.x – 5.3.x
  • Database: MySQL 5.x
  • Hardware: A normal webserver setup will do, with some modern CPU and at least 1024 MB Ram. As with all database-driven applications, more RAM is advisable though.
  • Recommended software extras:
    • ImageMagick 6.7.x /  GraphicsMagick 1.3.x (Required)
    • GD-2.0.x (incl. GIF Support!) (Required)
    • libTiff-V4.0.x
    • gettext-0.18.x
    • libpng 1.5.x
    • zlib 1.2.x (Required)
    • PDFLib 5.0.x
    • Freetype 2.4.x
  • Apache Handle (Running Server)
    • mod_rewrite.c
    • mod_headers.c
    • mod_expires.c
    • mod_gzip
  • PHP.INI
    • safe_mode = Off
    • max_execution_time = 180 (Server default is 30)
    • max_input_time = 180 (Server default is 30)
    • memory_limit = 512M (Server default is 64M)
    • extension=php_curl.dll (Enabled)
    • extension=php_fileinfo.dll (Enabled)
    • extension=php_openssl.dll (Enabled)

Nach oben


Installation

Webserver Installation

Users are a new starter. We are recommended use XAMPP is an easy to install Apache Distribution for Linux, Windows, Mac OS X, and Solaris. The package includes the Apache web server, MySQL, SQLite, PHP, Perl, a FTP-Server and phpMyAdmin. Start or stop is easier. For more information here: http://www.apachefriends.org/

Create New Database

We recommended creating new database before install IBSTV package. Need to be sure database collection is UTF-8 for benefit to use in the future.

image: create new database
Illustration- 1: Recommend to create new database with UTF-8 collection

Nach oben


image: Illustration 2
Illustration- 2: Unzip package web server path

IBSTV Installation

a) Download IBSTV Package and Unzip file

We recommend you to create the development folder under [drive]:\ xampp\htdocs such as “mydev”. Then download IBSTV and extract .zip file under webserver e.g. [drive]:\ xampp\htdocs\mydev\.

Nach oben


Image: Illustration 3
Illustration- 3: Invoke the Install Tool

b) Invoke the Install Tool

After you extract .zip file, you call the path through browser to invoke the Install Tool. Normally, TYPO3 use the “ENABLE_INSTALL_TOOL” file for invokes but in the new version, we added and represented by “FIRST_INSTALL” under typo3conf/ path already. If you call the path correctly, you will see “Welcome to the TYPO3 Install Tool” message. That is mean you will successful on the first step.

e.g. localhost/mydev/IBSTV/

Nach oben


Image: Illustration 4
Illustration- 4: Connect to your database host

c) Connect to your database host

TYPO3 require username, password and host of database server on this step. If you have not already created a username and password to access the database, please do so now. This can be done using tools provided by your host.

Nach oben


Image: Illustration 5
Illustration- 5: Select Database

d) Select Database

 

There are two optional to continue. If you want to create new database, you can select on “Create a new database” and enter a name for your TYPO3 database.

In this case, we recommended creating database before install TYPO3. So, we must “Select an EMPTY existing database”.

 

Nach oben


Image: Illustration 6
Illustration- 6: Choose the IBSTV package

e) Choose the package

Select the IBSTV package or Blank System and Continue.

Nach oben


Image: Illustration 7
Illustration- 7: Installation is in progress

f) Installation is in progress

In this step is the progress to setting up the database, unpacking system file and import IBSTV to system.
This could take a few minutes, please wait; the server tries its best.

Nach oben


Image: Illustration 8
Illustration- 8: Password setup

g) Setup Password

Please choose a password for your TYPO3 installation and it should be at least 6 characters long.

Nach oben


Image: Illustration 9
Illustration- 9: Setup Successful

h) Setup Successful

TYPO3 has been successfully installed on your system and go to website. You can go to website with meaningful URL. Website ready to online!

Now, you will see example site from IBSTV with features that we prepare inside. Try to login in backend with admin and password that you defined on the setup password step. Have fun with TYPO3 CMS.

Nach oben


Front Screen short

Image: Illustration 10
Illustration- 10: Example Front End

Nach oben


Backend Screen short

Image: Illustration 11
Illustration- 11: Example Back End

Nach oben


Administration

Target group: Administrators.

>> Check base URL and Enabled RealURL Friendly

Base is the function to control resource for TYPO3 website. If do not refer correctly, website do not working correct – see how to do it below:

Image: Illustration 12
Illustration- 12: RealURL Enabled and Your Domain
  • Under WEB module on the first panel, choose Template function to override constant.
  • Select the root of page tree in the second panel and select Constant Editor.
  • The third panel will load constant in list box that you can see now.
  • Under Template tools and Edit constants for template, choose PLUGIN.IBS.CONFIG in list box and you can see the constant under this configure.
  • Update your domain without prefix (e.g. www.ibs-webdevelopment.com)
  • Do not forgot to save your configure.
  • Clear cache

>> Define default language and other language on your site!

For this package, we define English to a default language on website.  For default language and enabled RealURL, you need only single step to setup. If you have many languages on website, some configure and file you need to set up more. We already prepared. See our setup below:

a)   Add New Language

Under WEB module, choose ListPage UID0 (Website) and Click new record. See Illustration below:

Image: Illustration 13
Illustration- 13: Add New Language
Image: Illustration 14
Illustration- 14: Create New Website Language

Then, you will see New Record and click create New Website Language. See Illustration below:

Fill out required field, choose correct language that you want use on website and save new record. See Illustration below:

Image: Illustration- 15
Illustration- 15: Fill out required field
Image: Illustration 16
Illustration- 16: Language available now

Nach oben


b) Setup configure over constant

After we created more language on our website, in this step we must define language value to make sure that we need to use for TYPO3. See how to do it below:

  • Under WEB module on the first panel, choose Template function to override constant.
  • Select the root of page tree (Root Site) in the second panel and select Constant Editor the third panel will load constant in list box that you can see now.
  • Under Template tools and Edit constants for template, choose PLUGIN.IBS.LANGUAGE in list box and you can see the constant under this configure
Immage: Illustration 17
Illustration- 17: PLUGIN.IBS.LANGUAGE
  • For this package, we define 5 languages support and setup over constant. You need to define UID (start 0-4), Locale, ISO Code and Language Direction for your website. We dedicated language setup the same as this is for Worldwide and free feed to use.
Image: Illustration 18a
Image: Illustration 18b

Nach oben

Illustration- 18: Define UID, Locale, ISO Code and Language Direction for your website.

  • Do not forgot to save your configure
  • Clear cache

c) Add more configure for RealURL to realurl_conf.php under typo3conf folder

Example language mapping on realurl_conf.php, values are the same as you defined on setup above (b) – ar is ISO and 1 is UID of language.

Image: Illustration- 19
Illustration- 19: Value Map in realurl_conf.php file

Nach oben


Image: Illustration- 20
Illustration- 20: Language show with non-active
d) Non active language show on frontend

When you refresh Frontend, you will see language non active now. (Refresh with Clear Cache use CTRL+F5)

Nach oben


Image: Illustration- 21
Illustration- 21: New Record

>> Page and Content Translation

After you add new language and show on frontend, now - you can create page translation for content and change page title for new language. See how to do it below:

a)   Alternative Page Language

WEB List > Page that you want to translate (e.g. Home) > New Record.

Nach oben


b) Choose create new Alternative Page Language.

 

Image: Illustration 22
Illustration- 22: New Alternative Page Language

Nach oben


c) Fill out new page title, choose language and save
Image: Illustration- 23
Illustration- 23: Fill out value and save

Nach oben


d) New page and content is ready to use for translation

Use WEB > Page and choose page that you create translate to see overview.

Image: Illustration 24
Illustration- 24: Fill out value and save

Nach oben


>> Update Elements for Frontend

Refer YAML Framework that we use for CSS , there are define clearly website structure that must be easy understand between web designer and programmer who are work together.

The mainly of YAML structure are Header, Main Menu, Submenu, Content and Footer. There are explaining what are in layout completely.  So, this is good concept to adapt with any CMS as such TYPO3.

For each YAML structure, we prepare elements that almost designer define for website. See our concept and easier to apply in the further.

We are define default and you can update over
Update using WEB > Template > Root Site
Constant Editor and choose category on each element

a)   Header Element

There are many elements in Header that you can update to your style for website as such Company Logo (text or image), Main Menu (general or dropdown), Sliding header and SEO Text (first or second). See how to do below:  

Image: Illustration 25
Illustration- 25: Header Elements

For identify this section, you can use text or logo. We compare configure need when you use different style:

  • Identify Company with text or logo [useIdentifyCompanyWith] [text/logo]

Text

Logo

Company name text [stringCompanyLogo]

 

  • Path of Company Logo (e.g. fileadmin/IBSTV/images/IBSTV.png) [companyLogoPath]
  • Width of Company Logo [widthOfComapnyLogo]
  • Height of Company Logo [heightOfComapnyLogo]
  • customize alt image logo [altLogo]
  • customize title image logo [titleLogo]

 

UID of Home Page [uidOfHomepage]

Image: Illustration- 26: Using Logo Style
Illustration- 26: Using Logo Style
Image: Illustration 27
Illustration- 27: Frontend changed to logo
>> Main menu [PLUGIN.IBS.MAINMENU]

By menu default, we use the items from the top level. Sometime you do not need all pages and we prepare simple define to exclude page that you do not want. See how to do below:

Try to take out Examples page.

Image: Illustration 28
Illustration- 28: Exclude examples page
Image: Illustration 29
Illustration- 29: Frontend do not show Examples page

>> Update sliding Header [PLUGIN.IBS.SLIDESHOW]

Recommend to use Image Cycle extension to create slide show. Image Cycle have many feature as such movement, transition and more.

After create extension, you need UID of content that you create to refer in the position that we define for this feature.

Image: Illustration- 30
Illustration- 30: Create Content that include slideshow
Image: Illustration 31
Illustration- 31: Refer UID of Content on this section

Nach oben


>> Change SEO Text on Header [PLUGIN.IBS.TEXTONHEADER]

Add more SEO score from search engine with static meaning text on the top of website that clawer visit and index content. We define first text with h1 and second text with h2 and prepared for other language. Simple update following:

Image: Illustration 32
Illustration- 32: Update SEO Text on Header

Nach oben


Breadcrumb is website navigation. There is including information about path that users are on website.  We prepared default value for text and symbol and you can update below:

Image: Illustration 33
Illustration- 33: Update SEO Text on Header
Image: Illustration 34
Illustration- 34: Show new text after update default

Nach oben


When your website has many subpages, submenu can help you to design access level for user. Simple start access level that you can define on your site, we set start default level is same as main menu and deep to 4 levels.  Also you can exclude page that you do not want to show in sub menu.

See how to do below:

Image: Illustration 35
Illustration- 35: Update default constant for submenu
Image: Illustration 36
Illustration- 36: Mouseover toggle and exclude contact page

Nach oben


d)   Footer [PLUGIN.IBS.FOOTER]

Completely features about copyright, navigation and QR Code on footer.

For copyright, information will show owner info of this website. DO NOT TAKE OUT UNTIL YOU BUY LICENSE FROM IBS or Order project from IBS and you will get license for this project.

For navigation, this is the quick link as same as main menu or you can customize by yourself if you have other point as such top products.

For QR Code, this is identifying your site with page URL.

See how to update these parts below:

Image: Illustration 37
Illustration- 37: Update on footer
Image: Illustratio- 38
Illustration- 38: Footer changed to new value

Nach oben


>> Related SEO Features

Search engine optimization (SEO) is the process of improving the visibility of a website or a web page in a search engine's "natural" or un-paid ("organic" or "algorithmic"), search results. In general, the earlier (or higher ranked on the search results page), and more frequently a site appears in the search results list, the more visitors it will receive from the search engine's users. SEO may target different kinds of search, including image search, local search, video search, academic search, news search and industry-specific vertical search engines. http://en.wikipedia.org/wiki/Search_engine_optimization

You must understand SEO before you define title, keyword and description. We prepared simple interface to define data and position that must be already.

a)   Meta Tag & Favicon

You can define for your website relate with title, keywords and description for 5 languages different. Identify for each page or by default. See example below:

Image: Illustration 39
Illustration- 39: Update Page title, description and keyword
Image: Illustration 40
Illustration- 40: View source after update

Nach oben


b) Basic Search Engine Prepared (Google)

For Google Search Engine, you need to register for sitemap and analytics. We separated between Sitemap and Analytic code setup below:

>> Submit Sitemap:

URL: https://www.google.com/webmasters/
Submit site need more parameter  is eID=dd_googlesitemap
e.g. www.example.com

Image: Illustration 41
Illustration- 41: Google XML Sitemap

Nach oben


>> Install Google Analytics Code:

URL:  http://www.google.com/analytics/

After create new analytics code, you must install code on website. You need 2 data’s to fill in interface that we prepared. One is UID code and one is website URL without prefix.

Image: Illustration 42
Illustration- 42: Google Search Engine Setup Code on your site

Nach oben


>> Recommend Configure after Upgrade TYPO3 CMS to current version

Our package based on TYPO3 CMS v4.5.x.that can use for PHP version 5.2 and 5.3.  We use this version because many server still on version 5.2.

Some server run on PHP v5.3 and owner need up to date TYPO3 CMS to current because security stronger than the old but need to use old configure from IBSTV. After you up to date finish, HTML5 syntax show unregister syntax as such figure tag.  We recommend you to include css_styled_content v4.5 in Include static (from extensions)

Image: Illustration 43
Illustration- 43: figure tag does not register on TYPO3 new version
Image: Illustration 44
Illustration- 44: recommend include css_styled_content v4.5

Nach oben


Credit:

Thank you one and all YAML CSS framework and TYPO3 Team and Owner of TYPO3 Extension who develop good feature to design IBSTV easier.

  • TYPO3 Professional Web Content Management System based on PHP and MySQL. TYPO3 is freely available under the TYPO3-license (GNU/GPL). TYPO3 Ver. 4.5.19, Copyright © 1998-2012 Kasper Skårhøj
  • YAML CSS Framework
  • IBS TYPO3 Developer Template Value (IBSTV)
  • Static Info Tables (static_info_tables)
  • TemplaVoila! (templavoila)
  • RealURL: speaking paths for TYPO3 (realurl)
  • News (tt_news)
  • Language Selection (sr_language_menu)
  • jQuery Colorbox (rzcolorbox)
  • Page QR Code (page_qrcode)
  • Additional TCA Forms (jftcaforms)
  • Google sitemap (dd_googlesitemap)
  • BT Simple Contact (bt_simplecontact)
  • Extended SEO Sitemap (fl_seo_sitemap)
  • SourceOptimization (sourceopt) 
  • Image Cycle (imagecycle) 
  • T3 jQuery (t3jquery)
  • BE (Backend) Login Skin (chloginskin)


IBS Bangkok,Thailand
René Fritz
Tolleiv Nietsch
Dmitry Dulepov
Rupert Germann [wmdb]
Stanislas Rolland
Raphael Zschorsch
David Ansermot
Juergen Furrer
Dmitry Dulepov
Bastian Heiser
Tim Lochmueller
Dr. Ronald P. Steiner, Boris Nicolai,  Tim Lochmueller
Juergen Furrer
Juergen Furrer
Georg Ringer

Nach oben

  • Plus One with IBS
  • Visit us through Facebook
  • Follow us through Twitter
  • Get update news of TYPO3 from IBS

IBS makes no claim to completeness or accuracy of the documentation. IBS is not liable for damages that are published by statements, recommendations, tips and the like in the documentation.