Am Ende ist doch alles HTML - 2012 - Webmontag EditionJens Grochtdreis
Kurzvortrag über die Bedeutung des Frontends. Ich rege zu mehr und besserer Kommunikation an und gebe Beispiele für Verbesserungen durch moderne Techniken. Zuerst gehalten auf dem Webmontag in Marburg (30.07.2012)
Wir brauchen einen neuen Workflow. Die getrennte Arbeit von Designern und Frontendentwicklern geht an der Realität vorbei. Heute müssen sich Webseiten ihrer Umgebung noch stärker anpassen, als sie es grundsätzlich sollten. Das erzeugt technische und designerische Probleme. Beide sollten zusammen gelöst werden.
Die Inhalte meiner ersten "Session" des Praktikums über Frontendentwicklung an der Uni Mainz. Die Stundenten sollten erst einmal in die Grundproblematik eingeführt werden.
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CJens Grochtdreis
Auf dem W3C-Tag 2010 ergriff ich die Chance, das W3C zu schnellerem Handeln in Sachen Webstandards zu ermutigen. Die Entwicklungsgeschwindigkeit bspw. bei CSS3 ist einfach zu langsam.
Die Anforderungen für Websites sind heute oft widersprüchlich: verlangt ist ein zeitgemäßes Design und ansprechende Animationen, aber bitte mit offenen Webstandards, damit das ganze auch auf Smartphones und Tablets gut aussieht. Gleichzeitig ist auf Kundenseite aber ein Browser im Einsatz, der seit Jahren nicht mehr aktualisiert wurde. Jonathan Weiß stellt Lösungen vor, um diese Herausforderung zu stemmen und zeigt, welches kaum bekannte Potenzial im Legacy-Browser steckt.
Native Cross-Platform-Apps mit Titanium Mobile und AlloyMayflower GmbH
Dank der Webtechnologien stehen Ihnen viele Möglichkeiten bereit, auf dem mobilen Markt präsent zu sein. Da sind unter anderem W3C Widgets, mobile Webseiten, Webapplikationen und als native App verpackte Webapplikationen. Eine weitere Möglichkeit stellt das Titanium-Mobile-SDK dar. Das Besondere: Mit Titanium erstellte Apps sind nativ. Aus nur einer Codebasis können Sie eine native Anwendung für iOS, Android, BlackBerry und Tizen generieren, sowie eine Webapplikation. Nativ bedeutet, die Apps werden nicht nur sehr schnell ausgeführt, sondern es stehen Ihnen für eine optimale Usability auch native UI Widgets zur Verfügung. Interessant ist das SDK daher nicht nur für Webentwickler, sondern auch für Entwickler, die ihre Apps bisher aufwändig individuell nativ entwickelt haben. Mit Titanium benötigen Sie lediglich JavaScript-Kenntnisse.
Am Ende ist doch alles HTML - 2012 - Webmontag EditionJens Grochtdreis
Kurzvortrag über die Bedeutung des Frontends. Ich rege zu mehr und besserer Kommunikation an und gebe Beispiele für Verbesserungen durch moderne Techniken. Zuerst gehalten auf dem Webmontag in Marburg (30.07.2012)
Wir brauchen einen neuen Workflow. Die getrennte Arbeit von Designern und Frontendentwicklern geht an der Realität vorbei. Heute müssen sich Webseiten ihrer Umgebung noch stärker anpassen, als sie es grundsätzlich sollten. Das erzeugt technische und designerische Probleme. Beide sollten zusammen gelöst werden.
Die Inhalte meiner ersten "Session" des Praktikums über Frontendentwicklung an der Uni Mainz. Die Stundenten sollten erst einmal in die Grundproblematik eingeführt werden.
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CJens Grochtdreis
Auf dem W3C-Tag 2010 ergriff ich die Chance, das W3C zu schnellerem Handeln in Sachen Webstandards zu ermutigen. Die Entwicklungsgeschwindigkeit bspw. bei CSS3 ist einfach zu langsam.
Die Anforderungen für Websites sind heute oft widersprüchlich: verlangt ist ein zeitgemäßes Design und ansprechende Animationen, aber bitte mit offenen Webstandards, damit das ganze auch auf Smartphones und Tablets gut aussieht. Gleichzeitig ist auf Kundenseite aber ein Browser im Einsatz, der seit Jahren nicht mehr aktualisiert wurde. Jonathan Weiß stellt Lösungen vor, um diese Herausforderung zu stemmen und zeigt, welches kaum bekannte Potenzial im Legacy-Browser steckt.
Native Cross-Platform-Apps mit Titanium Mobile und AlloyMayflower GmbH
Dank der Webtechnologien stehen Ihnen viele Möglichkeiten bereit, auf dem mobilen Markt präsent zu sein. Da sind unter anderem W3C Widgets, mobile Webseiten, Webapplikationen und als native App verpackte Webapplikationen. Eine weitere Möglichkeit stellt das Titanium-Mobile-SDK dar. Das Besondere: Mit Titanium erstellte Apps sind nativ. Aus nur einer Codebasis können Sie eine native Anwendung für iOS, Android, BlackBerry und Tizen generieren, sowie eine Webapplikation. Nativ bedeutet, die Apps werden nicht nur sehr schnell ausgeführt, sondern es stehen Ihnen für eine optimale Usability auch native UI Widgets zur Verfügung. Interessant ist das SDK daher nicht nur für Webentwickler, sondern auch für Entwickler, die ihre Apps bisher aufwändig individuell nativ entwickelt haben. Mit Titanium benötigen Sie lediglich JavaScript-Kenntnisse.
Am 6. November durfte ich am Frankfurter SAE-Institut den Studenten etwas über die Praxis der Webentwicklung erzählen. Ich habe einen großen Bogen gespannt, von der grundsätzlichen Natur des Internet über Detailprobleme bis zur Barrierefreiheit. Der Vortrag dauerte dreieinhalb Stunden.
Wenn der größte Teil der Logik in JavaScript stattfindet, dann findet auch der größere Teil der Sicherheitsrisiken dort sein Zuhause. Und auch Angreifer finden mit JavaScript eine interessante neue Spielwiese, denn die Sprache selbst und auch Ihre Heimat in Browser und Node.js bringen neue Probleme.
Genau da setzt der Vortrag an: die verblüffenden Unterschiede von JavaScript zu anderen Sprachen, wenn es um Security geht. Die Risiken und auch die Besonderheiten von Browsern und anderen JavaScript-Engines wie Node.js. Die Security-Implikationen von JavaScript-Frameworks bis hin zu speziellen Problemen wie mXSS, ReDOS und HTML5-Security.
„Wieso, läuft doch!?“
Wie kann ich meine Kollegen davon überzeugen, dass das die falsche Antwort ist?
Vortrag auf dem ersten Webmontag Braunschweig am 31. Januar 2011
Testgetriebene Entwicklung mit JavaScript - JAX 2011Sebastian Sanitz
Testgetriebenes Design (TDD) liefert schnelles Feedback, erzeugt weniger Fehler im Code, fördert ein wartbares Design und führt zu einer guten Testabdeckung. Der Vortrag erklärt TDD und zeigt mit einer Code-Kata TDD für JavaScript. Abschließend werden werden verschiedene Testwerkzeuge für JavaScript verglichen.
Responsive Webdesign in a Nutshell - webinale 2015die.agilen GmbH
Das Buzzword „RWD“ ist nun mittlerweile flächendeckend angekommen. Aber was heißt das konkret? Reicht es, Inhalt hin und her zu schieben, wenn das Display sich verändert, oder ist die Welt des Responsive Webdesigns doch deutlich größer? Und wie setzt man RWD ganz konkret um – in großen und kleinen Projekten, auf Webseiten und auf E-Commerce-Applikationen, auf aktuellen und zukünftigen Devices. Der Vortrag zeigt die ganze Welt des RWD auf und gibt praktische Tipps und Tricks zur professionellen Umsetzung.
Am 6. November durfte ich am Frankfurter SAE-Institut den Studenten etwas über die Praxis der Webentwicklung erzählen. Ich habe einen großen Bogen gespannt, von der grundsätzlichen Natur des Internet über Detailprobleme bis zur Barrierefreiheit. Der Vortrag dauerte dreieinhalb Stunden.
Wenn der größte Teil der Logik in JavaScript stattfindet, dann findet auch der größere Teil der Sicherheitsrisiken dort sein Zuhause. Und auch Angreifer finden mit JavaScript eine interessante neue Spielwiese, denn die Sprache selbst und auch Ihre Heimat in Browser und Node.js bringen neue Probleme.
Genau da setzt der Vortrag an: die verblüffenden Unterschiede von JavaScript zu anderen Sprachen, wenn es um Security geht. Die Risiken und auch die Besonderheiten von Browsern und anderen JavaScript-Engines wie Node.js. Die Security-Implikationen von JavaScript-Frameworks bis hin zu speziellen Problemen wie mXSS, ReDOS und HTML5-Security.
„Wieso, läuft doch!?“
Wie kann ich meine Kollegen davon überzeugen, dass das die falsche Antwort ist?
Vortrag auf dem ersten Webmontag Braunschweig am 31. Januar 2011
Testgetriebene Entwicklung mit JavaScript - JAX 2011Sebastian Sanitz
Testgetriebenes Design (TDD) liefert schnelles Feedback, erzeugt weniger Fehler im Code, fördert ein wartbares Design und führt zu einer guten Testabdeckung. Der Vortrag erklärt TDD und zeigt mit einer Code-Kata TDD für JavaScript. Abschließend werden werden verschiedene Testwerkzeuge für JavaScript verglichen.
Responsive Webdesign in a Nutshell - webinale 2015die.agilen GmbH
Das Buzzword „RWD“ ist nun mittlerweile flächendeckend angekommen. Aber was heißt das konkret? Reicht es, Inhalt hin und her zu schieben, wenn das Display sich verändert, oder ist die Welt des Responsive Webdesigns doch deutlich größer? Und wie setzt man RWD ganz konkret um – in großen und kleinen Projekten, auf Webseiten und auf E-Commerce-Applikationen, auf aktuellen und zukünftigen Devices. Der Vortrag zeigt die ganze Welt des RWD auf und gibt praktische Tipps und Tricks zur professionellen Umsetzung.
Vortrag von Tomas Caspers und Jens Grochtdreis über gute und schlechte Details an Webseiten. Immer wieder gesehene Fehler kontrastiert mit gutem Code und guten Ideen von Entwicklern. Der Inhalt kann mangels Textfolien nur erahnt werden.
Tenniscamp in Spanien für Jugendliche: Wir bieten jungen Tennisspielern – 14 bis 17 Jahre alt – ein komplettes Tennis-Trainingscamp: Spanischkurs, intensives Tennistraining, Unterkunft und ein großes Angebot an kulturellen, sozialen und sportlichen Aktivitäten enthalten. Wir haben auch die notwendige Unterstützung, um aus dem Tenniscamp einen Erfolg zu machen.
Este documento advierte sobre los peligros de ahogamiento para los niños pequeños al caer en baldes que contienen incluso pequeñas cantidades de líquido, y recomienda mantener a los niños alejados de los baldes para ahorrar tiempo y dinero y evitar lesiones.
Un negativo es una película fotográfica que produce imágenes en tonos invertidos, con las luces oscuras y las sombras claras. Tras la exposición a la luz y el revelado, las zonas más iluminadas de la película se oscurecen más debido a la acción de los haluros de plata. De un negativo se obtiene un positivo proyectándolo sobre otro material fotosensible como el papel fotográfico, invirtiendo nuevamente la imagen a sus valores normales de luces y sombras.
El documento describe los objetivos y principios fundamentales de CSS, incluyendo definir un lenguaje estándar para diseñar interfaces para internet independientemente del dispositivo, nombrar atributos según su contenido en lugar de su diseño para mantener la semántica, y explicar las diferencias en cómo los navegadores calculan el ancho final de los elementos con bordes, paddings y márgenes.
La planeación y la evaluación en los procesos33300991
Este documento describe la importancia de la planificación y evaluación en los procesos productivos. Explica que la planificación implica tomar decisiones para orientar y evaluar los procesos técnicos con el fin de obtener mejores resultados. También describe cómo los modelos y simulaciones son formas útiles de evaluar y mejorar productos antes de su implementación.
Slideshare es un sitio web donde los usuarios pueden subir y compartir presentaciones, documentos y otros formatos de archivo. Crear una cuenta es un proceso sencillo que involucra registrarse con información personal, confirmar la cuenta de correo electrónico y luego iniciar sesión para editar el perfil de usuario.
La cultura Valdivia se desarrolló entre el 4000 y el 2000 a.C. en la península de Santa Elena, Ecuador. Era una sociedad tribal organizada alrededor de la agricultura, la caza y la recolección. Destacaron por ser uno de los primeros pueblos americanos en utilizar cerámica decorada de forma geométrica. Crearon figuras femeninas de barro que se cree representaban talismanes de fertilidad para la tierra.
Un sitio de investigación es una organización compleja con una cultura, estructura y estrategia singulares.
Dr. Jorge Velasco Zamora
www.jorgevelascozamora.com
Jugendcamps in Spanien: 2, 3, 4, 6 oder 8 Wochen Spanischkurs und Aktivitäten mit spanischen Jugendlichen im Sommer, im Juli und August, in Alicante. Junior Spanisch Kurse in Spanien für Jugendliche und junge Studenten im Alter von 14 bis 17 Jahren kombinieren Spanisch Kurse mit sportlichen Aktivitäten in verschiedenen Sommercamps, Exkursionen und Ausflügen.
El documento trata sobre la interacción persona-computador. Explica que estudia el intercambio de información entre personas y computadoras mediante software. Su objetivo es hacer más eficiente esta interacción minimizando errores y aumentando la satisfacción del usuario. También describe los componentes clave de un sistema de interacción persona-computador como el usuario, la computadora y el origen del proceso interactivo.
Este documento trata sobre el uso de colorantes en la industria alimentaria y las enfermedades que pueden causar. El autor investiga este tema como parte de su tesis sobre ingeniería en industrias alimentarias. Explica que los colorantes sintéticos usados comúnmente en alimentos procesados podrían ser nocivos para la salud si se consumen en grandes cantidades. Su hipótesis es que estos colorantes pueden causar problemas gastrointestinales, neurológicos y alergias.
La red es un conjunto de dispositivos interconectados que permite compartir recursos. Existen varias topologías de red como bus, anillo, estrella y árbol. Una red está compuesta por tarjetas de red, cableado y software de red. Las redes se clasifican por su alcance en PAN, LAN, MAN, WAN e Internet y por su relación funcional en punto a punto y basadas en servidores.
Este documento proporciona una tabla comparativa de las características técnicas de 30 modelos de envasadoras automáticas, incluyendo su capacidad de envase, tipo y número de cabezales, distancia entre centros y sistemas de control y hidráulico. Los modelos varían en el número de estaciones de trabajo (sencilla o doble), materiales de envase compatibles, y capacidad de envase desde 200ml hasta 10L.
Vortrag auf der Webtech 2012. Die Nomenklatur von YAML wird erklärt sowie die vielen Addons und die helfende Dokumentation genauer vorgestellt. Alles als Basis für das später folgende Livecoding. Damit konnte ich zeigen, dass man mit YAML schnell zu einem testbaren Ergebnis, einem Prototypen, kommen kann. Der kann dann die Basis weiterer Designiterationen sein und später in den produktiven Code übergehen.
HTML5 und CSS3 bieten neue native Funktionen und Gestaltungsoptionen für Webdesigner und Entwickler. Welche Technologien sich heute schon bedenkenlos einsetzen lassen und wie sich die Standards in der Zukunft weiterentwickeln werden, sind die Themen dieser Präsentation von Sven Brechner.
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsGregor Biswanger
HTML5 ist langsam, oder? Nein, in der Tat zeigt sich die grundlegende Geschwindigkeit von Cross-Plattform-HTML5-Anwendungen heutzutage in einem sehr positiven Licht. Es gibt aber doch ein paar Fallstricke, in denen sich der Entwickler schnell verfängt, wenn er nicht auf ein paar Punkte achtet. Der Vortrag geht zuerst auf die Vorgehensweise der Performancemessung ein. Anschließend werden die Top Performance-Tipps gezeigt, um nochmal einen ordentlichen Schub an Power herausholen zu können. Lassen Sie uns Gas geben!
Die für 2014 leicht aktualisierte Präsentation vom ersten Tag des diesjährigen HTML5 Seminars der tgm mit den Themen:
– Hidden Gems
– Semantik
– Formulare
– Audio & Video
– Application cache
Ein subjektiver Zwischenstand zu HTML5 ergänzt mit Statistiken und vielen weiterführenden Links. Die herausgepickten Aspekte sind: Geolocation, Video Support, Web Storage, Web Sockets, PushState, Web Forms, Drag and Drop, Semantik und Canvas.
Webseiten sind keine Gesamtkunstwerke, sondern Zusammenstellungen einzelner Module. Dieser Vortrag von der Jax 2013 ergründet, wie man vorgeht, um sinnvolle und pflegbare M;odule zu erschaffen. Dabei wird vor allem Wert auf das CSS gelegt. Das CSS wird dank Sass ebenso modular, wie das HTML.
Vortrag auf der Webtech 2012. Eine Webseite besteht aus vielen einzelnen Modulen, die alle als eigenes Universum betrachtet werden können. CSS-Präprozessoren helfen bei der effektiven Behandlung der Module. Prototyping im Browser und ein neuer Workflow werden dadurch einfacher.
Talk held on a Smashing Magazine Meetup February, 27th 2012 in Frankfurt (Germany) about current problems with developers, designers and clients in front-end development
Ausgehend vom Relaunch von Jaxenter.com zeige ich, wie man komplexe Sites aufbauen kann und welche Gedanken man sich über Überschriftenstrukturen machen sollte.
Vortrag an der Uni Mainz über die Grundlagen der Frontendentwicklung. Wie sollte man fürs Frontend denken? Woran muss man denken? Womit muss man sich beschäftigen?
Mein Vortrag von der Webinale 2009 (dort zusammen mit Tomas Caspers) zusammengestrichen und mit Textfolien ergänzt für Webmontage in Frankfurt und Mannheim.
2. Jens Grochtdreis
‣ Frontendentwickler
‣ 10 Jahre Agenturerfahrung
‣ 12 Jahre Arbeit im und fürs Web
‣ Gründer der Webkrauts
‣ Blogger
‣ Autor für: PHPMagazin, PHPUser, T3N,
Webstandards-Magazin
‣ Fachliche Buchbetreuung bei Galileo, O'Reilly, MuT
12. ‣ Texte formatieren
‣ Farben für Vorder- und Hintergründe
‣ Positionierungen
‣ Floats
‣ Bilder werden für viele Lösungen benötigt
‣ Manchmal wird Extra-Markup für Bilder-
Lösungen benötigt
‣ Transparenz mit Nebenwirkungen
18. Neue semantische Elemente
‣ Nehmen an vielen Stellen den Platz des DIV
ein.
‣ Orientieren sich an der gelebten Praxis im
Web.
‣ Keine besonderen Funktionen im Browser.
Einfach neue Elemente.
‣ WAI-ARIA inklusive!
19. Neue Semantik
‣ Feinstrukturierung des Inhalts
‣ Browser übernimmt Überschriftenhierarchie.
Auf komplexen Seiten ist das klasse!
Outline-Algorithmus
24. ‣ Jeder Inhalt innerhalb des <body>-Elements ist
Teil einer "section" (eines Abschnitts). Sections
können in HTML5 verschachtelt werden.
‣ Das <body>-Element ist die Haupt-Section.
Weitere Sections werden implizit (h1 - h6)
oder explizit definiert.
‣ Explizit definieren folgende Elemente eine
Section:
‣ <body>, <section>, <article>, <aside>,
<footer>, <header>, <nav>
25. Jede Section hat eine eigene
Überschriftenhierarchie
https://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document
26. Die Outline - Unsicherheit
Aus MDN-Artikel Online-Outliner-Tool
http://gsnedders.html5.org/outliner/process.py
29. ‣ HTML5-Seiten funktionieren in alten Browsern
nur mittels Javascript. Das betrifft im
Wesentlichen IE bis einschließlich Version 8.
http://code.google.com/p/html5shim/ http://www.modernizr.com/
38. Und wenn ein Browser die
neuen Elemente nicht kennt?
39. Dann werden die neuen Input-
Elemente zu
<input type=“text“>
und Attribute ignoriert
40. Eingebaute Validierung
Opera 11.5 Mac
Firefox 5 Mac
Chrome 15
dev Mac
Chrome kommt mit skalierten Seiten nicht zurecht!
41. Und wenn der Browser die
Validierung nicht kennt?
‣ Ignorieren ( = Progressive enhancement)
‣ JS-Alternativen bei Bedarf nachladen, bspw. mit
Modernizr (http://modernizr.com)
‣ Polyfills verwenden
‣ https://github.com/Modernizr/Modernizr/
wiki/HTML5-Cross-Browser-Polyfills
45. Transparenz
mit rgba() runde Ecken
Verläufe (gradient)
Transitions
media-queries
calc() mehrere Spalten
46. Die Vorteile
‣ Weniger Schmuckbilder werden benötigt.
‣ Weniger Javascript wird benötigt.
‣ Animationen und Transitionen sind mittels CSS
schneller, als mittels Javascript.
‣ Es wird seltener Code nur für Optik benötigt,
der Quellcode schmaler und lesbarer.
51. ‣ Können ältere IE (bis einschließlich Version 8)
nicht.
‣ Ihnen kann mittels Javascript geholfen werden.
‣ Wenn es sich um keine „lebensnotwendigen“
Operationen handelt, ist eine Nachhilfe via
Javascript okay.
75. Progressive Enhancement
‣ Fokus ist auf den Content, denn um den geht
es am Ende (fast) immer
http://www.alistapart.com/articles/understandingprogressiveenhancement/
76. Graceful Degredation
‣ Fokus ist auf den modernsten Browsern
‣ ältere Browser bekommen eine abgespeckte
Version
http://stuffandnonsense.co.uk/
77. Brutal Degredation
bis einschließlich IE8 moderne Browser
http://www.fillerati.com/
81. ‣ Microsoft hat im Wesentlichen erst ab dem IE9
beschlossen, an der technischen
Weiterentwicklung des Internets zu
partizipieren.
‣ Für viele Techniken ist es also egal, ob wir vom
IE6 oder IE8 reden.
‣ Manches kann man mit Javascript simulieren.
‣ Manches kann man ansatzweise mit IE-Filtern
realisieren.
‣ Ansonsten:
graceful degredation / progressive enhancement
99. Jens Grochtdreis
http://grochtdreis.de
http://twitter.com/Flocke
http://webkrauts.de
http://slideshare.net/Flocke669
Diese Präsentation steht unter
der Creative Commons Lizenz
„Attribution-ShareAlike 2.0“
http://creativecommons.org/licenses/by-sa/2.0/de/