-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgallery.html
353 lines (352 loc) · 15.3 KB
/
gallery.html
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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Fundamentos HTML5</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="assets/icon/cr.png">
<link rel="stylesheet" href="styles/default.css">
</head>
<body>
<!--Cabecera-->
<header id="header">
<div class="header">
<h1>Cristian Racedo</h1>
<p class="sub">
<strong>Presenta:</strong> Fundamentos HTML
</p>
</div>
<!--Barra de Navegacion-->
<nav>
<ul class="menu">
<li><a href="index.html">Inicio</a></li>
<li><a href="about.html">Acerca</a></li>
<li class="active"><a href="#">Galeria</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</nav>
</header>
<!--Contenido Principal-->
<main>
<!--Tabla de Contenidos-->
<dl class="index">
<dt>Tabla de Contenidos</dt>
<dd><strong>‣ <a href="#imagenes">Formatos de Imagen</a></strong></dd>
<dd><a href="#imagenes">Pixeles: Mapa de Bits</a></dd>
<dd><a href="#imagenes">Vectores: Graficos Escalables</a></dd>
<dd><a href="#imagenes">Colores: Sintesis Aditiva</a></dd>
<dd><strong>‣ <a href="#multimedia">Contenido Multimedia</a></strong></dd>
<dd><a href="#multimedia">Audio: API de reproduccion</a></dd>
<dd><a href="#multimedia">Video: Compatibilidad Integrada</a></dd>
</dl>
<article id="imagenes">
<header>
<a href="#">
<img class="index-back" src="assets/icon/back.png" alt="volver">
</a>
<h2>Formato de Imagen</h2>
</header>
<section>
<header class="header">
<h3>Pixeles:</h3>
<p class="sub">
Mapa de Bits
<br>
<em>(JPG - PNG - GIF)</em>
</p>
</header>
<p>
Una <strong>imagen ráster</strong> es una <em>estructura de datos que representa una rejilla rectangular de puntos de color</em>, denominada matriz, que se puede visualizar en un monitor, papel u otro dispositivo de representación. Se las suele definir por su altura y grosor en píxeles y por su profundidad de color en bits por píxel, que determina el número de colores distintos que se pueden almacenar en cada punto individual.
Para su obtención se usan dispositivos de <strong>conversión analógica-digital</strong>, tales como escáneres y cámaras digitales.
</p>
<div class="article">
<h4>¿Que es JPG?</h4>
<p>
<strong>Joint Photographic Expert Group </strong>
es el formato de imagen más común, pensado para la compresión de imágenes digitales y fotográficas. No pesan demasiado y es compatible con la mayoría de programas y plataformas. Soporta <em>CMYK y RGB, escalas de grises</em> y es capaz de guardar más de 16 millones de colores diferentes.
</p>
<img class="example" src="assets/img/high-sierra.jpg" alt="Imagen Formato JPG">
</div>
<div class="article">
<h4>¿Que es PNG?</h4>
<p>
<strong>Portable Network Graphics </strong>
es un formato de compresion sin perdidas que, a diferencia de JPG, soporta transparencias. Es ideal para imágenes sin fondo que contengan texto y logotipos, permitiendo mantener una calidad muy alta. No admite <em>CMYK</em> por lo que no es útil para impresión digital.
</p>
<img class="example" src="assets/img/smoke.png" alt="Imagen Formato PNG">
</div>
<div class="article">
<h4>¿Que es GIF?</h4>
<p>
<strong>Graphics Interchange Format </strong>
es un formato cuya característica principal es soportar animaciones, transparencias y paletas de 256 colores, no distorsiona la imagen pero difumina un poco los colores. Consiste en el movimiento de uno o varios fotogramas alrededor de unos segundos y que se repite de manera infinita.
</p>
<img class="example" src="assets/img/love.gif" alt="Imagen Formato GIF">
</div>
</section>
<hr>
<section>
<header class="header">
<h3>Vectores:</h3>
<p class="sub">
Graficos Escalables
<br>
<em>(SVG - SWF - VML)</em>
</p>
</header>
<p>
Es una <strong>imagen digital</strong> <em>formada por objetos geométricos dependientes</em> definidos por atributos matemáticos de forma, de posición, etc. El interés principal de los mismos es poder ampliar el tamaño de una imagen a voluntad <em>sin sufrir pérdida de calidad</em>.
De la misma forma, permiten mover, estirar y retorcer imágenes de manera relativamente sencilla. Su uso también está muy extendido en la generación de imágenes en tres dimensiones tanto dinámicas como estáticas.
</p>
<div class="article">
<h4>¿Que es SVG?</h4>
<p>
<strong>Scalable Vector Graphics </strong>es un lenguaje de marcado XML para describir gráficos de dos dimensiones. Básicamente, es a los gráficos lo que HTML es al texto. SVG es un estándar Web abierto basado en texto. SVG trabaja con HTML, CSS and JavaScript
</p>
<img class="example" src="assets/img/small_town.svg" alt="SVG">
</div>
<div class="article">
<h4>¿Que es SWF?</h4>
<p>
<strong>Small Web Format </strong> son archivos constituidos por objetos basados en vectores e imágenes. Adobe Animate utiliza la extensión <em>".fla"</em> para que el usuario trabaje y después compile y comprima en SWF. Los navegadores ya no soportan este formato.
</p>
<embed class="example" src="assets/img/snow.swf" alt="SWF">
</div>
<div class="article">
<h4>¿Que es VML?</h4>
<p>
<strong>Vector Markup Language </strong> es un lenguaje que se puede integrar en el código HTML a través del elemento <em>v:vmlframe</em> relacionado con algunos ficheros XML. Dicho elemento permite establecer los gráficos vectoriales de manera análoga a los imágenes bitmap.
</p>
<embed class="example" src="assets/img/waves.xml">
</div>
</section>
<hr>
<section>
<header class="header">
<h3>Colores</h3>
<p class="sub">
Sintesis Aditiva
<br>
<em>(RGB - HSL - ALPHA)</em>
</p>
</header>
<p>
Los <strong>colores web</strong> son aquellos que aparecen en una página web y pueden basarse sobre los <em>sistemas de color RGB o HSL</em>. En el código CSS son especificados como valores numéricos, aunque hay colores que también pueden utilizarse por sus nombres en inglés.
Las pantallas se dividen en puntos <em>minúsculos llamados píxeles</em> formados por <strong>tres subpíxeles de colores primarios de luz</strong>, cada uno de los cuales brilla con una determinada intensidad.
</p>
<div class="article">
<h4>¿Que son los colores RGB?</h4>
<p>
<strong>Proceso de reproducción aditiva</strong> que utiliza <em>luz roja, verde y azul</em> como componentes para producir el resto de colores, puede expresarse tanto en formato DEC y HEX.
</p>
<div class="header">
#112244;
</div>
</div>
<div class="article">
<h4>¿Que son los colores HSL?</h4>
<p>
<strong>Hue, Saturation and Lightness</strong> es el sistema en el que los colores se miden por tres parámetros que son <em>tono, saturacion y brillo</em> que determinan la posición del color en el cilindro de colores.
</p>
<div class="header">
hsl(220, 60%, 20%);
</div>
</div>
<div class="article">
<h4>¿Que es el canal ALPHA?</h4>
<p>
<strong>El parametro Alpha</strong> determina la opacidad con la que puede mostrarse <em> un color en pantalla usando valores entre 0 y 1.</em> Si se añade a RGB y HSL los convierte en <em>RGBa y HSLa</em>.
</p>
<div class="header">
rgba(17, 34, 68, .9);
</div>
</div>
</section>
</article>
<article id="multimedia">
<header>
<a href="#">
<img class="index-back" src="assets/icon/back.png" alt="volver">
</a>
<h2>Contenido Multimedia</h2>
</header>
<section>
<header class="header">
<h3>Audio</h3>
<p class="sub">
API de Reproduccion
<br>
<em>(OGG - WAV - MP3)</em>
</p>
</header>
<p>
El elemento audio incrusta este tipo de recursos en un documento. Aunque es muy fácil de utilizar, este elemento puede ser muy adaptable, poderoso y compatible con la mayoría de los navegadores.
Cualquier forma permite llenar el elemento con contenido alternativo, de modo que los navegadores que no lo soporten tengan algo que mostrar. Esto resulta muy útil para autores que necesiten desarrollen sitios compatibles con navegadores antiguos, ya que pueden proveer alternativas en reproductores de audio Flash o un mensaje que informe al usuario acerca del problema de soporte y posibles formas de resolverlo. Si el navegador soporta al elemento audio, el contenido alternativo será simplemente desestimado.
</p>
<div class="article">
<h4>¿Que es OGG?</h4>
<p>
<strong>Operation Good Guys</strong>,
formato contenedor libre y abierto, desarrollado por la Fundación
<em> Xiph.Org </em>. No está restringido por patentes de software y está diseñado para proporcionar una difusión de flujo eficiente y manipulación de multimedios digitales de alta calidad.
</p>
<audio class="example" src="assets/media/californication.ogv" controls>
</audio>
</div>
<div class="article">
<h4>¿Que es WAV?</h4>
<p>
<strong>Waveform Audio File Format </strong>
es un formato de audio digital con o sin compresión de datos desarrollado por <em> Microsoft e IBM </em> que se utiliza para almacenar flujos digitales de audio en el PC, mono y estéreo a diversas resoluciones y velocidades de muestreo.
</p>
<audio class="example" src="assets/media/cant-stop.webm" controls>
Lo sentimos, pero su navegador no es compatible con el Elemento Video.
</audio>
</div>
<div class="article">
<h4>¿Que es MP3?</h4>
<p>
<strong>Moving Picture Experts Group Audio Layer 3 </strong>
es un formato de compresión de audio que usa un algoritmo con pérdida para conseguir un menor tamaño de archivo. Es utilizado para música tanto en Computadoras como en reproductores portátiles.
</p>
<audio class="example" src="assets/media/by-the-way.mp4" controls>
Lo sentimos, pero su navegador no es compatible con el Elemento Video.
</audio>
</div>
</section>
<hr>
<section>
<header class="header">
<h3>Video</h3>
<p class="sub">
Compatibilidad Integrada
<br>
<em>(OGV - AVI - MP4)</em>
</p>
</header>
<p>
Es el servicio que provee a los usuarios de Internet un sistema para poder almacenar información, imágenes, vídeo, o cualquier contenido accesible vía web. Es una analogía de <em> "hospedaje o alojamiento en hoteles o habitaciones" </em> donde uno ocupa un lugar específico, en este caso la analogía alojamiento web o alojamiento de páginas web, se refiere al lugar que ocupa una página web, sitio web, sistema, correo electrónico, archivos, en Internet o más específicamente en un servidor, que por lo general hospeda varias aplicaciones o páginas web.
</p>
<div class="article">
<h4>¿Que es OGV?</h4>
<p>
<strong>Ogg Video </strong>
es un archivo de video que utiliza el formato de código abierto Ogg de xiph.org. Este contiene datos de video que pueden usar diferentes codecs.
</p>
<video class="example" src="assets/media/californication.ogv" controls>
Lo sentimos, pero su navegador no es compatible con el Elemento Video.
</video>
</div>
<div class="article">
<h4>¿Que es WebM?</h4>
<p>
Formato multimedia desarrollado por <em> Google </em> orientado para uso con <em> HTML5</em>. Es un proyecto de software libre, bajo una licencia permisiva similar a la licencia BSD.
</p>
<video class="example" src="assets/media/cant-stop.webm" controls>
Lo sentimos, pero su navegador no es compatible con el Elemento Video.
</video>
</div>
<div class="article">
<h4>¿Que es MP4?</h4>
<p>
<strong>Moving Picture Expert Group 4 </strong>
es un códec creado para web, codifica datos audio vídeo optimizando su calidad de almacenamiento, codificación y distribución en redes.
</p>
<video class="example" src="assets/media/by-the-way.mp4" controls>
Lo sentimos, pero su navegador no es compatible con el Elemento Video.
</video>
</div>
</section>
</article>
<a class="link" href="#">
<img class="index-back" src="assets/icon/upload.png" alt="volver">
</a>
</main>
<!--Pie de Pagina-->
<footer id="footer">
<!--Formulario de Contacto-->
<form id="contact" action="scripts/contact.php" method="post">
<h2 class="sub">Información de Contacto</h2>
<label for="nombre">Nombre</label>
<input
id="nombre"
name="nombre"
type="text"
placeholder="Nombre: Cristian Racedo"
pattern="[a-z A-Z]{2,50}"
title="Ingrese su nombre completo sin numeros, ni simbolos"
required>
<label for="correo">Correo</label>
<input
id="correo"
name="correo"
type="email"
placeholder="Correo: [email protected]"
title="Ingrese su correo respetando el formato usuario@servidor"
multiple required>
<label for="tipo">Tipo</label>
<select
id="tipo"
name="tipo"
title="Seleccione un tema para realizar la consulta">
<optgroup label="Practical Web Development">
<option hidden selected>Practical Web Development</option>
<option value="fewd">FrontEnd Web Development</option>
<option value="bewd">BackEnd Web Development</option>
<option value="fswd">FullStack Web Development</option>
</optgroup>
</select>
<label for="consulta">Consulta</label>
<textarea
id="consulta"
name="consulta"
minlength="10"
maxlength="200"
placeholder="Consulta: Realiza tu Consulta"
title="Escriba una consulta sobre el tema seleccionado"
required></textarea>
<button>Enviar</button>
</form>
<!--Redes Sociales-->
<div class="social-media">
<a href="https://www.facebook.com/RacedoCristian"
target="_blank">
<img src="assets/icon/facebook.svg" alt="Facebook">
</a>
<a href="https://twitter.com/Racedo_Cristian"
target="_blank">
<img src="assets/icon/twitter.svg" alt="Twitter">
</a>
<a href="https://www.instagram.com/racedo.cristiandamian/"
target="_blank">
<img src="assets/icon/instagram.svg" alt="Instagram">
</a>
<a href="https://www.linkedin.com/in/racedocristian/"
target="_blank">
<img src="assets/icon/linkedin.svg" alt="LinkdeIn">
</a>
<a href="https://www.youtube.com/user/CR15T14ND4M14N/"
target="_blank">
<img src="assets/icon/youtube.svg" alt="YouTube">
</a>
<a href="https://api.whatsapp.com/send?phone=1156591548&text=%22Buenos%20dias,%20necesito%20un%20presupuesto%22"
target="_blank">
<img src="assets/icon/whatsapp.svg" alt="Whatsapp">
</a>
<a href="https://github.com/c215714n/fundamentos-web"
target="_blank">
<img src="assets/icon/github.svg" alt="GitHub">
</a>
</div>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d991.9925584527174!2d-58.37620362245415!3d-34.60243211740226!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bccacc473596c3%3A0x568d6d5f7f1f535d!2sEducaci%C3%B3n%20IT!5e0!3m2!1ses!2sar!4v1596181391934!5m2!1ses!2sar"
aria-hidden="false">
</iframe>
<p>
© Todos los derechos Reservados |
<a href="mailto:[email protected]"> Cristian Racedo </a>
& Compañia
</p>
</footer>
</body>
</html>