-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
296 lines (263 loc) · 14.9 KB
/
index.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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Master en Css</title>
<link rel="icon" type="image/x-icon" href="img/logo.png">
<link rel="stylesheet" type="text/css" href="../proyecto 1/css/estilos.css">
</head>
<body>
<header id="header">
<div id="logo">
<img src="img/logo.png" alt="logotipo" />
</div>
<h1>
<a href="index.html">
Tatiana Garay Web
</a>
</h1>
<nav id="nav">
<ul>
<li>
<a href="index.html">Inicio</a>
</li>
<li>
<a href="index.html">Contenido</a>
</li>
<li>
<a href="index.html">Requerimientos</a>
</li>
<li>
<a href="index.html">Lenguaje</a>
<ul>
<li>
<a href="index.html">HTML</a>
</li>
<li>
<a href="index.html">CSS</a>
</li>
<li>
<a href="index.html">JAVA</a>
</li>
</ul>
</li>
<li>
<a href="index.html">Frameworks</a>
<ul>
<li>
<a href="index.html">Lees</a>
</li>
<li>
<a href="index.html">SASS</a>
</li>
<li>
<a href="index.html">bootstrap</a>
</li>
</ul>
</li>
<li>
<a href="index.html">Proyectos</a>
</li>
<li>
<a href="index.html">El Instructor</a>
</li>
<li>
<a href="index.html">Reseña</a>
</li>
<li>
<a href="index.html">Blog</a>
</li>
<li>
<a href="index.html">Contacto</a>
</li>
</ul>
</nav>
<!---Fin del la barra de menus-->
<!---Inicio del contenido central-->
<div id="content">
<!--incio de la barra laterl-->
<aside id="aside">
<div class="widget" id="login">
<h3>Entrar a la Web</h3>
<form>
<label>Usuario:</label>
<input type="text" />
<label>Contraseña:</label>
<input type="password" />
<input type="submit" value="Entrar" />
</form>
<a href="#">Zona Alumnos</a>
<a href="#">Zona de Profesores</a>
<a href="#">Acceso a calificaciones</a>
</div>
<div class="widget" id="login">
<h3 class="blue">Aula Virtual 1</h3>
<form>
<label>Nombre de Usuario:</label>
<input type="text" />
<label>Contraseña:</label>
<input type="password" />
<input type="submit" value="Entrar" />
</form>
</div>
<div class="widget" id="login">
<h3 class="red">Aula Virtual 2</h3>
<form>
<label>Nombre de Usuario:</label>
<input type="text" />
<label>Contraseña:</label>
<input type="password" />
<input type="submit" value="Entrar" />
</form>
</div>
<div class="widget" id="login">
<h3>Enlaces de Interes</h3>
<ul>
<li>
<a href="https/victorroblesweb.es/academy">
Master En JavaScript
</a>
</li>
<li>
<a href="https/victorroblesweb.es/academy">
Master En PHP
</a>
</li>
<li>
<a href="https/victorroblesweb.es/academy">
Master En web en Full-stack
</a>
</li>
<li>
<a href="https/victorroblesweb.es/academy">
Master En Frameworks JS
</a>
</li>
<li>
<a href="https/victorroblesweb.es/academy">
Master En GIT y comandos linux
</a>
</li>
</ul>
</div>
</aside>
<!---Fin de la barra lateral-->
<!-----INICIO DE LAS SECCIONES-->
<div id="sections">
<section id="Fronted">
<span class="stickers">
<img class="sticker1" src="img/scotch.png" alt="pegatina"/>
<img class="sticker2" src="img/scotch.png" alt="pegatina"/>
</span>
<h2 class="titulo">Noticias de Front-End</h2>
<article class="article">
<span class="icon">a</span>
<p>
<a href="#">Titulo de Entrada</a>
Actualmente, se observa de forma puntual una escasez de talento y alta demanda de desarrolladores front end (desarrollo frontal).
Estos profesionales son los programadores encargados de que una web sea atractiva para el usuario y, al mismo tiempo, funcione correctamente. Su responsabilidad es que la parte visual de la web tenga un diseño intuitivo y atractivo para el usuario. Trabaja desde el lado del cliente, interpretando y adaptando lenguajes de desarrollo web para crear la experiencia final.
</p>
<span class="dates">[28-03-2023]</span>
</article>
<article class="article">
<span class="icon">a</span>
<p>
<a href="#">Titulo de Entrada</a>
Un éxito. El curso de “Introducción - Primeros pasos en Front-end” incluido en la oferta de Argentina Programa 4.0 es un éxito: a pocos días del lanzamiento se han inscripto más de 38.000 estudiantes, superando las expectativas de los organizadores. “Sabíamos que estábamos ofreciendo un curso de calidad y que iba a ser muy convocante”, dicen los organizadores, “pero no esperábamos alcanzar tan pronto esta cantidad”.
</p>
<span class="dates">[28-03-2023]</span>
</article>
<article class="article">
<span class="icon">a</span>
<p>
<a href="#">Titulo de Entrada</a>
Ejemplos de aplicación del frontend
Como ya lo mencionamos, el frontend son todos los elementos y componentes visibles para los usuarios, y utilizan lenguajes de diseño como CSS, HTML y JavaScript. Algunos ejemplos de frontend son los siguientes:
Optimización de motores de búsqueda (SEO).
Accesibilidad (reconocimiento de voz, conversión de texto a voz).
Funcionalidad en todos los navegadores y tamaños de pantalla (computadoras de escritorio, teléfonos móviles y tablets).
Velocidad (cuanto más rápido cargue el sitio, mejor).
Rendimiento del sitio web por medio de la limpieza del código.
Ahora que ya conoces qué es el frontend y para qué sirve, te explicaremos el aspecto interior de la construcción de un sitio o aplicación web; nos referimos al backend.
</p>
<span class="dates">[28-03-2023]</span>
</article>
<article class="article">
<span class="icon">a</span>
<p>
<a href="#">Titulo de Entrada</a>
Elementos frontend
Colores: uno de los elementos que mejor definen la identidad de marca de Factorial son sus colores. La elección de un rojo intenso que contrasta con el blanco del fondo depende de un diseñador frontend.
Logotipo: el logotipo de Factorial presenta una minimalista sombra de una persona. Este elemento fue creado por diseñadores e integrado en el sitio por un desarrollador web.
Imagen: en la página podemos ver una imagen con reseñas de algunos clientes satisfechos. La disposición y tamaño de esta imagen es definida en el frontend.
Botones de acción: en la pantalla hay un botón de registro y uno de envío de formulario. La ubicación, el diseño y las opciones de estos elementos también se definen en frontend.
Información: la inclusión de texto es responsabilidad del diseñador web.
<span class="dates">[28-03-2023]</span>
</article>
</section>
<section id="backend">
<span class="stickers">
<img class="sticker1" src="img/scotch.png" alt="pegatina"/>
<img class="sticker2" src="img/scotch.png" alt="pegatina"/>
</span>
<h2 class="titulo red">Noticias Black-End</h2>
<article class="article">
<span class="icon">a</span>
<p>
<a href="#">Titulo de Entrada</a>
Elementos backend
Base de datos: para que el formulario de registro funcione es necesario que en el backend se dé soporte a una base de datos que contenga la información de los contactos. Además, esta herramienta debe estar integrada en el código para poder ser funcional en el sitio.
Herramientas de rastreo: en el ejemplo puedes ver una cinta informativa de la política de privacidad y uso de cookies de Factorial. Estos archivos de seguimiento del cliente solo pueden ser programados desde el backend, a pesar de que el aviso que vemos sea generado por el frontend.
Software: como ya dijimos, Factorial utiliza las herramientas de Marketing, Sales y Service Hub. Estos recursos deben integrarse en la página para dar seguimiento a sus campañas de publicidad y de correos, y dar soporte a través de su servicio de atención. Estas integraciones dependen de una programación backend.
</p>
<span>[28-03-2023]</span>
</article>
<article class="article">
<span class="icon">a</span>
<p>
<a href="#">Titulo de Entrada</a>
Actualmente existen desarrolladores con experiencia y habilidades para cumplir con ambas partes de la ecuación. Estos expertos, conocidos como desarrolladores full stack, son capaces de gestionar adecuadamente todos los aspectos relevantes a la programación, diseño y estructura del sitio.
</p>
<span>[28-03-2023]</span>
</article>
<article class="article">
<span class="icono">a</span>
<p>
<a href="#">Titulo de Entrada</a>
El backend son todos los códigos ocultos que sirven para que una página web o aplicación funcione correctamente. Además, de su estructura y organización depende la experiencia de usuario. De igual forma, el backend se encarga de optimizar otros elementos y recursos como la seguridad y privacidad en un sitio web o aplicación.
</p>
<span>[28-03-2023]</span>
</article>
<article class="article">
<span class="icon">a</span>
<p>
<a href="#">Titulo de Entrada</a>
Ejemplos de aplicación del backend
Algunos ejemplos para terminar de comprender el término son los siguientes:
Inicio de sesión. Cuando una persona accede a un sitio web o aplicación utiliza un correo electrónico y contraseña, esta información es validada y resguardada por el servidor, que consulta su base de datos y así identifica y permite el acceso al usuario.
Carrito de compras. Este elemento permite la compra de productos en línea y sirve para facilitar la selección de diferentes productos o servicios que algún usuario desee comprar.
Cookies. Muchos sitios utilizan cookies para realizar un seguimiento de aquello que los usuarios vieron anteriormente, lo que les permite sugerir otros contenidos (o productos) de interés.
CMS. Un sistema de gestión de contenidos permite al propietario de un sitio web actualizar la información sin tener que modificar el código HTML.
Formularios de contacto. Si un visitante del sitio web se interesa por recibir más información o ponerse en contacto, se debe contar con un elemento que sea capaz de vincular al usuario con la empresa.
</p>
<span>[28-03-2023]</span>
</article>
</section>
</div>
<aside id="frases">
Sé tu misma, atrévete a soñar y celebra cada día de tu vida. Amarse a uno mismo es el comienzo de un
romance de por vida
<a href="#">Leer mas Frases</a>
</aside>
<div class="clearfix"></div>
<div id="history">
<a href="#">[Ver mas novedades]</a>
</div>
</div>
<!--Fin del contenido central-->
<footer id="footer">
<p>© Desarrollado por Tatiana Garay </p>
</footer>
</header>
</body>
</html>