Repository navigation
Expand file tree
/
Copy pathlibreria-componentes.html
More file actions
134 lines (133 loc) · 6.5 KB
/
Copy pathlibreria-componentes.html
File metadata and controls
134 lines (133 loc) · 6.5 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Libreria de componentes</title>
<meta name="description" content="Definición de Sistema de diseño">
<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">Librería de componentes</h1>
</header>
<section class="section">
<div class="container">
<article class="article">
<div class="row">
<div class="col-12 col-sm-3">
<h1 class="article-title">Una librería de componentes funciona como un <strong>repositorio de todos los elementos diseñados, </strong>y muestra una vista global del sistema.<br><br>Resulta imprescindible para <strong>compartir </strong>el trabajo realizado y <strong>modular futuros componentes.</strong></h1>
</div>
<div class="col-12 col-sm-9">
<figure><img src="public/images/bettle.jpg" class="img-responsive">
<figcaption>Componentes de un Wolskwagen Escarabajo. </figcaption>
</figure>
</div>
</div>
</article>
</div>
</section>
<section class="section">
<div class="container">
<article class="article">
<div class="row">
<div class="col-12">
<figure><img src="public/images/componentes.jpg" class="img-responsive">
<figcaption>Payroll User Interface Kit.</figcaption>
</figure>
</div>
</div>
<div class="row">
<div class="col-12">
<figure><img src="public/images/components-2.jpg" class="img-responsive">
<figcaption>Airbnb - Componentes y navegación.</figcaption>
</figure>
</div>
</div>
<article class="article">
<div class="row">
<div class="col-12 col-sm-4">
<h1 class="article-title"><strong>Comparte y documenta el sistema</strong>, incluso define los estilos CSS, para que tu equipo este sincronizado y que todos puedan aportar al sistema.</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/componentes-5.jpg" class="img-responsive">
<figcaption>Bootstrap - Framework de diseño basado en la codificación de sus elementos.</figcaption>
</figure>
</div>
<div class="item">
<figure><img src="public/images/componentes-4.jpg" class="img-responsive">
<figcaption>U.S. Web design Standars - Extenso sistema documentado para webs del gobierno de EEUU.</figcaption>
</figure>
</div>
<div class="item">
<figure><img src="public/images/componentes-3.jpg" class="img-responsive">
<figcaption>IBM Carbon Design System - Definición y uso de componentes.</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</article>
</article>
</div>
</section>
<footer class="page-footer">
<ul class="footer-nav">
<li class="prev"><a href="principios.html"><-- Principios y valores</a></li>
<li class="next"><a href="codificacion.html">Codificación --></a></li>
</ul>
</footer>
</main>
</div>
</body>
</head>
</html>