Direkt-Zugriff Karussell
Hier hat man einen besseren Überblick.
Falls man etwa ein Restaurant hat, wo man die Gerichte veröffentlichen möchte, kann der Kunde schneller durch die Angebote klicken.
Dieses basiert auf "Norman Nielsen Group", UX Beweis basiert.
Angenommen man hat das beste Gericht auf dem letzten Platz in einem normalen Karuseel.
Warum wäre das so schlecht?
Simply because it forces the user to work harder than she needs to: she has to process all the content that sequentially precedes the piece of information that she is interested in.
Thus, sequential access increases interaction cost.
NN/g: Direct Access vs.
Sequential Access: Definition.
Falls man eine Menge "Nachfahren Wähler" im
CSS hat, besteht eine schmalle Chance, dass man in Schwierigkeiten mit "directXS" kommt.
Wir arbeiten an einer allgemein mehr Freude erzeugendenden Version.
Man bekommt es hier:
Github.
Man kann uns immer unter "trncfrmcn@gmail.com" mailen.
Oder skypen an "trncfrmcn".
Man vergesse nicht auf PayPal zu spenden.
TRNCFRM Karussell
Bis zu 144 divs blenden zufällig ein und aus um einem die perfekte Wahrnehmung eines Überblendens zu geben (16 Jahre DJ Dasein haben geholfen).
Das ist total UI blockierend auf Grund des Einzel-Threads von Javascript, aber es ist die Anstrengung wert.
Wir haben diesen Crack ausgedacht, da konventionelle Karussells so langweilig sind.
Entweder es verschiebt, was ausserdem total nervend ist, oder es blendet einfach ein und aus.
Was nicht die perfekt Note ist, die wir bei lieb dich haben wollten.
Also warum blockiert es die ganze UI, sogar die Scroll Ereignisse des Browsers?
Es werden eine Menge Kalkulationan auf jedem der kleinen 144 divs gemacht, welches einiges an Rechen Ressourcen braucht.
Deshalb, wenn man es verwenden will, dann auf einer Seite mit wenig anderen Ereignissen oder in einem Popup.
Eine Login Seite ist ein gutes Beispiel für eine gute Benutzung (man denke an einen Online-Banking-Account, wo zusätzliche Informationen durch TRNCFRM gegeben werden können).
Man vergesse nicht, dass die übliche Belästigung durch selbst bewegende und wechselnde Bilder durch das großartige TRNCFRM Karussell vermindert wird.
Menschen sind einfach begeistert und schreien "Prometisch!".
Hier ist ein Code Ausschnitt erklärt:
//Get the corresponding div collection (thix) and set the
//height to the calculated amount.
$( divs[thix] ).height( lineHOut )
//Get the corresponding div collection (thix) and set the
//width to the calculated amount.
$( divs[thix] ).width( lineWOut )
//Set the z-index to 1 to have a fading out into the other
//picture.
$( trnc[thix] )
.css({
'z-index' : 1
})
setTimeout( function() {
$( divs[thix] )
.animate({
opacity : 1
} , timer , 'swing' ,'inOutta')
$( divs[thix] )
.dequeue( 'inOutta' )
} , times[thix]())
//Get the place on the line in a closure, due to the for
//loop's running.
for ( var h = 0 ; h < order * order ; h++ ) {
linesOuttaW[h] = saveH( h % order )
}
for ( var e = 0 ; e < order * order ; e++ ) {
$( divs[thix] ).eq( e ).css({
//Set the left amount of each div based on the
//place on the line.
left : linesOuttaW[e]() * lineWOut
, top : lineHOut * (counterOut)
//Get the corresponding picture, which need to
//be only once in the DOM loaded.
, 'background-image' : "url(" + pics[thix] + ")"
//Move the background position so, that you have
//a closed appearance in the image of the original
//picture.
, 'background-position' : -(linesOuttaW[e]() * lineWOut) + 'px ' + -(lineHOut * (counterOut) ) + 'px'
})
//Make a step for each new line.
if ( 0 == ( e+1 ) % ( order ) ) {
counterOut++
}
}
Wir hoffen, dass man versteht, dass man üblicherweise Bilddimensionen welche teilbar durch 12 sind braucht, weil man ansonsten Linien zwischen den
divs hat, auf Grund der unterschiedlichen Handhabung von Subpixeln von jedem Browser, welche auf ein Ganzes gerundet werden müssen.
Probieren geht über studieren, manchmal funktioniert es trotzdem.
Wie in unserem Beispiel
hier, welches Bilddimensionen von 640px x 640px hat.
Man bekommt es hier: Github.
Inline-block in CSS
Die Mysterien von display:inline-block liefern vertical-align:baseline als die vorausgesuchte Wahl.
Was das alles bedeutet findet man in dieser Veröffentlichung.
Wenn man ein Element auswählt und display:inline-block anwendet, ist man automatisch im "richte an dem tiefsten Teil aller Buchstaben" vertical-align:baseline aus Modus.
Aber es geschehen auch witzige Dinge, wenn man ein overflow:hidden auf das Element setzt.
Die baseline ist dann die der normalen Buchstaben, nicht die derjenigen mit Unterlängen wie "gpyqj".
Also könnte man coden
div{
display:inline-block;
overflow:hidden;
}
und man hat alle divs an einem aparten Teil der Buchstaben/Element Verbindung ausgerichtet.
Ich hoffe das hilft.
Responsive Font Größe
lieb dich entwickelte um den Willen eines Kundens Ehre zu retten Code, welcher bei Änderungen der Browsergröße die Schriftgröße proportional größer oder kleiner werden lässt.
Hier ist ein Demo div:
Math
A built-in object that has properties and methods for mathematical constants and functions.
Description
Unlike the other global objects, Math is not a constructor.
All properties and methods of Math are static.
You refer to the constant pi as Math.PI and you call the sine function as Math.sin(x), where x is the method's argument.
Constants are defined with the full precision of real numbers in JavaScript.
Wie man sehen kann "funktioniert" es.
Aber man werde nicht zu wählerisch damit, weil die Schriftgröße (intern in CSS) in Pixelstufen geändert wird oder sogar darüber.
Ernste Worte: "Es springt".
Aber falls man jemals etwas für einen Kunden tun muss, der es wirklich will, ich meine hier "wechseln der Größe des Design-Rasters", whohohoaaw...keine Top-Ten Site macht das
But if you ever get to do something for a client, who really wants this, I mean here "changing size of your design grid", whohohoaaw!
No top ten site does that: Alexa, browse Top Sites.
Und hier ist der Code:
;$( window ).resize( function() {
var startOnWindowWidth = 777 //lieb dich middle div size
, winW = $( window ).width()
, fontSizeSmall = 8 //font-size in "px" below startOnWindowWidth
, formulaX = ( fontSizeSmall * ( winW / startOnWindowWidth ) ) + ( ( Math.sqrt( winW ) - Math.sqrt( startOnWindowWidth )) / 2 )
if ( winW > startOnWindowWidth ) {
$( '.divResponsive' )
.css({
'font-size' : formulaX + 'px'
})
}
});
Cheerio!
Stark typenorientierter Polymorphismus in Javascript
Los geht's.
lieb dich hat Javascript stark typenorientiert und polymorphistisch gemacht.
Wirklich.
Nein, nicht im Kern.
Aber wir kamen nah dran.
var binder = function() {
var binderObj = new Object()
, string = function( a ) {
this.lengx = function() {
console.log( a.length)
}
this.space = function() {
var x = a.match(/ /)
if (x) {
console.log( "A space was found.")
} else {
console.log( "No space was found.")
}
}
return this
}
, array = function( a ) {
this.lengx = function() {
console.log( a.length )
}
this.space = function() {
a.forEach(function( val, indx ) {
if (a[indx] == null) {
console.log("An undefined or null value was found in the array.")
}
})
}
return this
}
, integer = function( a ) {
this.lengx = function() {
console.log(a.toString().length)
}
this.space = function() {
if (a.toString().match( 0 )) {
console.log("A zero was found in the integer.")
} else {
console.log("No zero was found in the integer.")
}
}
return this
}
binderObj.string = string
binderObj.array = array
binderObj.integer = integer
return binderObj
}
function polymorphy( pass ) {
if ( typeof pass == 'string' ) {
var bound = binder().string.bind( binder.string, pass)
}
if ( Array.isArray( pass )) {
var bound = binder().array.bind( binder.array, pass)
}
if ( typeof pass == 'number' ) {
var bound = binder().integer.bind( binder.integer, pass)
}
return bound
}
var stronglyTyped = polymorphy([1])
stronglyTyped().space()
bind() setzt hier das this des nächsten Funktionsaufrufes und liefert die Parameter Übergabe.
Also wenn die Type des übergebenen Parameters eine "number" ist, hat man im nächsten Funktionsaufruf von stronglyTyped() das this gesetzt auf binder().integer und das Argument ist bereit so wie geschrieben.
Coolen Code damit!
Liebe.
True Null hier drin
In diesem großartigen Zitat von Fred Koschara bekommt man die Bedeutung einer tief in den Eingeweiden von php versteckten Wurzel von Narzissmus.
PHP's handling of strings as booleans is *almost* correct - an empty string is FALSE, and a non-empty string is TRUE - with one exception: A string containing a single zero is considered FALSE.
http://php.net/manual/en/language.types.boolean.php#112190
Es ist schlecht, es ist schlimmer, es macht Sachen unmachbar.
Aber php ist großartig, es wird immer da sein.
Man sehe hier warum.
Als wir die Email Signatur App unten entwickelten, haben wir zuerst den Code benutzt, nachdem er aus theoretischen Überlegungen erdacht wurde.
Hier ist der Code:
function detox( $a ) {
if ( strlen( $a ) && ( int )$a === 0 ) {
return true;
} else {
return false;
}
}
Man sieht, was passiert wenn man eine Null in die Signatur App einträgt? Man sehe.
Das ist es.
Man sieht sie nicht nicht.
Es wird durch JSON rotiert, und alle leeren Einträge werden unset().
Dieser nicht.
Also brauchten wir diesen Code.
Kann man vielleicht gebrauchen.
Genießen.
Verhindern einer Wettlaufsituation in Javascript
Wenn man jemals eine Funktion entprellen möchte, auslösen nach dem letzten Tastendruck um eine Wettlaufsituation zu verhindern - man möge speichern oder validieren - kann dieser Code sinnvoll sein.
var timeout
$( 'body' )
.on( event , function() {
clearTimeout( timeout )
timeout = setTimeout( function() {
//Code hier.
} , 1000 )//Löst aus, wenn kein gleicher Event in der letzten Sekunde.
})
Dieses ist die jQuery Version, aber man kann das Konzept auch in einem
addEventListener() Fall in einfachem Javascript benutzen.
Wir haben es in einem speziellen Fall für unser VISUAL CMS benutzt, wo mehrfache Tastendrücker eine Datei pro Tastenanschlag kreieren würden, nur weil sie so schnell nacheinander hämmern.
Man denke an eine schnell tippende Person oder jemand der seine Finger über die Tastatur rollen lässt um zufälligen Text einzugeben.
Viel Spaß!
Z-index Wahn
Was ist mit z-index und den esoterischen Werten die ich in CSS setzen muss? Hier versucht lieb dich einen Überblick darüber zu erlangen was funktioniern kann und was nicht...man sei bereit für viel Kopf.
Zuerst muss man über die Werte wissen, die man setzen muss damit es überhaupt funktioniert und den
stacking context.
.a {
position: absolute;
}
.b {
position: relative;
}
.c {
opacity: 0.9999; /* smaller than 1 */
}
.d { /* at least one of */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);
transform: translateX(10px) rotate(10deg) translateY(5px);
}
.e { /* on mobile WebKit and Chrome 22+ */
position:fixed;
}
.f {
will-change : /* any */;
}
All das generiert einen neuen stacking context, das heißt man kann sich jeweils ein Blatt Papier vorstellen.
Ein bewanderter Maler in 3D kann die Illusion von Tiefe und Ebenen kreieren (z-index) aber kann nicht erreichen, eine Ebene visuell auf einem Blatt Papier in einem Abstand unter einem Anderen erscheinen zu lassen.
Das ist stacking context.
Photoshop
In Adobe Photoshop / Indesign / Illustrator oder Gimp hätte man eine neue Unterebene wo man die Objekte nur in Relation zu den Anderen Objekten in dieser Unterebene ändern könnte.
Z-index
Z-index erzeugt Bedeutung nur von dem Eltern Element, welches man zuletzt in einen Zustand von stacking context gesetzt hat.
Und man vergesse nicht, dass z-index nur bei position:relative oder position:absolute gesetzten Elementen funktioniert.
Wir hoffen das hilft.
Viel Glück.
Frauen Für Frauen
"Frauen Für Frauen" ist eine Versicherungs-Agentur, die spezialisiert darauf ist Frauen den Rückhalt zu sichern, wenn etwas schief läuft in der Ehe oder ähnlichem.
Spezialisiert auf die Bedürfnisse von Frauen im Versicherungs Sektor.
Das Icon
Wir entwickelten ein Icon, welches die Vorgaben des Kunden "Stöckelschuhe und Lippenstift" innehatte.
Jessica Hische ermöglichte uns mit ihrer
Schriftart ein smartes Icon zu entwickeln:
We haben eine optische gerade Linie durch justieren der Höhe jedes Buchstabens erreicht.
Das gibt dem Ganzen einen Kampf-Touch, oder? Der Kunde mochte zuerst die Farbe nicht.
Aber im
BGB (Bundesgesetzbuch) war klar zu sehen, dass bei der Abnahme Geschmacksfragen keine Rolle spielen, und da kein Sachmangel, musste der Kunde zahlen.
Die Web "Site"
Wir haben eine responsive Website gemacht, die sehr gut auf dem Desktop als auch auf mobilen Geräten funktioniert.Hier der Desktop Screenshot.
Es wird ein minimaler Stil gezeigt, für das immer visueller werdende Netz.
Man kann die Icons ohne weitere Beschreibung nach der 5 Sekunden Regel identifizieren, wie man besser auf der mobilen Version sehen kann.
Hier wurden die Icons größer als 80 Pixel, um den Benutzer unter dem Finger oder Daumen sichtbare Rückmeldung zu geben.
Das Cascading Style Sheet
Die Bilder für alle Links sind ein Sprite.
Das lädt alle möglichen Zustände in einer Datei und unterbindet Blitzer wenn man ein Icon klickt oder mit der Maus darüber fährt.
Die ganze Website ist schnell wie ein Blitz.
Wir hoffen man kann sich hieran erfreuen und wir begrüßen bald einen neuen Kunden.
lieb dich: service
lieb dich: service ist unser Oberklasse.
Wir liefern alles von der Corporate Identity (Icon, Geschäftspapiere) bis zu der Website (CMS, Shop, ...) meisterlich.
Der Preis richtet sich nach Grundkosten plus das Gebiet in dem man sein Produkt anbietet (Stadt / Region ODER Bundesland / Land / Welt) für die Rechte.
Man mag sich fragen, was das für eine Verbindung ist:
Music.
Web.
CI.
Aber wir versichern.
Verkaufen.
Das ist wo es alles verbunden ist.
Man muss die Herzen der Menschen berühren.
Um über die Interaktionskosten (Ein Begriff von UX.
User Experience.) zu steigen, um die Menschen dazu zu bringen auf etwas zu klicken, oder im echten Leben sich in die Schlange an der Kasse einzureihen, nur um das Produkt zu kaufen.
Da wir fortgeschritten sind in objektiven Studien über das Verhalten von Menschen im Laden (dem virtuellen), ist es gerade ein logischer Schritt, die Störungen nieder zu bringen um den Kunden sicher zu der Konversion, welche das jeweils definierte Ziel ist, zu schiffen.
Also wie könnte man besser als von einer talentierten Crew alle relevanten Teile der Markt-Erscheinung formen lassen um den Kunden das Gefühl zu geben, sie sind sicher vom Anfang zum Ende getragen? "Not #think." war ein Tweet, den ich "DOC ASAREL" gesendet habe über die perfekte Oberfläche, die Menschen nicht zum Denken bringt, sie bekommen einfach was sie wollen.
Kein Gedanke darüber "ist das Icon gut".
Kein Gedanke darüber "warum taucht das hier auf".
Kein Gedanke darüber "habe ich das richtige Stück in den Warenkorb gelegt".
Wir empfehlen uns.
Unser SEO
Eine Veröffentlichung über "SEO".
Was heißt es und kann man lieb dich beordern eine Website an die Spitze zu schießen? Wir werden mit Veröffentlichungen von Google zeigen, dass man es nur selber schaffen kann; mit ständigem veröffentlichen von Inhalt.
Die Grundlagen
Wenn wir gefragt werden, ob wir Magie an der "SERP" - Search Engine Ranking Position - bewirken können, antworten wir: "Alles Scharlatanerie, der Algorithmus auf dem das Reich von Google aufgebaut ist, ist unbekannt.
Vermeiden, was Google sagt man soll es nicht machen, und machen - ständig neuen, hoch qualitativen, einzigartigen Inhalt kreieren - was Google sagt man soll es machen."
What counts as a high-quality site?
Our site quality algorithms are aimed at helping people find "high-quality" sites by reducing the rankings of low-quality content.
Google: More guidance on building high-quality sites.
So raten wir, ein CMS zu benutzen und regelmäßig in die Forschung des jeweiligen Feldes abzutauchen und Inhalt erzeugen.
Nebenbei bekommt man von lieb dich ab Werk die fortgeschrittenste Struktur einer Website um alle bewährten Praktiken durchzuführen Google mit Inhalt zu füttern.
Bestrebungen sind da von Google, das "Web" - das Internet ist die Struktur der Hardware - auf ein neues Niveau zu heben.
Sie wollen es "semantisch" machen.
Das heißt, Google die Suchmaschine versteht, wenn man eine Telefonnummer auf die Website schreibt, dass jeder nach "Name_Ihres_Unternehmens Telefonnummer" googlen kann und das gewünschte Resultat bekommt.
Wie ist das gemacht? Mit "Microdata".
Man bekommt natürlich jetzt alles von lieb dich um in 10 Jahren immer noch präsent zu sein.
Today, we’re happy to announce support for microdata for use in rich snippets in addition to our existing support for microformats and RDFa.
By using microdata markup in your web pages, you can specify reviews, people profiles, or events information on your web pages that Google may use to improve the presentation of your pages in Google search results.
Google: Microdata support for Rich Snippets.
Imprint.
Privacy.