Fireworks - CSS und Typo3

[Kenso]

Hallo Leute,

da hier - soweit ich das mitbekomme - ein paar hauptberufliche (Web)Designer herumgurken, möchte ich mal genau an die (und alle, die meinen, sie hätten Ahnung davon) eine Frage stellen:

Ich möchte meinen Workflow beim Erstellen von Internetseiten beschleunigen. Im Moment knödel ich mir meine Seiten meist per Hand im Editor zusammen, packe dann meine mehr oder minder bearbeiteten und weboptimierten Bilder dazu und quäle mich dann mit PHP herum, bis eine mehr oder weniger funktionierende Seite dabei herauskommt.

Auf meinem Rechner modert aber auch noch Fireworks, Dreamweaver und alle anderen Kreativwerkzeuge von Adobe herum und fristen ein unschönes Schattendasein in den tiefsten Ecken meiner Festplatte - bisher vermied ich deren Nutzung, um vollständige Kontrolle über den Quellcode zu haben und dort vollkommen "sauber" zu bleiben (=valid, semantisch und möglichst barrierefrei nach der Web Accessibility Initiative).

Nun wirds mir zu dumm und zu langsam und ich will endlich "professioneller", aber vor allem schneller werden und - ganz wichtig - weniger Zeit mit Coden, dafür mehr mit Designen verbringen.
Dabei stoße ich auf folgende Probleme:

1. Fireworks macht mir einen ... naja, äußerst extremst unschönen Quellcode. Kann man da was tun, sodass es z.B. statt Pixel die Größe 'M' (em) nutzt? Oder wenigstens, dass es float statt position:absolute nutzt?
2. Fireworks erzeugt HTML&CSS-Code. Ohne nun Typo3 bereits zu können, meine ich zu wissen, dass Typo3 hauptsächlich auf TypoScript basiert, richtig? Wie soll das denn nun zusammenpassen? Wie machen das Webagenturen? Die arbeiten ja auch mit Fireworks UND Typo3 (oder anderen CMS')!?

Gruß, Micha

 

[Slashwalker]

Zu Fireworks kann ich dir nichts sagen, nutze ich nicht. Aber bei TYPO3 ist es so,dass du dir ein Template in (X)HTML erstellen kannst. Diesem kannst du dann per Marker Inhalt zuweisen.

<div id="content">###INHALT###</div>

In TypoScript sagts du dann im Template:

marks.INHALT=CONTENT
marks.INHALT < styles.get.Content

Naja, ziemlich rudimentäres Beispiel. Hier findest du ein gutes Tutorial dazu.

Hier auch mal ein Grundsetup:

##################################################
# GLOBAL DEFINITIONS
##################################################

tt_content.image.20.spaceBelowAbove = 0
tt_content.image.20.noStretchAndMarginCells = 1 

config.pageTitleFirst = 1

# Sicherstellen, dass nonTypoTagStdWrap nur im Inhalt außerhalb von <typolist> und <typohead> arbeitet:
tt_content.text.20.parseFunc.tags.typolist.breakoutTypoTagContent = 1
tt_content.text.20.parseFunc.tags.typohead.breakoutTypoTagContent = 1
# ... und kein <BR> vor dem typohead.
tt_content.text.20.parseFunc.tags.typohead.stdWrap.wrap >
# Einstellen von nonTypoTagStdWrap, dass der Text mit P-Tags umschlossen wird.
tt_content.text.20.parseFunc.nonTypoTagStdWrap >
tt_content.text.20.parseFunc.nonTypoTagStdWrap.encapsLines {
  encapsTagList = div,p,ul,table,address
  remapTag.DIV = P
  wrapNonWrappedLines = <P>|</P>
 
  # Diese Attribute werden den umschließenden Tags - falls vorhanden - aufgezwungen.
  addAttributes.P {
   
  }
  innerStdWrap_all.ifEmpty =  
  innerStdWrap_all.textStyle < tt_content.text.20.textStyle
}
# Schließlich noch Entfernen der alten textstyle-Formatierung des gesamten Haupttextes.
tt_content.text.20.textStyle >
# ... und der <BR>-Tag nach dem Inhalt wird auch nicht mehr gebraucht...
tt_content.text.20.wrap >


# clear.gif entfernen
   tt_content.image.20.spaceBelowAbove = 0
   tt_content.header.stdWrap.space = 0|0
   tt_content.stdWrap.space = 0|0
   tt_content.stdWrap.spaceBefore = 0
   tt_content.stdWrap.spaceAfter = 0
   lib.stdheader.stdWrap.space = 0|0

# clear.gif hinter den Überschriften entfernen
   tt_content.text.20.parseFunc.tags.typohead.stdWrap.space = 0|0

tribute für p- und pre-tags entfernen
tt_content.text.20.parseFunc.nonTypoTagStdWrap.encapsLines.addAttributes {
  P.style=
  PRE.style=;
}

# Unterdrückt den Umbruch < br >
   lib.stdheader.10.stdWrap.wrap = |
   tt_content.textpic.20.spaceBelowAbove = 0
   tt_content.image.20.spaceBelowAbove = 0
   tt_content.textpic.20.noStretchAndMarginCells = 1
   tt_content.image.20.noStretchAndMarginCells = 1

# Setup Anker-Tags entfernen
   tt_content.noANameTagForFirstRecord = 1
}


#######################################################
############ XHTML optimieren
#######################################################

#Default Javascripts in externes File auslagern
config.removeDefaultJS = 1
config.removeDefaultJS = external
#<?xml... ?> Prolog deaktivieren
config.xmlprologue = none
#<html lang="de" xml:lang="de"> auf de setzen
config.htmlTag_langKey = de
#CSS Datei in externes File auslagern
config.inlineStyle2TempFile = 1
config.disablePrefixComment = 1 
 
#RTE Tuning
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.remapTag >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.DIV.class > 
#Angabe von Tags, die nicht mit einem zusätzlichen wrap umgeben werden dürfen
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList = cite, div, p,ul , pre, h1, h2, h3, h4, h5, h6,table,address
 
#Entfernt die zusätzlichen CSS-Klassen
lib.stdheader.3 = LOAD_REGISTER
lib.stdheader.3.headerClass = 
lib.stdheader.3.headerClass.noTrimWrap = | 
lib.stdheader.stdWrap.dataWrap = |
 
#Standard-Headings aufräumen
lib.stdheader.stdWrap.dataWrap =
lib.stdheader.10.1.fontTag = <h1>|</h1>
lib.stdheader.10.2.fontTag = <h2>|</h2>
lib.stdheader.10.3.fontTag = <h3>|</h3>
lib.stdheader.10.4.fontTag = <h4>|</h4>
lib.stdheader.10.5.fontTag = <h5>|</h5>
 
#Content Elemente aufräumen und Kommentare entfernen
tt_content.stdWrap.dataWrap >
tt_content.stdWrap.prefixComment >
tt_content.header.20.dataWrap >
tt_content.header.20.prefixComment >
tt_content.default.prefixComment >
tt_content.text.stdWrap.prefixComment >
tt_content.text.20.prefixComment >
tt_content.textpic.20.stdWrap.prefixComment >
tt_content.table.20.stdWrap.prefixComment >
tt_content.mailform.20.stdWrap.wrap >
tt_content.menu.20.stdWrap.prefixComment >
tt_content.image.20.stdWrap.prefixComment >
tt_content.list.20.stdWrap.prefixComment >


##################################################

##################################################
# Einstellungen für Seiten Statistik
##################################################

config.stat = 1
config.stat_apache = 1
config.stat_apache_logfile = site.log
config.stat_mysql = 1

##################################################



##################################################
# Real URL
##################################################

# RealURL aktivieren
config.simulateStaticDocuments = 0
config.baseURL = http://www.domain.de/
config.tx_realurl_enable = 1
#config.prefixLocalAnchors = all

##################################################



##################################################
# Suche
##################################################

###### für Indexierung ######
page.config.no_cache = 0
page.config.no_search = 0
page.config.index_enable = 1
page.config.index_externals = 1

##################################################



##################################################
# Externalize CSS and JS
##################################################

     config.removeDefaultJS = external
     config.inlineStyle2TempFile = 1
     config.setJS_openPic=0

##################################################


##################################################
# ADMIN PANEL      0=aus, 1=aktiviert     
##################################################
     
     config.admPanel = 0
     


#######################################################
## Sprache
#######################################################

# Standardsprache UID 0 -> Deutsch
     config.sys_language_uid = 0 
     config.language = de
     config.locale_all = de_DE

# Englisch, sys_language.uid = 1
     config.linkVars = L 
     [globalVar = GP:L = 1] 
     config.sys_language_uid = 1
     config.language = en
     config.locale_all = english
     [global]
     
     
##################################################
# TT_NEWS PLUGIN
##################################################
  
plugin.tt_news.displayList { 
    age_stdWrap.age = 1 
    date_stdWrap.strftime = %A, %e. %B %Y 
    time_stdWrap.strftime = %e.%m.%y 
} 

plugin.tt_news.displaySingle { 
    age_stdWrap.age = 1 
    date_stdWrap.strftime = %A, %e. %B %Y 
    time_stdWrap.strftime = %e.%m.%y 
}

[globalVar = TSFE:id = 240]
plugin.tt_news.displayList { 
    age_stdWrap.age = 1
    date_stdWrap.strftime = <div></div>
    time_stdWrap.strftime = <div></div>
}
[global]

plugin.tt_news.sys_language_mode = strict


##################################################


plugin.tx_gooffotoboek_pi1.default_thumb = 1



##################################################
# Seiten Einstellungen  
##################################################

     config.no_cache = 1
     page = PAGE
     page.typeNum = 0



##################################################
# CSS und HTML Template
##################################################


page.10 = TEMPLATE
page.10{
    template = FILE
    template.file = fileadmin/template/template.html
    workOnSubpart = DOKUMENT

   
##################################################
# Content Marker
##################################################
 
    marks.LINKS = CONTENT
    marks.LINKS < styles.content.getLeft

    marks.NORMAL = CONTENT
    marks.NORMAL < styles.content.get

    marks.RECHTS = CONTENT
    marks.RECHTS < styles.content.getRight
    

 




##################################################
# PHP SCRIPTS   
##################################################


     marks.SPRACHE = PHP_SCRIPT
     marks.SPRACHE.file = fileadmin/sprachmenu.php

     marks.SCHRIFTZUG= PHP_SCRIPT
     marks.SCHRIFTZUG.file = fileadmin/schriftzug.php
     


    
#######################################################
##   Navi einrichten
#######################################################
marks.MENUE = HMENU
marks.MENUE {

    wrap = <div class="menu"> | </div>
    

    
    # Hauptmenue
    1 = TMENU
    1 {
        wrap = <ul> | </ul>
        expAll = 1
     
        NO.ATagTitle.field = subtitle//title
        NO.wrapItemAndSub = <li> | </li>
        
        ACT = 1
        ACT {
            wrapItemAndSub = <li> | </li>


            ATagBeforeWrap = 1
            ATagParams = id="aktiv"
            ATagTitle.field = title
        }
        
        
    }



#########################################

D A T U M

#########################################

marks.DATUM = TEXT
marks.DATUM.data = date:U
marks.DATUM.strftime = %A, %d.%m.%Y

Der größte Teil dient leider nur der Optimierung des Quellcode, denn TYPO3 bastelt in der Hinsicht viel Müll.

 

[Sir Q]

1. Fireworks macht mir einen ... naja, äußerst extremst unschönen Quellcode. Kann man da was tun, sodass es z.B. statt Pixel die Größe 'M' (em) nutzt? Oder wenigstens, dass es float statt position:absolute nutzt?
2. Fireworks erzeugt HTML&CSS-Code. Ohne nun Typo3 bereits zu können, meine ich zu wissen, dass Typo3 hauptsächlich auf TypoScript basiert, richtig? Wie soll das denn nun zusammenpassen? Wie machen das Webagenturen? Die arbeiten ja auch mit Fireworks UND Typo3 (oder anderen CMS')!?

Hi Micha,

jede Webagentur die einen gewissen Anspruch an Qualität und den Willen hat, dem Kunden das bestmögliche Produkt zu liefern, verzichtet auf Typo3. Typo3 ist kostenlos - JA - aber es ist über zehn Jahre alt - und nicht mehr auf der höhe der Zeit. Wenn du eine XHTML & CSS basierte, barrierearme Webseite mit Typo3 bei einer Agentur in Auftrag gibst, gehen locker 50% des Etats für die heute gängigen Anforderugnen nach XHTML und CSS drauf …
Und Fireworks wird von keiner Agentur eingesetzt, mit der ich jeh zu tun hatte. In der Regel ist der Agenturalltag: Photoshop

Und entweder hat die Agentur ein eigenes flexibles CMS selbst entwickelt - und baut Kundenseiten eben darauf auf - oder für jeden Kunden wird nach dessen Wünschen Seite nebst Backend schnell neu gebaut - was mit Hilfe von agilen Frameworks für einen guten Entwickler weniger Arbeit ist, als eine neue Seite in veraltete Strukturen a la Typo3 zu gießen …

Nicht zuletzt hat Kaskpar das auch erkannt und für Typo3 Version 5 (Codename: Phoenix) wird ein eigenes Framework geschrieben: Flow3
Als Referenzimplementierung in Flow3 wird Typo3 Version 5 erscheinen. Aber mehr noch als es mit dem (zu Typo3 Version 5 gänzlich inkompatiblen vorgängerversionen) möglich war, soll mit Flow3 der Entwickler mehr Möglichkeiten und die Performance soll durch einheitlichen Code und einer gänzlichen neuen Datenstruktur ebenfalls gesteigert werden. Klingt alles spannend, kommt aber (meines Erachtens) drei Jahre zu spät …

 

[jensche]

ich arbeite auch mit Fireworks. ich gestalte für eine Agentur Websites welche in Typo3 umgesetzt werden. Jedoch nutze ich Fireworks ausschliesslich fürs design. Der Typo3 Programmierer setzt dass dann um. Umsetztbar ist fast alles in Typo3.

Grundsätzlich halte ich überhaupt nicht viel von eigenen CMS System welche den Kunden an ein System bindet. Sprich an eine Agentur bindet. Das ist aus Kundensicht eine Riesen verarsche. Denn der Kunde kann dann kaum seine Agentur wechseln, weil ja ein eigens kreirtes CMS dahinterhängt. Sprich beim Wechsel muss der Kunde pratkisch einen Neuanfang machen. Das ist sehr mühsam und bringt dem Kunden nur ärger.

 

[Sir Q]

Grundsätzlich halte ich überhaupt nicht viel von eigenen CMS System welche den Kunden an ein System bindet. Sprich an eine Agentur bindet. Das ist aus Kundensicht eine Riesen verarsche. Denn der Kunde kann dann kaum seine Agentur wechseln, weil ja ein eigens kreirtes CMS dahinterhängt. Sprich beim Wechsel muss der Kunde pratkisch einen Neuanfang machen. Das ist sehr mühsam und bringt dem Kunden nur ärger.

Ich finde aus ähnlichen Gründen ja auch das ganze Typo3-gehabe einfach daneben. Wie oft schon Kunden zu uns gekommen sind, und Typo3-Projekte erweitert haben wollten - wo man die Hände über dem Kopf zusammenschlägt wenn man sieht, was der Kunde damals von einer anderen Agentur gekauft hat … Das „Versprechen”, der Kunde kann ja danach zu einer anderen Agentur gehen ist eigentlich eine Lüge: Ein Projekt wird nicht besser, indem es von einer Agentur zur nächsten weitergereicht wird.

Typo3 ist kostenlos - und so groß, komplex und an vielen stellen unnötig kompliziert - veraltet und sinnlos ressourcen verbrauchend, dass ich es guten Gewissens niemandem empfehlen kann. Dennoch werben viele Agenturen damit, dass sie Seiten in Typo3 erstellen. Erstaunlicher Weise sind die Typo3-Agenturen nicht signifikant preiswerter als Agenturen, die dem Kunden eine Lösung maßschneidern.

Es ist daher meines Erachtens für den Kunden viel fairer, wenn er eine modular programmierte, sauber dokumentierte webseite nebst quellcode bekommt, als wenn er (weil er schon mal von jemanden gehört hat, dass Typo3 viel eingesetzt wird) eine Seite bekommt, die den ganzen Typo3-Ballast mit sich bringt, obwohl es gar nicht gebraucht wird. das ist dann auch viel transparenter für den Kunden was er da eigentlich bekommt.

Es ist doch außerdem noch eines von Vorteil: wenn eine andere Agentur ein Projekt zur Weiterentwicklung bekommst, und genau weißt: ich muss eben Model, View, Controller, DB-Migration und Unit-Test schreiben - und dass ist sauber zu trennen und auf Dateiebene komplett in ein Versions-Kontroll-System einzupflegen. Auch für den Kunden dann besser nach zuvollziehen als wenn du in einen Typo3-Projekt hier selbst geschriebene Scripte, da Templates dort Typo-Script in der DB und im Backend sowieso noch an diversen stellen was konfigurieren musst.

~

Nicht zuletzt ist es Kaspar und den anderen Typo3-Entwicklern auch aufgegangen und sie haben sich für die nächste Typo3-Version dazu durchgerungen keinen großen Content-Management-Klotz mit eigener interpretierter Script-Sprache zu schreiben, sondern ein eigenständiges Framework (dass sich z.b. an Rails und anderen modernen Frameworks orientiert) und in diesem Framework (Flow3) wird Typo3 (Version 5) als Referenzimplementierung komplett neu geschrieben.

Der Vorteil ist dann eben der: dass man sowohl den Typo3-CMS-Block wie gewohnt mit Extensions erweitern kann, als auch, dass man das Framework nutzen kann, um eigenständige Webseiten/Webanwendungen zu schreiben. Nichts anderes machen Web-Agenturen seit Jahren: Sie programmieren was der Kunde will - nur haben es sich einige eben zur Aufgabe gemacht, auf Teufel komm raus, alles in Typo zu machen. Nicht weil es die beste Lösung ist, sondern weil es die Lösung ist, von der der Kunde schon mal was gehört hat - denn: „Was der Bauer nicht kennt, isst er nicht.” - und es ist für einige Agenturen leider leichter, für schlechte Seiten viel Geld zu nehmen, als den Kunden gut zu Beraten und das bestmögliche für Ihn zu realisieren.

Ärgerlich bei der aktuellen Typo3-Version ist eben, dass es sich zwar als Agentur »gut macht« dem Kunden zu erzählen: „Deine neue Seite basiert auf Typo3 - und JEDER der Typo3 kann, kann sie dann auch weiter entwickeln.” - das ist aber Augenwischerei.

Ehrlicher ist es da meiner Meinung nach zu sagen: „Deine neue Seite in (PHP mit Pear und Cake || Ruby & Rails || Perl || Phython || …) geschrieben und Dokumentiert. Jeder Programmier der schon mal was in der Sprache geschrieben hat, kann deine Seite weiter entwickeln und pflegen.”

 

[jensche]

Na dann erklär mir mal für was ein cms ist. Schlussendlich muss es für den kunden einfach editierbar sein.

 

[Sir Q]

Na dann erklär mir mal für was ein cms ist. Schlussendlich muss es für den kunden einfach editierbar sein.

Für mich ist es zum Beispiel total wichtig, dass ein Kunde (der noch nie den HTML-Quelltext gesehen hat) ein Redaktionssystem ohne Schulung oder Handbuch bedienen kann. Bei beinahe allen Projekten gelingt mir das - bei Typo3 ist mir nicht ein Fall bekannt wo ein das Kunde sich einfach so zum ersten mal vor den Browser gesetzt hat und gleich loslegen konnte …

Außerdem ist mir wichtig, dass die performance der Seite nicht durch den Ballast des Redaktionssystems beeinträchtig wird …