.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ============================== Browser Tutorial Labeling (en) ============================== :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed by: dirk :Changed: 2015-04-08T17:31:11 :Classification: browser_tut_labeling_en :Description: This is the Tutorial Labeling for the Extension Browser – TYPO3 without PHP. :Keywords: browser, typo3 without php, label, labeling :Author: Dirk Wildt, Die Netzmacher :Email: http://wildt.at.die-netzmacher.de :Website: http://die-netzmacher.de :Language: en |img-1| |img-2| Browser Tutorial Labeling (en) (extkey: browser\_tut\_labeling\_en) |img-3| .. _Browser-Tutorial-Labeling-en: Browser Tutorial Labeling (en) ============================== **Browser - TYPO3 without PHP** This is the Tutorial Labeling for the Extension Browser – TYPO3 without PHP. |img-4| Version: 7.0.6, 2015-04-08 Extension Key: browser\_tut\_labeling\_en Language: en Keywords: browser, typo3 without php, label, labeling Copyright 2009-2015, Dirk Wildt, Die Netzmacher, 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 `_ .. _Table-of-Contents: Table of Contents ----------------- `Browser Tutorial Labeling (en) 1 <#__RefHeading__24238_633547889>`_ `Introduction 3 <#__RefHeading__16737_510247921>`_ `What does it do? 3 <#__RefHeading__16739_510247921>`_ `Further Information 3 <#__RefHeading__16741_510247921>`_ `Tutorial: Labeling and Field Properties 4 <#__RefHeading__16743_510247921>`_ `Intention 4 <#__RefHeading__16745_510247921>`_ `Step 1: The Browser Support for Labeling 4 <#__RefHeading__16747_510247921>`_ `Step 2: Own Labels instead of TCA values 6 <#__RefHeading__16749_510247921>`_ `Step 3: Labeling "unknown" fields 7 <#__RefHeading__16751_510247921>`_ `Step 4: Labeling conform with the guidelines of the WAI 9 <#__RefHeading__16753_510247921>`_ `Step 5: Field Properties from the TCA 11 <#__RefHeading__16755_510247921>`_ `Reference 12 <#__RefHeading__16757_510247921>`_ `Helpful suggestions 13 <#__RefHeading__16759_510247921>`_ `Change Log 14 <#__RefHeading__16763_510247921>`_ `Illustration Index 15 <#__RefHeading__7879_1359502716>`_ `Alphabetical Index 16 <#__RefHeading__14691_1458450892>`_ .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ This is a tutorial for the extension Browser (extkey: browser). It is a step-by-step introduction for Labeling only. .. _Further-Information: Further Information ^^^^^^^^^^^^^^^^^^^ .. _This-tutorial-in-PDF-format: This tutorial in PDF format """"""""""""""""""""""""""" You find this tutorial as a PDF file at - doc/manual.pdf - `http://typo3-browser.de/typo3conf/ext/browser\_tut\_labeling\_en/doc/ manual.pdf `_ .. _Browser-Manual: Browser Manual """""""""""""" Manual: The Browser has it's own manual (with the reference of course). - HTML: `http://typo3.org/extensions/repository/view/browser\_manual\_en/ `_ - PDF: `http://typo3-browser.de/typo3conf/ext/browser\_manual\_en/doc/ma nual.pdf `_ .. _Tutorial-Labeling-and-Field-Properties: Tutorial: Labeling and Field Properties --------------------------------------- .. _Intention: Intention ^^^^^^^^^ The tutorial describes the steps for labeling the field names and the names of the registers in the frontend. The Browser has an auto labeling: it takes the values from the TYPO3 TCA. And the Browser detects the properties from fields, which are registered in the TCA. It can recognize titles, images, documents and time stamps. Sometimes you want to label names by your own or want another process for an image than the Browser. To change labels or properties should be really simple. .. _Step-1-The-Browser-Support-for-Labeling: Step 1: The Browser Support for Labeling ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. _Intention: Intention """"""""" We want to understand the labeling support. .. _TypoScript: TypoScript """""""""" plugin.tx\_browser\_pi1 { views { list { 1 { select = **tt\_news.title, tt\_news\_cat.title** } } } } .. _Result: Result """""" |img-5| .. _Exercise: Exercise """""""" We activate the logging mode Labeling Support You need the extension devlog, otherwise you won't get any message in your log report. Please - open the extension manager, - choose the Browser Tutorial Labeling (en) extension and - choose "Labeling Support" for logging. |img-5| Reload the page "tutorial" in the frontend. .. _Log-Report: Log Report """""""""" Open the log report: - Choose module "Tools" > "Developer Log" (you need the extension devlog). - Search for the Word "Label:". - You should find a line like this: [INFO/LOCALLANG] Label is: Title: - If it isn't possible to find this line, please clear the cache of the page "tutorial" and reload the page in the frontend again. - Sometimes other extensions reports to devlog. Switch off that reporting. |img-5| We are interested in the three lines with the prefix [INFO/... and the one line with the prefix [HELP/...: [INFO/LOCALLANG] Label for tt\_news.title: try the TCA. [INFO/LOCALLANG] Init a language object. [INFO/LOCALLANG] Label is: Title: [HELP/LOCALLANG] If you want another label, please configure \_LOCAL\_LANG.default.tt\_news\_title The meaning of the lines should be clear. The HELP line is the important line. It helps to configure TypoScript without reading any manual. This is DRS |img-6| - the Development Reporting System. It is a new idea of supporting the configuration of TypoScript with a minimum of costs! See the next step. .. _Step-2-Own-Labels-instead-of-TCA-values: Step 2: Own Labels instead of TCA values ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. _Intention: Intention """"""""" We want to change the label for the title of tt\_news\_category from the TCA value "Title:" to "Category:". .. _TypoScript: TypoScript """""""""" You find the whole TypoScript code for this step inres/tutorial\_01/step\_02.txt. .. _Exercise: Exercise """""""" We activate the DRS logging mode Labeling Support (see step 1 of this Tutorial). - Reload the page "tutorial" in your frontend. - Choose in the backend module "Tools" > "Developer Log" (you need the extension devlog). - Search for the Word "Title:". - You should find a line like this: [INFO/LOCALLANG] Label is: Title: There should be lines like this above and below: [INFO/LOCALLANG] Label for tt\_news\_cat.title: try the TCA. [INFO/LOCALLANG] Init a language object. [INFO/LOCALLANG] Label is: Title: [HELP/LOCALLANG] If you want another label, please configure \_LOCAL\_LANG.default.tt\_news\_cat\_title We are interested in the line with the HELP message. We add at the end of our TypoScript a \_LOCAL\_LANG array and a value for the tt\_news\_category.title: plugin.tx\_browser\_pi1 { \_LOCAL\_LANG { default { tt\_news\_cat\_title = **Category:** } } } .. _Result: Result """""" |img-5| The label for the category title is now "Category:" instead of "Title:". .. _Step-3-Labeling-unknown-fields: Step 3: Labeling "unknown" fields ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. _Intention: Intention """"""""" We want to label "unknown" fields. "Unknown" fields are fields, which aren't known in the TCA array. This are the labels for the registers / views and i. e. for the TYPO3 field tstamp. .. _TypoScript: TypoScript """""""""" You find the whole TypoScript code for this step inres/tutorial\_01/step\_03.txt. We have an example with two list views: plugin.tx\_browser\_pi1 { views { list { 1 { select = **tt\_news.title, tt\_news\_cat.title** } 2 { select = **tt\_news.title, tt\_news.datetime** } } } } .. _Result: Result """""" |img-5| .. _Exercise: Exercise """""""" We activate the logging mode Labeling Support (see step 1 of this Tutorial). - Reload the page "tutorial" in the frontend. - Choose in the backend module"Tools" the "Developer Log" (you need the extension devlog). In this step we are interested only in lines with the yellow warning icon and the white help icon: [WARN/LOCALLANG] list\_mode\_1 hasn't any value in \_LOCAL\_LANG [HELP/LOCALLANG] Please configure \_LOCAL\_LANG.default.list\_mode\_1. |img-5| The logging reports the following: - Every field is listed with a warning icon, which hasn't any value in the TCA or the \_LOCAL\_LANG array. - We didn't named the registers. We got messages with a warning. Please add the following TypoScript to the end of the current code: plugin.tx\_browser\_pi1 { \_LOCAL\_LANG { default { list\_mode\_1 = **Title with Category** list\_mode\_2 = **Title with Date** } } } .. _Result: Result """""" |img-5| .. _Step-4-Labeling-conform-with-the-guidelines-of-the-WAI: Step 4: Labeling conform with the guidelines of the WAI ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. _Intention: Intention """"""""" The Browser Tutorial Labeling (en) is conform with the guidelinesof the Web Accessibility Initiative (WAI). The WAI is very important for handicapped persons and for search engines too. It is important for search engines, because they can't understand any image and they can't understand any context. The Browser Tutorial Labeling (en) uses the HTML tag table for lists. One guideline of the WAI is, to use summaries and captions in tables. We didn't maintain this properties and tags. The DRS "Labeling Support" will have warning messages. .. _TypoScript: TypoScript """""""""" You find the whole TypoScript code for this step inres/tutorial\_01/step\_04.txt. We have an example with two list views: plugin.tx\_browser\_pi1 { views { list { 1 { select = **tt\_news.title, tt\_news\_cat.title** } 2 { select = **tt\_news.title, tt\_news.datetime** } } } \_LOCAL\_LANG { default { list\_mode\_1 = **Title with Category** list\_mode\_2 = **Title with Date** } } } .. _Exercise: Exercise """""""" We activate the logging mode Labeling Support (see step 1 of this Tutorial). - Reload your page "tutorial" in the frontend. - Choose in the backend module"Tools" the "Developer Log" (you need the extension devlog). In this step we are interested only in lines with the yellow warning icon and lines with the Word "WAI": [WARN/LOCALLANG] list\_mode\_1\_summary hasn't any value in \_LOCAL\_LANG [INFO/LOCALLANG] If you use a table it won't have any summary. [INFO/LOCALLANG] This wouldn't according to the guidelines of the Web Accessibility Initiative (WAI) [HELP/LOCALLANG] Please configure \_LOCAL\_LANG.default.list\_mode\_1\_summary. ... [WARN/LOCALLANG] list\_mode\_1\_caption hasn't any value in \_LOCAL\_LANG |img-5| Please add the following TypoScript to the end of the current code: plugin.tx\_browser\_pi1 { \_LOCAL\_LANG { default { list\_mode\_1\_summary = **This is a list with all news and their categories** list\_mode\_1\_caption = **News with categories** } } } .. _Result: Result """""" |img-5| |img-5| .. _Step-5-Field-Properties-from-the-TCA: Step 5: Field Properties from the TCA ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. _TypoScript: TypoScript """""""""" The field properties have a TypoScript array. plugin.tx\_browser\_pi1 { autoconfig { autoDiscover { ... } } } The elements of the array should be self-explanatory. See the illustration above. |img-5| .. _DRS-Development-Reporting-System: DRS - Development Reporting System """""""""""""""""""""""""""""""""" Switch on the DRS - Development Reporting System. Take one of these logging modes: - Auto Discover development - All You should get helpful messages, if you want to change the configuration for field properties like this: [INFO/SQL] TCA 'tt\_news.category.config.foreign\_table: 'tt\_news\_cat' See the illustration below. |img-5| .. _Reference: Reference --------- See the section Reference / Localization in the Browsers manual in - HTML: `http://typo3.org/extensions/repository/view/browser\_manual\_en/ `_ - PDF: `http://typo3-browser.de/typo3conf/ext/browser\_manual\_en/doc/ma nual.pdf `_ .. _Helpful-suggestions: Helpful suggestions ------------------- .. _generated: ((generated)) ^^^^^^^^^^^^^ .. _Forum: Forum """"" If you have helpful suggestions, feel free to publish any question, bug or code snippet on `http://typo3-browser-forum.de/ `_ Posts are welcome in English and German. .. _New-Features-and-Bug-Reports: New Features and Bug Reports """""""""""""""""""""""""""" You are welcome to post any question, bug or code snippet on TYPO3 forge.Here you find feature announcements and bug reports.See `http://forge.typo3.org/projects/show/extension-browser `_ .. _Change-Log: Change Log ---------- 7.0.6 **Update** Browser 6.x/7.x, TYPO3 6.x 3.0.1 **Publishing** Initial release .. _Illustration-Index: Illustration Index ------------------ Illustration 1: The title of a news and the title of a category have the same label in the TCA. 4 Illustration 2: DRS - Development Reporting System with "Labeling Support" 5 Illustration 3: The developer log with "Labeling Support" messages. 5 Illustration 4: The own label for the category 6 Illustration 5: List view with two views - [1] and [2]. 7 Illustration 6: The developer log 8 Illustration 7: List view with the labeled names for every view. 8 Illustration 8: The developer log with messages in context with the WAI 10 Illustration 9: The frontend with the table tag caption.10 Illustration 10: The backend with the table property summary and the table tag caption. 10 Illustration 11: The TypoScript array for auto configuring fields. 11 .. _Illustration-12-The-messages-for-auto-configuring-fields-in-the-DRS: Illustration 12: The messages for auto configuring fields in the DRS. 11 .. _Alphabetical-Index: Alphabetical Index ------------------ 16 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.jpeg .. :border: 0 .. :height: 20 .. :id: Grafik2 .. :name: Grafik2 .. :width: 69 .. |img-3| image:: img-3.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics1 .. :name: graphics1 .. :width: 18 .. |img-4| image:: img-4.png .. :align: bottom .. :border: 0 .. :height: 268 .. :id: graphics6 .. :name: graphics6 .. :width: 302 .. |img-5| image:: data: :alt: Frame38 .. :align: bottom .. :id: Frame38 .. :name: Frame38 .. |img-6| image:: img-6.png .. :border: 0 .. :height: 13 .. :id: graphics48 .. :name: graphics48 .. :width: 35