-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathframeworks.html
More file actions
173 lines (170 loc) · 9.12 KB
/
frameworks.html
File metadata and controls
173 lines (170 loc) · 9.12 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Header</title>
<meta name="description" content="hghghgh">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<link rel="stylesheet" href="public/css/style.css">
<link rel="stylesheet" href="public/css/owl.carousel.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="public/js/owl.carousel.min.js"></script>
<script src="public/js/main-min.js"></script>
<body class="page">
<div class="container-fluid">
<button id="menu"><span class="bar1"></span><span class="bar2"></span><span class="bar3"></span></button>
<nav class="menu-sidebar hide-sidebar">
<div class="page-title"><a href="index.html">Diseño de<br>sistemas web</a></div>
<hr>
<ul>
<li> <a href="sistemas.html">Sistemas</a>
<ul>
<li><a href="definicion.html">¿Que es un Sistema? </a></li>
<li><a href="unidad-minima.html">Unidad mínima</a></li>
<li><a href="principios.html">Principios y valores</a></li>
<li><a href="libreria-componentes.html">Libreria de componentes</a></li>
</ul>
</li>
<li><a href="codificacion.html">Codificación</a>
<ul>
<li><a href="codigo.html">¿Que es codificar?</a></li>
<li><a href="frameworks.html">Frameworks</a></li>
<li><a href="modulacion.html">Modulación</a></li>
<li><a href="mobilefirst.html">Mobile first</a></li>
</ul>
</li>
<li><a href="diseno-grafico.html">Diseño gráfico</a>
<ul>
<li><a href="tipografia.html">
Tipografía</a></li>
<li><a href="grid.html">Cuadrícula y rejilla base</a></li>
<li><a href="colores.html">Colores</a></li>
</ul>
</li>
</ul>
<hr>
<ul class="footer">
<li><a href="proyecto.html"><strong>Este proyecto</strong></a></li>
<li><a href="modulos.html">Sistema utilizado</a></li>
<li><a href="glosario.html">Glosario</a></li>
<li><a href="buenas-practicas.html">Buenas prácticas</a></li>
<li><a href="referencias.html">Referencias</a></li>
</ul>
</nav>
<main id="main">
<header class="page-header">
<h1 class="page-title">Frameworks de codificación</h1>
</header>
<section class="section">
<div class="container">
<article class="article">
<div class="row">
<div class="col-12 col-sm-4">
<h1 class="article-title">
El término <strong>"framework" </strong>se traduce como<strong>
"marco o entorno de trabajo".</strong><br><br>En el ámbito de la codificación se refiere a un <strong>conjunto de reglas y estructuras predefinidas que ayudan a prototipar y codificar más rápido.</strong><br><br>Comparte muchas similitudes con un <strong>sistema de diseño</strong>, pero está más orientado al proceso de codificación.<br><br>Permite al frontend developer <strong>reaprobechar piezas de código </strong>y son sistemas que acostumbran a tener un enfoque muy basado en la práctica.
</h1>
</div>
<div class="col-12 col-sm-8">
<div class="slider">
<div class="owl-slider owl-carousel">
<div class="item">
<figure><img src="public/images/bootstrap.png" class="img-responsive">
<figcaption><strong>Bootstrap</strong>, creado por el equipo de desarrollo de Twitter es uno de los frameworks más populares.</figcaption>
</figure>
</div>
<div class="item">
<figure><img src="public/images/foundation.png" class="img-responsive">
<figcaption><strong>Foundation</strong>dispone de muchos plugins que permiten ampliar el framework.</figcaption>
</figure>
</div>
<div class="item">
<figure><img src="public/images/atom-pattern-lab.png" class="img-responsive">
<figcaption>Pattern Lab de Atomic Design.</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</section>
<section class="section">
<div class="container">
<article class="article">
<div class="row">
<div class="col-12 col-sm-4"><br>
<h2 class="subtitle"><strong>A favor</strong></h2>
<ul class="list dot-list">
<li>Delimita el marco de juego y ayuda a concretar.</li>
<li>Acelera el desarrollo y prototipado de prodcutos.</li>
<li>Lenguaje común unificado y reutilizable.</li>
<li>Modulación filosofía DRY (Don't Repeat Yourself).</li>
<li>Fácil de mantener y escalar.</li>
</ul>
</div>
<div class="col-12 col-sm-4"><br>
<h2 class="subtitle"><strong>En contra</strong></h2>
<ul class="list dot-list">
<li>Es limitante.</li>
<li>Iguala funcionalmente los productos digitales.</li>
<li>Todos los diseños se parecen.</li>
<li>El mal hábito del template y el theme predefinido apartan al diseñador del proceso.</li>
<li>Genera productos con más peso en kb.</li>
</ul>
</div>
<div class="col-12 col-sm-4">
<figure><img src="public/images/bulma.png" class="img-responsive">
<figcaption>Bulma CSS framework</figcaption>
</figure>
</div>
</div>
</article>
</div>
</section>
<section class="section">
<div class="container">
<hr class="dotted">
<article class="article">
<div class="row">
<div class="col-12 col-sm-4"><br>
<h1 class="article-title"><strong>Preprocesadores de código</strong></h1>
<p>Software que procesa el código para que el resultante sea una hoja de estilos unificada.<br>En el caso de los CSS, se acostumbra a trabajar con <a href="http://lesscss.org/" target="_blank">LESS </a>o <a href="https://sass-lang.com/guide" target="_blank">SCSS</a><br>
<ul class="list dot-list">
<li>Permite la herencia de estilos.</li>
<li>Ayuda a modularizar mejor las hojas de estilos.</li>
<li>Permite el uso de variables.</li>
<li>Permite realizar operaciones numéricas.</li>
<li>Permite el uso de funciones y bucles.</li>
<li>Detectar los errores de código.</li>
</ul>
</p>
</div>
<div class="col-12 col-sm-2">
<figure><img src="public/images/less-sass.png" class="img-responsive">
<figcaption class="text-left">Sass, con la extension .scss vs Less. Precompiladores creados con javascript más populares.</figcaption>
</figure>
</div>
<div class="col-12 col-sm-3">
<iframe width="100%" height="420" src="https://jsfiddle.net/PaladiniDigitalProjects/9ncrLey6/1/embedded/css/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0" class="iframe"></iframe>
</div>
<div class="col-12 col-sm-3">
<iframe width="100%" height="420" src="https://jsfiddle.net/PaladiniDigitalProjects/uay4dge0/embedded/css/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0" class="iframe"></iframe>
</div>
</div>
</article>
</div>
</section>
<footer class="page-footer">
<ul class="footer-nav">
<li class="prev"><a href="codigo.html"><-- ¿Qué es codificar?</a></li>
<li class="next"><a href="modulacion.html">Modulación --> </a></li>
</ul>
</footer>
</main>
</div>
</body>
</head>
</html>