IBS TYPO3 Developer Template Value - IBS

Transcription

Introduction
1
IBS TYPO3 Developer Template Value
Extension Key: ibstv
Language: en
Version: 5.0.0
Keywords: ibstv, templavoila, template, developer, package
Copyright 2012, IBS Bangkok, Thailand <[email protected]>
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
1
IBS Bangkok, Thaialnd
Introduction
2
Table of Contents
Introduction ............................................................................................................................................ 4
What does it do? ................................................................................................................................. 4
System Requirement........................................................................................................................... 4
Installation .............................................................................................................................................. 5
Webserver Installation ........................................................................................................................ 5
Create New Database ......................................................................................................................... 5
IBSTV Installation ................................................................................................................................ 6
a) Download IBSTV Package and Unzip file..................................................................................... 6
b) Invoke the Install Tool................................................................................................................. 6
c) Connect to your database host ................................................................................................... 7
d) Select Database .......................................................................................................................... 7
e) Choose the package .................................................................................................................... 8
f) Installation is in progress ............................................................................................................. 8
g) Setup Password ........................................................................................................................... 9
h) Setup Successful ......................................................................................................................... 9
Demo Site .......................................................................................................................................... 10
Front Screen short ........................................................................................................................ 10
Backend Screen short ................................................................................................................... 10
Administration ...................................................................................................................................... 11
>> Check base URL and Enabled RealURL Friendly ........................................................................... 11
>> Define default language and other language on your site! ......................................................... 12
a) Add New Language ................................................................................................................... 12
b) Setup configure over constant ................................................................................................. 13
c) Add more configure for RealURL to realurl_conf.php under typo3conf folder ........................ 14
d) Non active language show on frontend.................................................................................... 15
>> Page and Content Translation...................................................................................................... 16
a)
Alternative Page Language ................................................................................................... 16
b)
Choose create new Alternative Page Language.................................................................... 16
c)
Fill out new page title, choose language and save ............................................................... 17
d)
New page and content is ready to use for translation. ........................................................ 17
>> Update Elements for Frontend .................................................................................................... 18
a)
Header Element .................................................................................................................... 18
b)
Breadcrumb [PLUGIN.IBS.BREADCRUMB] ............................................................................ 23
2
Introduction
c)
Submenu [PLUGIN.IBS.SUBMENU] ....................................................................................... 24
d)
Footer [PLUGIN.IBS.FOOTER] ................................................................................................ 25
3
>> Related SEO Features ................................................................................................................... 26
a)
Meta Tag & Favicon .............................................................................................................. 26
b)
Basic Search Engine Prepared (Google) ................................................................................ 27
>> Recommend Configure after Upgrade TYPO3 to current version ............................................... 29
Credit:.................................................................................................................................................... 30
3
Introduction
4
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:
o ImageMagick 6.7.x /
GraphicsMagick 1.3.x
(Required)
o GD-2.0.x (incl. GIF
Support!) (Required)
o libTiff-V4.0.x
o gettext-0.18.x
o libpng 1.5.x
o zlib 1.2.x (Required)
o PDFLib 5.0.x
o Freetype 2.4.x
•
•
Apache Handle (Running Server)
o mod_rewrite.c
o mod_headers.c
o mod_expires.c
o mod_gzip
PHP.INI
o safe_mode = Off
o max_execution_time = 180 (Server
default is 30)
o max_input_time = 180 (Server
default is 30)
o memory_limit = 512M (Server
default is 64M)
o extension=php_curl.dll (Enabled)
o extension=php_fileinfo.dll (Enabled)
o extension=php_openssl.dll (Enabled)
4
Installation
5
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.
Illustration- 1: Recommend to create new database with UTF-8 collection
5
Installation
6
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\.
Illustration- 2: Unzip package web server path
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. http://localhost/mydev/IBSTV/
6
Illustration- 3: Invoke the Install Tool
Installation
7
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.
Illustration- 4: Connect to your database host
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”.
7
Illustration- 5: Select Database
Installation
8
e) Choose the package
Select the IBSTV package or Blank System
and Continue.
Illustration- 6: Choose the IBSTV package
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.
Illustration- 7: Installation is in progress
8
Installation
9
g) Setup Password
Please choose a password for your TYPO3
installation and it should be at least 6
characters long.
Illustration- 8: Password setup
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.
Illustration- 9: Setup Successful
9
Installation
10
Demo Site
Front Screen short
Illustration- 10: Example Front End
Backend Screen short
10
Illustration- 11: Example Back End
Administration
11
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:
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
11
Administration
12
>> 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 List → Page UID0 (Website) and Click new record. See
Illustration below:
Illustration- 13: Add New Language
Then, you will see New Record and click create New
Website Language. See Illustration below:
12
Illustration- 14: Create New Website Language
Administration
13
Fill out required field, choose correct language that you want use on website and save new
record. See Illustration below:
Illustration- 15: Fill out required field
Illustration- 16: Language available now
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
13
Illustration- 17: PLUGIN.IBS.LANGUAGE
Administration
•
14
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.
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.
14
Illustration- 19: Value Map in realurl_conf.php file
Administration
15
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)
Illustration- 20: Language show with non-active
15
Administration
16
>> 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.
Illustration- 21: New Record
b) Choose create new Alternative Page Language.
16
Illustration- 22: New Alternative Page Language
Administration
17
c) Fill out new page title, choose language and save
Illustration- 23: Fill out value and save
d) New page and content is ready to use for translation.
Use WEB > Page and choose page that you create translate to see overview.
Illustration- 24: Fill out value and save
17
Administration
18
>> 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:
Illustration- 25: Header Elements
>> Identify website using text or image Logo [PLUGIN.IBS.COMPANYLOGO]
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]
•
18
Administration
19
Illustration- 26: Using Logo Style
Illustration- 27: Frontend changed to logo
19
Administration
20
>> 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.
Illustration- 28: Exclude examples page
Illustration- 29: Frontend do not show Examples page
20
Administration
21
>> 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.
Illustration- 30: Create Content that include slideshow
21
Illustration- 31: Refer UID of Content on this section
Administration
22
>> 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:
Illustration- 32: Update SEO Text on Header
22
Administration
23
b) Breadcrumb [PLUGIN.IBS.BREADCRUMB]
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:
Illustration- 33: Update SEO Text on Header
Illustration- 34: Show new text after update default
23
Administration
24
c) Submenu [PLUGIN.IBS.SUBMENU]
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:
Illustration- 35: Update default constant for submenu
24
Illustration- 36: Mouseover toggle and exclude contact page
Administration
25
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:
Illustration- 37: Update on footer
Illustration- 38: Footer changed to new value
25
Administration
26
>> 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:
Illustration- 39: Update Page title, description and keyword
26
Administration
27
Illustration- 40: View source after update
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. http://www.example.com/?eid=dd_googlesitemap
27
Illustration- 41: Google XML Sitemap
Administration
28
>> 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.
Illustration- 42: Google Search Engine Setup Code on your site
28
Administration
29
>> Recommend Configure after Upgrade TYPO3 to
current version
Our package based on TYPO3 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 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)
Illustration- 43: figure tag does not register on TYPO3 new version
Illustration- 44: recommend include css_styled_content v4.5
in Include static (from extensions)
29
Credit:
30
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 © 19982012 Kasper Skårhøj
YAML CSS Framework
IBS TYPO3 Developer Template Value (IBSTV) IBS Bangkok,Thailand
Static Info Tables (static_info_tables)
RenÃ© Fritz
TemplaVoila! (templavoila)
Tolleiv Nietsch
RealURL: speaking paths for TYPO3 (realurl)
Dmitry Dulepov
News (tt_news)
Rupert Germann [wmdb]
Language Selection (sr_language_menu)
Stanislas Rolland
jQuery Colorbox (rzcolorbox)
Raphael Zschorsch
Page QR Code (page_qrcode)
David Ansermot
Additional TCA Forms (jftcaforms)
Juergen Furrer
Google sitemap (dd_googlesitemap)
Dmitry Dulepov
BT Simple Contact (bt_simplecontact)
Bastian Heiser
Extended SEO Sitemap (fl_seo_sitemap)
Tim Lochmueller
SourceOptimization (sourceopt)
Dr. Ronald P. Steiner,
Boris Nicolai,
Tim Lochmueller
Image Cycle (imagecycle)
Juergen Furrer
T3 jQuery (t3jquery)
Juergen Furrer
BE (Backend) Login Skin (chloginskin)
Georg Ringer
30

IBS TYPO3 Developer Template Value - IBS

Transcription

Similar documents

IBS Series - Wing Inflatables

Hear it. Taste it. See it. Touch it.

Roll-A-Bout Corporation 3240 Ban

Provinews 11 ENG copia p

Proud to be IBS. - International Business School

Consenso Latinoamericano sobre Síndrome de Intestino Irritable

Joleen Mataele`s Presentation.

kaleidoscope collection

Irritable Bowel Syndrome - American Gastroenterological Association