Prototipazione Rapida con Sass, Compass e Middleman

Slide 1

Slide 1 text

Sass, Compass e Middleman PROTOTIPAZIONE RAPIDA CON @bermonpainter #codemotion

Slide 2

Slide 2 text

HTML, CSS e JavaScript MEDIO DI WEB @bermonpainter #codemotion

Slide 3

Slide 3 text

1. Migliorare i processi 2. Collaborazione tra le varie discipline @bermonpainter #codemotion

Slide 4

Slide 4 text

Raggiungere attraverso il web appena possibile. SCOPO @bermonpainter #codemotion

Slide 5

Slide 5 text

Processo Tipico @bermonpainter #codemotion

Slide 6

Slide 6 text

Investigar @bermonpainter #codemotion

Slide 7

Slide 7 text

@bermonpainter #codemotion

Slide 8

Slide 8 text

Attività Regole @bermonpainter #codemotion

Slide 9

Slide 9 text

@bermonpainter #codemotion

Slide 10

Slide 10 text

Schizzo @bermonpainter #codemotion

Slide 11

Slide 11 text

@bermonpainter #codemotion

Slide 12

Slide 12 text

@bermonpainter #codemotion

Slide 13

Slide 13 text

@bermonpainter #codemotion

Slide 14

Slide 14 text

Prototipi @bermonpainter #codemotion

Slide 15

Slide 15 text

@bermonpainter #codemotion

Slide 16

Slide 16 text

Speciﬁche di Contenuto @bermonpainter #codemotion

Slide 17

Slide 17 text

@bermonpainter #codemotion

Slide 18

Slide 18 text

Mockup di Photoshop @bermonpainter #codemotion

Slide 19

Slide 19 text

@bermonpainter #codemotion

Slide 20

Slide 20 text

Documentazione eccessiva in un modo statico @bermonpainter #codemotion

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

@bermonpainter #codemotion Come in HTML, CSS e JavaScript al più presto. SCOPO

Slide 23

Slide 23 text

Processo Veloce @bermonpainter #codemotion

Slide 24

Slide 24 text

@bermonpainter #codemotion 1. Osservare e analizzare 2. Costruire (diseño/desarollo) 3. Lanciare (Ship It) 4. Informare ed Educare 5. Scorrere e Manutenzione

Slide 25

Slide 25 text

@bermonpainter #codemotion 1. Osservare e analizzare 2. Costruire (diseño/desarollo) 3. Lanciare (Ship It) 4. Informare ed Educare 5. Scorrere e Manutenzione 2. Costruire (diseño/desarollo)

Slide 26

Slide 26 text

Costruire (design/development) 1. Schizzo (wireframe) @bermonpainter #codemotion

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

1. Schizzo (wireframe) 2. Prototipazione Rapida 3. Style Tile 4. Criticare / Critica e Test 5. Ripetere Costruire (design/development) @bermonpainter #codemotion 2. Prototipazione Rapida

Slide 30

Slide 30 text

Prototipo Rápido 1. Pairing 2. Components 3. Scaffolding 4. Theming @bermonpainter #codemotion

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Construir (diseño/desarollo) @bermonpainter #codemotion 1. Schizzo (wireframe) 2. Prototipazione Rapida 3. Style Tile 4. Criticare / Critica e Test 5. Ripetere 3. Style Tile

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Construir (diseño/desarollo) @bermonpainter #codemotion 1. Schizzo (wireframe) 2. Prototipazione Rapida 3. Style Tile 4. Criticare / Critica e Test 5. Ripetere 4. Criticare / Critica e Test

Slide 39

Slide 39 text

Construir (diseño/desarollo) @bermonpainter #codemotion 1. Schizzo (wireframe) 2. Prototipazione Rapida 3. Style Tile 4. Criticare / Critica e Test 5. Ripetere 5. Ripetere

Slide 40

Slide 40 text

Construir (diseño/desarollo) @bermonpainter #codemotion 1. Schizzo (wireframe) 2. Prototipazione Rapida 3. Style Tile 4. Criticare / Critica e Test 5. Ripetere 2. Prototipazione Rapida

Slide 41

Slide 41 text

Prototipazione Rapida @bermonpainter #codemotion

Slide 42

Slide 42 text

Strumenti @bermonpainter #codemotion

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

AG1 AG1 2 of 10 2 of 10 AG4 AG4 3 of 6 3 of 6 AG5 AG5 3 of 6 (omega) 3 of 6 (omega) AG6 AG6 2 of 6 2 of 6 AG7 AG7 4 of 6 (omega) 4 of 6 (omega) AG2 AG2 6 of 10 6 of 10 AG3 AG3 2 of 10 (omega) 2 of 10 (omega) GEM INSTALL SUSY GEM INSTALL SUSY Your markup. Your design. Our math. Your markup. Your design. Our math. The web is a responsive place, The web is a responsive place, from your lithe from your lithe & & lively lively development process development process to your end-user's super-tablet- to your end-user's super-tablet- multi-magic-lap-phone. multi-magic-lap-phone. You need grids that are You need grids that are powerful yet custom, powerful yet custom, reliable yet responsive. reliable yet responsive. Recent News: Recent News: v1.0.6: v1.0.6: Added bleed and isolation mixins. Added bleed and isolation mixins. Happy Cog Article: Happy Cog Article: "It’s Alive: Prototyping in the Browser" "It’s Alive: Prototyping in the Browser" Tutorial: Tutorial: "Off-Canvas Layout with Susy" "Off-Canvas Layout with Susy" v1.0.5: v1.0.5: Added support for rem units. Added support for rem units. Nettuts+ Tutorial: Nettuts+ Tutorial: "Responsive Grids With Susy" "Responsive Grids With Susy" S S Getting Started Getting Started Reference Reference Demos Demos Sites Sites Source Source Support Support Twitter Twitter 10-column 10-column complex nested grid AG test complex nested grid AG test ‹ ‹ › › Responsive grids for Responsive grids for Compass Compass. .

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

Altre Opzioni @bermonpainter #codemotion

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

Sistemi Modulari @bermonpainter #codemotion

Slide 60

Slide 60 text

Componenti @bermonpainter #codemotion

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

Estensioni di Compass @bermonpainter #codemotion HTML + SCSS + JavaScript = GEM

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

What is it? SMACSS (pronounced “smacks”) is more style guide than rigid framework. There is no library within here for you to download or install. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS. And really, who isn’t building a site with CSS these days?! Get to know Scalable and Modular Architecture for CSS: What's in SMACSS? Preface 1. About the Author 2. Introduction Core 3. Categorizing CSS Rules 4. Base Rules 5. Layout Rules 6. Module Rules Register for Workshop Get Smacked! Sign in Scalable and Modular Architecture for CSS A flexible guide to developing sites small and large. “SMACSS is becoming one of the most useful contributions to front-end discussions in years” * I’ve been analyzing my process (and the process of those around me) and figuring out how best to structure code for projects on a larger scale. What I've found is a process that works equally well for sites small and large. Learn how to structure your CSS to allow for flexibility and main- tainability as your project and your team grows. Get smacked!

Slide 83

Slide 83 text

Struttura Utile @bermonpainter #codemotion

Slide 84

Slide 84 text

Foundation Features Add-ons Case Studies Docs Getting Started Foundation The most advanced responsive front-end framework in the world. Download Foundation 4 10.2k stargazers @foundationzurb Latest Update on Github MAR 21, 2013 Commit bc782843660c38a61b578dfe2c3abf43e3319617 » Clone Now

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

Hammer Hammer Hammer is a web development tool for web designers & developers. Hammer is a web development tool for web designers & developers. Hammer is a web development tool for web designers & developers. Hammer is a web development tool for web designers & developers. Build out static HTML sites quickly and easily. No fuss, no mess, no PHP. Build out static HTML sites quickly and easily. No fuss, no mess, no PHP. Build out static HTML sites quickly and easily. No fuss, no mess, no PHP. Build out static HTML sites quickly and easily. No fuss, no mess, no PHP.   Edit the project files in Edit the project files in your favourite editor your favourite editor Let Hammer compile your Let Hammer compile your code & create your build code & create your build

Slide 87

Slide 87 text

Star Star 47,105 47,105 Fork Fork 13,720 13,720 Follow Follow @twbootstrap @twbootstrap 55.3K followers Tweet Tweet 18.1K Introducing Bootstrap. Bootstrap Bootstrap Sleek, intuitive, and powerful front-end framework for Sleek, intuitive, and powerful front-end framework for faster and easier web development. faster and easier web development. Download Bootstrap Download Bootstrap GitHub project GitHub project GitHub project Examples Examples Examples Extend Extend Extend Version 2.3.1 Version 2.3.1 Version 2.3.1 Bootstrap Bootstrap Bootstrap Home Home Get started Get started Scaffolding Scaffolding Base CSS Base CSS Components Components JavaScript JavaScript Customize Customize

Slide 88

Slide 88 text

1. Migliorare i processi 2. Collaborazione tra le varie discipline @bermonpainter #codemotion

Slide 89

Slide 89 text

SCOPO Raggiungere attraverso il web appena possibile. @bermonpainter #codemotion

Slide 90

Slide 90 text

DOMANDE @bermonpainter #codemotion