2011 7. Juli 2011

Die Frage nach der CSS-Hack

Wäre dies in einigen Blogs zu lesen ... dachte, es wäre schön, dies für zukünftige ref Katalog .... Auch könnte ein wichtiger Interview Frage sein, dass Sie eines Tages gefragt ....

Schreiben Sie einen kurzen Ausschnitt aus CSS, die einen Absatz in Blau in älteren Browsern, rot in neueren Browsern zeigt, grün in IE6 und IE7 in schwarz

#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}


2011 18. Februar 2011

IE Javascript Fehler: Das Objekt unterstützt diese Eigenschaft oder Methode

Hatte diese seltsame Frage, wo ein Stück Javascript in all den Browser wie gewohnt ans bar IE funktionierte gut :) Einfache ... es war, aber da das Skript wurde nicht von mir geschrieben, dauerte es eine Weile, um dieses "Objekt unterstützt diese Eigenschaft oder Methode" Fehler, dass nur IE kotzte debuggen. Wahrscheinlich! Wenn ich das Script zu schreiben wäre, würde ich nicht habe diesen Fehler überhaupt, wie nicht mischen meine Variablennamen mit Feld-IDs :).

Problem: Das Objekt unterstützt diese Eigenschaft oder Methode (auf Linie 3)

 function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } 

Lösung:
Der Fehler wird auf der thirdrow im obigen Beispiel (Linie 3 ... "shortdesc = document.getE ....") erzeugt. Ich habe versucht, alle Art von dummen Dinge, dass ich nicht einmal wert, ist die Erwähnung hier und schließlich guess what! nur die Änderung der shortdesc var, etwas anderes zu losgeworden den Fehler. Grundsätzlich! Der Name der Variablen musste sich von der FieldID


2010 28. Dezember 2010

Zeigen Sie statische HTML-Seite in Android (Eclipse) Emulator

Für ein paar Stunden bin ich bei Lösungen gesucht, um run / testen meine statische HTMLs in der Eclipse / Android-Emulator. Waren nicht ganz erfolgreich aber .... was ich unter "total" ist die HTML geladen wird OK aber die ganze CSS und JS, dh der visuelle Ausdruck wird nicht gesehen. Im Entwickler Worten, die CSS nicht auf die Seite angewendet ...

Dachte, es würde ein paar anderen Neuling Android UI-Entwickler, wenn ich die Schnipsel nach unten, die ich verwendet, um die HTML-Anzeige zur Kenntnis genommen.

Und Android-Gurus, fügen Sie bitte Ihre Kommentare helfen uns Neulinge in der mobilen Anwendung UI-Entwickler weiter!

Sorry! aber Im vorausgesetzt, dass Sie wissen, wie ein Android Mobile Application in Eclipse erstellen.

Erstellen Sie dies als Ihre Aktivität; Dadurch wird die Datei "index.html" aus dem Projekt Vermögenswerte / Ordner zu lesen.

 public class Test extends Activity {  /** Called when the activity is first created. */  @Override  public void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    WebView webview = new WebView(this);    setContentView(webview);    try {      InputStream fin = getAssets().open("index.html");        byte[] buffer = new byte[fin.available()];        fin.read(buffer);        fin.close();        webview.loadData(new String(buffer), "text/html", "UTF-8");    } catch (IOException e) {      e.printStackTrace();    }  } } 

2010 20. Mai 2010

Re-Cycling CSS: Ein Blick auf CSS-Frameworks

Re-Cycling ist Buzzword und bei der Webentwicklung bedeutet es nicht anders. Es spart Energie, in Bezug auf Aufwand!

Über Jahre hinweg zu schreiben und Erstellen von HTML-CSS-Designs aus, ich habe ein paar Best Practices gefolgt, in der Verfolgung das spart Zeit und Energie in das, was wir gemeinhin als Begriff "Re-Erfindung des Rades". Immer wieder habe ich mir gesagt, dass ich ein paar Vorlagen zu erstellen, einige Standard-Mehrweg-CSS, die ich benutzen würde OUT OF THE BOX in meine zukünftige Arbeit. Obwohl nicht vollständig, aber ich habe es geschafft, einige Ziele zu erreichen.

Bei der Förderung, Re-Use von CSS, hatte ich einen Blick auf die wenigen CSS-Frameworks, die üblicherweise zur Verfügung zu stellen sind und beschlossen, sie zu benutzen, da diese erprobt und getestet und erstellt von erfahrenen Entwicklern viel, als ich. Noch wichtiger ist "vermeiden eine erneute Erfinden".

Obwohl allgemein bekannt, Veteranen, habe ich versucht zu Stift einige Schlüsselbegriffe / Best-Practices / Gedanken, die in die Schaffung dieser Rahmenbedingungen, um RE-cycling von CSS möglich gewesen ist. Hoffen, dass dies einige CSS-Entwickler, die gerade dabei sind und vor kurzem an Bord der CSS-Zug aufgesprungen zu helfen!

Keys Re-cycling von CSS:

Verwenden Sie Namenskonventionen

Dies hat zu der wichtigste Faktor bei der Herstellung der CSS / HTML wiederverwendbar sein. Giving konsistente Namen zu Seite Elemente ermöglicht die Wiederverwendung von Komponenten und deren Seite Stile mit wenig oder Modifikationen. Im Einklang mit diesem Argument, auch HTML5, zu einem grundlegenden Wandel Veränderung gegenüber seinen Vorgängern, ist es, einige strukturelle Tags nämlich einzuführen. <article>, <section>, <header>, <aside> und <nav> [ Was wird HTML5 zu bringen? ]. Selbst mit HTML 4 (oder niedriger), ist es am besten Standard Bereichen Ihrer Seite consistanly wie in der einfachen Beispiel unten zu nennen ...

Denken Sie daran, die meisten Seiten auf Ihr Projekt, am Ende mit den gleichen Kern Strukturelemente. Identifizieren Sie diese gemeinsamen Kern Seitenelemente ....

  <div id="container">
    <div id="header"> ... </ div>
    <div id="nav"> ... </ div>
    <div id="sidebar"> ... </ div>
    <div id="footer"> ... </ div>
   </ Div> 

Reset Default Styles (CSS Resets): Ob Sie einen Rahmen oder benutzen Sie schreib, müssen Sie CSS-Resets bieten [ Was sind CSS-Resets? ], da sie manchmal zu beseitigen oder zu reduzieren visuelle Unstimmigkeiten, die zwischen verschiedenen Browsern auftreten. In einfachen Worten die CSS-Reset-Mechanismus setzt die Stile der HTML-Element auf Null oder NULL-Werte und somit Vorrang vor allen Browser-Standardwerte können sie stellt. Dies bietet eine tabula rasa, um die Eigenschaften dieser Elemente ohne irgendwelche User-Agent-Defaults [gesetzt CSS2.1 User Agent Style Sheet Defaults ]. Alle CSS-Frameworks kann der Reset-Mechanismus haben. Wenn Sie mit dem Schreiben Sie eigene CSS-Resets werden, ist ein Wort der Vorsicht, dass, wenn Sie vergessen, eine wichtige Eigenschaft zurückgesetzt passieren, könnte es zu Cross-Browser-Probleme, die sehr schwer zu debuggen sind zu führen. Denken Sie daran, Behalten Sie eine Kopie der Reset-Stile und Drop in jedes neue Projekt, das Sie erstellen.

  Körper, div, dl, dt, dd, ul, ol, li,
  H1, H2, H3, H4, H5, H6,
  vor, Form, fieldset, Input die Option, textarea,
  p, blockquote, Tisch, th, td
  {
    border: 0px;
    margin: 0;
    padding: 0;
  } 

Set Defaults (Baseline Styles), um Elemente:

Nachdem Sie (auf Null oder null) haben die Standardwerte bestimmter persönlicher Eigenschaften bestimmter HTML-Elemente, ist es notwendig, einige Stile in jedem Fall dieser Elemente gelten. Diese Voreinstellung kann nach der Gestaltung variieren oder nach die besten Praktiken, die Sie verfolgen.

Die meisten CSS-Frameworks, immer einige neue Vorgaben, zusätzlich zu Zurücksetzen Standard-Browser Stile.
Diese Standardwerte Unwirksamkeit der User-Agent-Defaults (weg von der CSS-Reset-gestrippt), werden diese im Einklang mit allen Browsern.

Erinnern Sie sich, Baseline Styles verwendet werden, um Stile, die gehen Design-weite verwendet werden soll. zB.

  html {font-size: 77%; font-family: Arial, sans-serif;}
 starke, H1, H2, H3, H4, H5, H6 {font-weight: bold;} 

Abstract Styles für Common HTML-Komponenten und gemeinsame Klassen:

Die meisten Vorhaben, die aus mehreren Seiten wird häufig HTML-Elemente auf der Website verwendet, zB für irgendeine Art von Formen, Warnungen und Fehlern, Custom Popups, Leuchtkästen etc. haben seit über solche Komponenten sind wieder über Projekte verwendet, wird es nützlich sein, die Bereitstellung eines Satz von Klassen mit vordefinierten Stilen für diese Komponenten verbunden und Sie ersparen sich eine Menge Zeit.

Abgesehen von der Definition wiederverwendbare Stile Definitionen für die gängigen HTML-Komponenten, konnten wir abstrakten Stilen Klassen in Bezug auf Typografie, Farbe oder sogar Layout. Ich selbst neigen Sie ... gemeinsame Klassen wie Clearfix, Font08, FontGrey, AlignL, DisplayB usw.

  Form input {border: 0px; background: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; height: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;}
 Form textarea {border: 0px; background: # FFFFFF; color: # 000000; font-size: 0,9 em; line-height: 1.5em; overflow: visible;}
 . Fbold {font-weight: bold; color: # CCCCCC;}
 . Fgrey {color: # 666666;}
 . Flightgrey {color: # bbbbbb;}
 . Clearfix {clear: both;}
 . Teiler {border-top: 1px solid # 647B06; border-bottom: 1px solid # 9CC00A; height: 0px;}
 . Displayb {display: block;}. Displayn {display: none;}
 . Alignr {text-align: right}. Alignc {text-align: center}
 . Floatr {float: right;}. Floatl {float: left;} 

Fixes, um gemeinsame Browser Tücken

Verschiedene Browser CSS-Code zu implementieren und bieten unterschiedliche Niveau der Unterstützung für die CSS-Spezifikationen. Dies hat zur Folge .... "Browser-Quirks", dass wir den Entwicklern überlassen werden, um anzupacken. Insbesondere verfolgt die meisten IE6 CSS-Programmierer mit einer Frist zu erfüllen. Die gute Nachricht ist die Erfahrung hat gemeinsam möglich WIEDERVERWENDBAR Fixes für diese Probleme (oft als sogenannte gebracht CSS-Hacks ).

Denken Sie daran, halten Sie diese Hacks / Fixes handlich

  / * Die folgende zoom: 1 Regel ist speziell für den IE6 + IE7.  * /
    * Html. Clearfix,
    *:. First-child + html clearfix {
           zoom: 1;
      } 

Halten Verfeinern der CSS

  • Die Gewohnheit, Recycling-nicht zu euch kommen in Tag. Es muss entwickelt. So planen Sie Ihren Re-Cycling. Achten Sie hierauf, dass man abstrakte Vorgaben Stile, Typografie Definitionen, Layouts, HTML-Element Styles etc. Versuchen Sie, vorausschauend zu denken.
  • Auch blicken zurück auf Ihre früheren Projekten, wird es dazu beitragen, Stile, die Sie verwenden oft über porjects neigen. Kurzfassung es.
  • Entfernen Sie alle unbenutzten Stile. Diese Praxis wird Ihre CSS-Framework von einem gemeinsamen Symptom als "Aufblähung" zu halten -
  • Nehmen Sie sich wiederholende Stile.
  • Bauen Sie eine Reihe von Stilen, die flexibel genug, um es über die Projekte hinweg zu portieren sind.

Ein Blick auf CSS-Frameworks

Endlich. Wenn Sie inspiriert sind und beabsichtigen, eine oder mehrere der CSS-Frameworks verwenden, ist Heres kurze Liste von einigen wenigen populären ....

  • 960 Grid System : Das 960 Grid System ist ein Versuch, Web-Entwicklung Workflow, indem sie häufig verwendete Dimensionen, basierend auf einer Breite von 960 Pixel zu optimieren. Es gibt drei Varianten: 12, 16 und 24 Säulen, die getrennt oder gemeinsam genutzt werden können. Dachte sich nichts, dass man nicht schaffen ein für Ihre eigenen leicht genug, Der Rahmen Raster-Vorlagen für den Druck im PDF-Format, dass man benutzen, um Ihre Seite designs.Bet skizzieren können bietet, wäre es einen professionellen Eindruck, wenn man ein paar Blätter tragen, wenn Sie gehen an einen Client für UI-Anforderungen sammeln. Es bietet auch Grundraster Vorlagen für beliebte Design-Software wie Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, etc. Bereitstellung eines "Starter for Ten" zu Ihrem Design Arbeit zu beginnen.
  • Blueprint : Blueprint bietet deutlich klassifiziert CSS-Dateien für Resets, Grids, Formulare, Druck, Typografie, Plugins für Schaltflächen, Registerkarten und Sprites etc. Es bietet auch Unterstützung für IE als separates gehören.
  • SenCSs : Im Gegensatz zu den beiden obengenannten SenCSs (sprich: Sense), verfügt nicht über CSS-Definitionen für das Layout. Die Informationen enthalten Schriftarten, Polsterungen, Ränder, Tabellen, Listen, Überschriften, blockquotes, Formulare und vieles mehr.
  • BlueTrip : Seine ursprüngliche Anspruch auf Ruhm war, dass es eine Kombination der besten Features von anderen Frameworks wie andere Blue Print, Trip oli ... von wo aus er seinen Namen zur Verfügung gestellt wurde. Sein Feature-Set umfasst 24-Stützenraster, Typografie Stile, ORM-Stile, drucken, Buttons etc.
  • YUI Grids : Geholt Ihnen durch den yahooo Developer Network unterstützt fluid-width (100%) Layouts sowie voreingestellte Layouts fester Breite auf 750px, 950px, 974px und, und die Fähigkeit, leicht auf eine beliebige Anzahl anpassen. Wie Sie sehen können, die technisch nur die Komponenten-Layout. YUI auch vorgesehen HTML / CSS-Sets für andere Seitenelemente
  • YAML (Yet Another Multicolumn Layout)
  • Emastic

Denken Sie daran, mit Hilfe von CSS-Frameworks bedeutet nicht, dass Sie faul, um ein eigenes zu erstellen sind ... Es impliziert, dass Sie klug, um von anderen Erfahrungen und Fehlern zu lernen, Zeit sparen und Produktivität steigern sind!!


2010 13. März 2010

@ FontFace: Ausdruck mit einer Schriftart Ihrer Wahl; Mit WebFonts

CSS beendet 10 Jahre Bestehen in diesem Jahr! Diejenigen, die sich für eine Weile gewesen sind, verdienen ihr Brot (oder nicht) unter Verwendung von CSS, dann habe bewusst, wie wir für eine gute Auswahl an Schriften gehungert. Selbst mit dem Mangel an Schriften-Designer wie diejenigen bei CSS Zen Garden haben die Verwendung von CSS-Hintergrund-Bilder von Schriftarten in dem Streben nach Gerechtigkeit dabei einige um ihre Entwürfe zu ersetzen hat. Wir haben auch versucht Flash / JavaScript ®-Hacks, um unsere Design-Ziele zu erreichen. Auf keinen Fall ist dies ein falscher Weg, um die wir uns wünschen Schriften in unsere Web-Designs zu bekommen, aber definitiv ist es nicht das begehrteste Weise. und über Jahre Web-Designer, wie ich, haben sich voll auf zehn oder so Fonts für ihre Entwürfe verlassen.

Jüngste Entwicklungen in der Web-Standards und Font-Formate machen es möglich, HTML-Text in Schriften außer den gleichen alten Standard-Schriftarten machen. Kommt in dem "@ fontface" CSS Decleration.

@ Fontface provids eine Lösung für die aktuelle Schriftart-Datei zu verknüpfen und rufen Sie sie aus dem Web. Verwenden von @ fontface können Designer-Schriftarten, ohne den Text als Hintergrundbilder verwenden einfrieren. Die Umsetzung ist sehr geradlinig, wie unten dargestellt, sondern als alle guten Dinge ein CON Teil müssen sie unterstützen nicht alle Browser eine einzige "Schriftart". Wenn Sie planen, in @ fontface Website verwenden mit Cross-Browser-Unterstützung benötigt werden, dann müssen Sie Quellen zu verschiedenen font-Typen derselben liefern.

  1. TrueType - Ein Format, das gut aussehen auf dem Bildschirm. Besonders empfohlen für Windows-Browsern (Chrome).
  2. OpenType (CFF) - Dieses Format ist besser für den Druck der Arbeit und sieht nicht immer gut unter Windows.
  3. EOT - Sie benötigen dieses Format, wenn Sie Internet Explorer ausrichten möchten. IE wird nicht mit irgendwelchen anderen Format. Unsere EOT würde als die "Lite", da sie weder komprimiert noch Domain-eingeschränkt werden.
  4. SVG - Das ist ein XML-Format von einigen Browsern einschließlich dem iPhone unterstützt.
  5. WOFF - Das Cross-Browser, Web-only-Font-Format ist leicht (Font-Daten ist zip komprimiert) und kann entweder mit TrueType-oder PostScript (CFF) skizziert kompiliert werden. Es wird gegenwärtig von Firefox 3.6 unterstützt +.

Verwenden von @ fontface

  @ Font-face {
 font-family: 'CalligraphyFLFRegular';
 src: url ('CalligraphyFLF.eot');
 src: local ('CalligraphyFLF'), lokale ('CalligraphyFLF'), url ('CalligraphyFLF.woff') format ('WOFF'), url ('CalligraphyFLF.ttf') format ('TrueType'), url ('CalligraphyFLF . SVG # CalligraphyFLF ') format (' svg ');
 }
 @ Font-face {
   font-family: "Ihre Schrift";
   src: url ("fonts / font_filename.eot");
   src: local ("Alternate Name"), lokale ("AlternateName"),
     url ("fonts / font_filename.woff")-Format ("WOFF"),
     url ("fonts / font_filename.otf")-Format ("OpenType"),
     url ("fonts / font_filename.svg # font_filename")-Format ("SVG");
   }
 h2 {font-family: "Ihre Schrift", Georgia, serif;} 

Wie Sie aus dem obigen Beispiel zu sehen, um die gewählte Schriftart Schrift gehören, muss man sich auf einen Satz von fonttypes für das gleiche Schriftbild zu verknüpfen. Daher Leute bezeichnen es als "Font Kit".
Es gibt Font Kits zur Verfügung, die explizit erlaubt die Verknüpfung mit der CSS @ font-face-Eigenschaft, um es unter End User License Agreement (EULA).

Nützliche WebFont Ressourcen:

  • Verfügbaren Schriftarten für @ font-face Einbettung Wiki-Seite bei http://webfonts.info/wiki/index.php?title=Main_Page
  • Ray Larabie . Er ist ein renommierter Schrift-Designer, die hunderte von interessanten TrueType-Schriften frei verfügbar für den Einsatz im Web gemacht hat. Seine Schriften sind elegant, dekorativ und verspielt.
  • Dieter Steffmann ist ein weiterer großer Schrift-Designer. Auch er hat viele schöne verfügbaren Schriftarten für jedermann zu benutzen gemacht.
  • Font-Shop : Fonts bietet speziell für die Web-Nutzung ausgelegt. Mehr als 30 der erfolgreichsten FontFont Familien sind jetzt auch als Web FontFonts. FontShop hat auch eine detaillierte Anleitung WebFont http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  • Font Squirrel : Vitrinen, dass alle Schriften Font Squirrel bietet für den Einsatz mit @ font-face CSS-Einbettung. Font Squirrel bietet eine beeindruckende Menge an Typ, macht es einfach tot um ein herausgreifen, handlich und bietet "Kits" - die Schrift Ihrer Wahl, in verschiedenen Formaten, mit Demo-HTML & CSS verpackt, die sehr aktuelle @ font-face-Syntax verwendet . Sie bieten auch einen Weg, um Ihre eigene @ font-face-Kits machen . Wenn die Schriftart Sie verwenden möchten, wurde entsprechend (die, die mit dem Computer kommen, sind nicht unbedingt in Ordnung) lizenziert, produziert der Generator EOT, SVG, und hey! WOFF-Dateien.

2010 9. März 2010

Es geht um den "Web-Designer, die nicht programmieren können"

Mit meinen begrenzten Fähigkeiten, die mit Werkzeugen wie Photoshop und Illustrator, kann ich ehrlich gestehen, dass ich ein besserer Entwickler, als ich ein Designer bin. Aber mein Hintergrund mit Kern (Server-Seite) Entwicklung mit Java / PHP / COBOL, war ein sehr positiver Einfluss auf meine UI-Entwicklung Fähigkeiten. Was ich meine ist, während der Erstellung meiner Entwürfe, dh immer wenn ich Design zu tun, ich darüber, wie das Design lässt sich am besten in HTML-CSS konvertiert werden und während Sie das HTML-CSS denke, gebe ich einen Gedanken über das Backend-Technologie und machen ziemlich sicher dass der HTML lässt sich einfach in XSL-Schleifen-oder PHP-Schnipsel usw. umgesetzt werden

Über Jahre hinweg, habe ich den Kopf auf den Entwürfen geworfen durch UI-Designer, die wahrscheinlich donot Ahnung, was HTML oder CSS ist. All diese Jahre habe ich gedacht, dass ich für zu viel verlangt, wenn ich nur erwarten, dass der Designer, der versucht, seine "unmöglich, Code"-Design in meine Kehle shov wird, um nur ein wenig, was sein Design umgewandelt werden würde verstehen in. DAS wäre richtig helfen?

Dann stieß ich auf dieses Thema liegt heute ... Web-Designer, die nicht können Code ... Danke Herr! Ich bin nur einer von vielen, die das gleiche fühlen ... Die oben artitle ist ein bisschen ein langatmig .. aber es lohnt sich lesen, jedes Wort davon.

Vielen Dank Elliot Jay Stocks ... Ich fühle mich erleichtert!

Hier einige Auszüge aus Elliots Artikel .

Wow, was für ein Tag! Es begann mit ein wenig Tweet und endete mit einer Diskussion, die über die gesamte Web-Design-Community zu kehren schien. Es scheint, gibt es einige sehr starke Meinungen zu dem Thema, ob Web-Designer sollten in der Lage, Code gehalten.
...
Also, bevor wir uns damit, erlauben Sie mir, schnell rekapitulieren, was ich an diesem Morgen sagte auf Twitter:

Ehrlich gesagt, ich bin schockiert, dass im Jahr 2010 ich komme noch über "Webdesigner", die nicht programmieren können ihre eigenen Entwürfe. Keine Entschuldigung.

... Ich hätte ein wenig mehr in meinem speziellen Tweet habe. Ich war über Designer, die nicht einmal die grundlegendsten HTML-und CSS-Fähigkeiten, um eine flache Bauweise zu einem wirklichen Ort drehen zu sprechen. Nicht Menschen, die absichtlich nicht wählen, um Code, diejenigen, die nicht können. Und ich bin auch nur bezogen auf Front-End-Code hier, natürlich ist es lächerlich zu glauben, dass die Designer auch erstaunlich Back-End-Programmierer sein ...

Wir bekommen 'web' Entwürfe in Illustrator, 300dpi geschickt, unmöglich, Code, keine Konsistenz / Usability.
~ Amy Mahon

Es wird spät, und ich habe, um diese irgendwie bis zu wickeln. Ich weiß, es wird viele, die mit mir nicht einverstanden sein, und meine Absicht ist nicht zu beleidigen oder verärgern Wer will, kann nicht Code, aber ich hoffe, dass einiges von dem was ich gesagt habe, einige der Punkte, die immer kommen, wenn Eintauchen in reflektiert Diese Debatte.

Am Ende des Tages, kann ich keine schlaflosen Nächte darüber, wer zu kodieren und wer nicht. Ich bin nur ehrlich überrascht, so viele Designer, die Front-End-Fähigkeiten fehlen, wie ich das war ein Ding der Vergangenheit dachte finden.

Auch die Kommentare lesen, gab es rund 320 Kommentare, wie ich schreibe ... sie sind lesenswert.
Bitte lesen Sie Elliots full post hier .. Web-Designer, die nicht programmieren können


2010 4. März 2010

Ausrichten Radio-Button mit Text

Da der Radio-Button und der Text inline sind, so wird der Text selbst auf dem Boden des Radio-Button ausrichten, wird der Text angezeigt, der leicht unter dem Radio-Button sein.
Wenn Sie diese an die Spitze ausrichten möchten, müssen Sie, um das Radio und den Text in getrennten Behältern wie divs oder Spannweiten (gegebenenfalls) zu platzieren und sie kümmert sich um die Ausrichtung zu nehmen. Es wäre einfacher zu Tabellenzellen zu verwenden, von Designvorgaben es zulässt.

Das wird nicht gleich aussehen in jedem Browser, da jeder Browser zeigt Radios etwas anders, so dass es immer los ist, um Größen-Fragen sein, egal was du tust.


2010 8. Januar 2010

Was wird HTML5 zu bringen?

HTML5 ist noch ein Entwurf. Während ich schreibe, auf HTML 5, die 2004 ihre Arbeit aufgenommen, wird derzeit noch Form durch eine gemeinsame Anstrengung zwischen dem gegebenen W3C HTML WG und der WHATWG . Das Wort ist, dass die Next-Gen-Datei wird Verbesserungen und Features, die haben würden neue Struktur und Semantik, Formular-Steuerelemente, APIs, Multimedia-Tags usw..

In einfachem Englisch ... Was würde es für uns UI-Entwickler bedeuten ...

  • Es wird neben einer strukturellen Tags viz. <article>, <section>, <header>, <aside> und <nav>, die die Mehrheit der <div> s auf einer Webseite verwendet werden, ersetzen würde, so dass Ihre Seiten ein bisschen mehr semantische, aber noch wichtiger ist, leichter zu lesen.
    Hey! Man stelle sich den Aufwand bei der Feststellung, dass eine fehlende Nähe DIV-Tag gespeichert.
    zB
  <body>
   <header> ... </ header>
   <nav> ... </ nav>
   <article>
     <section>
       ...
     </ Section>
   </ Article>
   <aside> ... </ beiseite>
   <footer> ... </ footer>
 </ Body> 

Statt

  <body>
   <div id="header"> ... </ div>
   <div id="nav"> ... </ div>
   <div class="article">
     <div class="section">
       ...
     </ Div>
   </ Div>
   <div id="aside"> ... </ div>
   <div id="footer"> ... </ div>
 </ Body> 
  • Mit dem Aufkommen von Audio-und Video-Inhalte wie YouTube, der Einsatz von Embedded-Multimedia auf der Webseite wurde von fach increaded. Wenn man dies berücksichtigt, nun der Plan ist, native Unterstützung für das Einbetten von Video und Audio in den Browser selbst hinzuzufügen, damit die Benutzer zum Spielen, Pause, Stop, suchen, und die Lautstärke über das eingebaute DOM-APIs für Skripte, um die Wiedergabe zu steuern.

zB

  <video poster="poster.jpg">
     <Quelle src = "video.3gp" type = "video/3gpp"
     media = "handheld">
         <source src="video.mp4" type="video/mp4">
 </ Video>
 <audio>
   <source src="music.oga" type="audio/ogg">
   <source src="music.mp3" type="audio/mpeg">
 </ Audio> 
  • Semantischen Rollen für bestehende Elemente, beispielsweise zur besseren definiert. <strong> und <em> könnte nun tatsächlich unterschiedliche Bedeutungen haben, dh sie sich anders verhalten wird.

Es gibt viele weitere Änderungen / Upgrades auf die neuere Version ... halten die Aktualisierung dieses Amt, wie ich irgendetwas auffallen, interessant nützlichsten kommen .... Watch this space

Dieses Dokument darf weder genaue Informationen, wie die HTML 5-Spezifikation ist immer noch aktiv in der Entwicklung. Wenn Sie Zweifel haben, überprüfen Sie immer die HTML 5-Spezifikation hier .


2009 7. November 2009

CSS ZOOM - Yet Another IE Marotte; Der 3 Pixel-Shift

Zeit und immer wieder, Wenn alle anderen Browsern gesehen zu verhalten, wie vom W3C Regeln, dh Spiralen Sie aus der Entwicklung von Geist einen Wutanfall gesagt, bedeutet das nicht scheinen, um ein Update zu haben. Genau ein solcher ist dieses Problem in IE7.

Problemstellung:
Ich und so könnten viele der anderen ernsthaften Web-Entwickler haben mehr als Viele Male, dass, wenn es verschachtelt schwimmt im Layout, auf schweben über einige Links (Anker-Tags) bemerkt, scheint das enthaltende Behälter, um ein paar Pixel nach rechts verschieben . Ich habe mit google Lösungen für dieses Problem versucht, aber haben kaum eine vernünftige Antwort gefunden, warum und wann es auftritt (das könnte helfen, dieses Problem zu verhindern), daher habe ich noch nie eine klare Lösung für das Problem gefunden: entweder ...

Mögliche Lösung:
Aus Erfahrung, ich habe Vorankündigung 90% Prozent der Zeiten heißt, dass dieses Problem durch das Hinzufügen einer Zoom-Eigenschaft in der CSS-Definition der mis-verhalten Behälter befestigt ist ...

 # {Somediv
       zoom: 1;
 }

wieder die Gründe sind unklar ... try this ...
Einige Elemente im IE eine "hasLayout"-Eigenschaft, die "wahre" standardmäßig aktiviert ist. Viele visuelle CSS-Verhalten, zum Beispiel, ein Alpha-Filter funktioniert nur auf ein Element, dass hasLayout. und die {Zoom: 1} zu geben scheint die Zielelemente die hasLayout Eigentum .... Sinnvoll? Ich denke nicht so ...

Die Zoom-Eigenschaft wird auch scheint von Chrome unterstützt, aber seine Verwendung kraft scheinen viel negativen Einfluss auf mein Layout machen ... versuchen Sie es, wenn es für Sie funktioniert ... wenn nicht, Bookmark auf diese Seite unter "CSS scheißt"


2009 18. Oktober 2009

HTML und XHTML

  • Die Dokumenttyp-Deklaration muss am Anfang eines Dokuments, das die HTML-Syntax verwendet Gegenwart. Es kann gegebenenfalls in der XHTML-Syntax verwendet werden, aber es ist nicht erforderlich. Der XHTML-Dokument muss nicht die DOCTYPE enthalten, weil XHTML-Dokumente, die geliefert werden korrekt mit einem XML-MIME-Typ und werden als XML von Browsern verarbeitet werden, sind immer in kürzester Quirks-Modus gerendert.
  • In XHTML sind Tag-Namen Groß-und Kleinschreibung und sind in der Regel definiert werden, um in Kleinbuchstaben geschrieben werden. In HTML sind aber Tag-Namen Groß-und Kleinschreibung und kann in Groß-oder Groß-und Kleinbuchstaben geschrieben werden, obwohl die häufigste Konvention ist es, mit Kleinbuchstaben zu bleiben. Der Fall der Start-und End-Tags müssen nicht gleich sein, aber konsequent hat den Code schauen sauberer zu machen.

VORTEILE der Verwendung von HTML

  • Rückwärts kompatibel mit existierenden Browsern
  • Die Autoren sind bereits mit der Syntax vertraut
  • Die nachsichtig und verzeihend Syntax bedeutet, es wird kein Benutzer-feindlich "sein Yellow Screen of Death ", wenn ein Fehler versehentlich rutscht durch
  • Praktisches Kürzel Syntax können zB Autoren weglassen einige Tags und Attributwerte

VORTEILE DER NUTZUNG XHTML

  • Strikte XML-Syntax unterstützt Autoren zu wohlgeformt Markup schreiben, die einige Autoren finden leichter zu warten
  • Direkte Integration mit anderen XML-Vokabulare, wie SVG und MathML
  • Erlaubt die Verwendung von XML-Verarbeitung, die einige Autoren verwenden als Teil ihres Redaktions-und / oder Publishing-Prozesse

NDK Hause | Ausdruck ihrer IT | Ausdruck Gaumen | Penmenship Ausdruck | Ausdruck Awe | mich auszudrücken