initial-website/index.html at master · DestructiveInformation/initial-website · GitHub

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
<!DOCTYPE html>
<html lang="es"> <!--Opciones de Idioma  (español)-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Proyecto Curso HTML5 y CSS3</title>
    <!-- Vincular archivos css -->
    <!-- Normalizar etiquetas html5 con normalize.css -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/estilos.css">
    <!-- Sí la versión del navegador es anterior a Internet Explorer 9. Cargar el siguiente archivo -->
    <script src="js/html5shiv.js"></script>


    <!-- Sí la versión del navegador es anterior o igual a Internet Explorer 9. Cargar el siguiente archivo (estilos css 3 sean reconocidos)
    -->

    <style type="text/css">
        .encabezado,
        .presentacion,
        a.aprender-mas,
        .complementario,
        .social img{

            behavior:url("css/compatibilidad-estilos/PIE.php");
        }

    </style>


</head>
<body>
    <!-- Codificando el encabezado -->

    <!-- Se usa id cuando se necesita referenciar un elemento usando javascript, o cuando hay un choque de estilos (cascada) y quieres que tu estilo sobresalga, entonces ahí se debe utilizar id -->

    <!-- Observamos que deacuerdo a nuestro diseño el nav debe ir dentro del header -->

        <header class="encabezado" role="banner">
            <div class="contenedor">
                <a href="#" class="logo">
                    <img src="img/logo.png" alt="logotipo-sitio">
                </a>
                <nav role="navigation">
                    <!-- ul>li*3>a[href="#"] -->
                    <ul>
                        <li><a href="#">Nosotros</a></li>
                        <li><a href="#">Servicios</a></li>
                        <li><a href="#">Contactanos</a></li>
                    </ul>
                </nav><!--Fin Menú de Navegación-->
            </div> <!--Fin del div.contenedor-->
        </header><!--Fin de header .encabezado-->

        <!-- ---------------------------------------------------------------
        --------------------------------------------------------------- -->

        <!-- BLOQUE DE PRESENTACIÓN USANDO LA ETIQUETA div -->

        <div class="presentacion">

            <div class="contenedor">
                <div class="introduccion-presentacion">
                    <h1>EXPERTO HTML5 & CSS3<br>
                        <span>Empieza a codificar hermosos sitios web en 8 horas</span>
                    </h1>
                    <a href="#" class="aprender-mas">Aprender más</a> <!--Botón-->
                </div><!--Fin div.introduccion-presentacion-->
                <img src="img/computadora.png" alt="cmputadora-principal"><!--Insertar Computadora-->
            </div><!--Fin div.contenedor-->

        </div><!--Fin div.presentacion-->

        <!-- ---------------------------------------------------------------
                --------------------------------------------------------------- -->

        <!-- BLOQUE QUE HABLA ACERCA DE UN TEMA AISLADO Y QUE NECESITA UN TÍTULO -->

       <section class="acceso-rapido">
           <div class="contenedor"> <!--Permite que el contenido esté centrado-->
                <h2>Acceso Rápido</h2>
                    <!-- Se utiliza h3 porque al parecer el contenido es importante -->
                    <figure>
                        <a href="#"><img src="img/ico-nosotros.png" alt="Nosotros"></a>
                        <figcaption>
                            <h3><a href="#">Nosotros</a></h3>
                        </figcaption>
                    </figure>

                    <figure>
                        <a href="#"><img src="img/ico-servicios.png" alt="Servicios"></a>
                        <figcaption>
                            <h3><a href="#">Servicios</a></h3>
                        </figcaption>
                    </figure>

                    <figure>
                        <a href="#"><img src="img/ico-ubicanos.png" alt="Ubicanos"></a>
                        <figcaption>
                            <h3><a href="#">Ubicanos</a></h3>
                        </figcaption>
                    </figure>

                    <figure>
                        <a href="#"><img src="img/ico-contactanos.png" alt="Contactanos"></a>
                        <figcaption>
                            <h3><a href="#">Contáctanos</a></h3>
                        </figcaption>
                    </figure>
           </div>
       </section>

    <!-- ---------------------------------------------------------------
                    --------------------------------------------------------------- -->

    <!-- CONTENIDO PRINCIPAL -->

    <div class="bloque-contenido">
        <div class="contenedor">
            <main class="articulos" role="main">
                <h2>ÚLTIMAS NOTICIAS</h2>
                <article>
                    <img src="img/img-articulo1.jpg" alt="articulo-1"><!--Imagen artículo-->
                    <h1><a href="#">Un perrito Feeling!</a></h1><!--Titulo del artículo h1 porque es una nueva sección del doc-->
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia possimus ducimus alias nobis nostrum est sed! Enim eveniet laboriosam exercitationem neque culpa reprehenderit, perferendis assumenda ipsam facilis quas non ad?
                    </p><!--Contenido del artículo-->
                </article>

                <article>
                    <img src="img/img-articulo2.jpg" alt="articulo-2">
                    <!--Imagen artículo-->
                    <h1> <a href="#">Un perrito loco!</a></h1>
                    <!--Titulo del artículo h1 porque es una nueva sección del doc-->
                    <p>
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum consectetur delectus reprehenderit optio nisi nihil, tempore quia ratione, quod fuga numquam. Corrupti illo odio quaerat vitae error repellat voluptas doloremque.
                    </p>
                    <!--Contenido del artículo-->
                </article>

                <article>
                    <img src="img/img-articulo3.jpg" alt="articulo-2">
                    <!--Imagen artículo-->
                    <h1><a href="#">Un perrito Hermoso!</a></h1>
                    <!--Titulo del artículo h1 porque es una nueva sección del doc-->
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Error doloremque in nobis totam nulla, officiis consequuntur eveniet mollitia provident pariatur odit? Rem harum dolor iusto laborum veniam earum nihil eum.
                    </p><!--Contenido del artículo-->
                </article>
            </main><!--Fin main-->

            <!-- Agregamos contenido complementario usando aside -->

            <aside class="complementario" rol="complementary">
                <h2>PRÓXIMOS EVENTOS</h2>
                <ul>
                    <li><a href="#">Some of the cheapest prices around</a></li>
                    <li><a href="#">Wide range of policies to choose from.Wide range of policies to choose from</a></li>
                    <li><a href="#">Winter sports included with annual.</a></li>
                    <li><a href="#">Over 50 sports covered automatically</a></li>
                    <li><a href="#">Some of the cheapest prices around</a></li>
                    <li><a href="#">Wide range of policies to choose from</a></li>
                    <li><a href="#">Comprehensive levels of cover avail</a></li>
                    <li><a href="#">Winter sports included with annual</a></li>
                    <li><a href="#">Over 50 sports covered automatically</a></li>
                </ul>
            </aside><!--Fin aside-->
        </div><!--Fin div.contenedor-->
    </div><!--Fin div.bloque-contenido-->

    <!-- ---------------------------------------------------------------
                        --------------------------------------------------------------- -->

                    <!-- ZONA DE SUSCRIPCIÓN  -->


        <!-- Aquí podemos usar un section porque se sale de la temática -->

    <section class="suscripcion">
        <div class="contenedor">
            <h2>Manténgase Actualizado:</h2>
            <form action="#">
                <!-- Usamos sólo input sin label porque así lo requiere el modelo de photoshop -->
                <input type="text" name="nombre" placeholder="Ingresa tu nombre" required>
                <input type="email" name="email" placeholder="Ingresa tu email" required>
                <input type="submit" value="Regístrate">
            </form><!--Fin del formulario-->
        </div><!--Fin del div.contenedor-->
    </section><!--Fin del section-->

    <!-- ---------------------------------------------------------------
                            --------------------------------------------------------------- -->

                            <!-- PIE DE PÁGINA -->

    <footer class="pie-pagina" role="contentinfo">
        <div class="contenedor">
            <small>Copyright © 2014 Nombre Empresa</small><!--Detalles de la Empresa-->
            <nav>
                <ul>
                    <li><a href="#">Políticas del Sitio</a></li>
                    <li><a href="#">Preguntas frecuentes</a></li>
                    <li><a href="#">Contáctanos</a></li>
                </ul>
            </nav><!--Fin de nav.-->
        </div><!--Fin del div .contenedor-->
    </footer><!--Fin del footer.pie-pagina-->

                        <!-- REDES SOCIALES -->
    <div class="redes-sociales">
        <!-- Lo elementos serán flotantes, por ello, no se asignan dentro de un div.contenedor -->
        <a href="#" title="Vamos a Facebook"><img src="img/ico-face.jpg" alt="Facebook"></a>
        <a href="#" title="Vamos a Youtube"><img src="img/ico-youtube.jpg" alt="Youtube"></a>
        <a href="#" title="Vamos a Twiter"><img src="img/ico-twitter.jpg" alt="Twiter"></a>
    </div><!--Fin de div.redes-sociales-->
</body><!--Fin del body-->


        <!-- ---------------------------------------------------------------
                        Compatibilidad con navegadores obsoletos
            ---------------------------------------------------------------- -->

<!-- Compatibilidad con navegadores obsoletos
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills -->

<!-- Implementar polyfills

 Cierta características de html5 funciones en navegadores
 viejos u obsoletos

    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 ***html5shiv (Entender nuevas etiquetas semánticas html5)

   1)Descargamos el archivo.zip
   2)Descoprimir archivo.zip
   3)Buscar la carpeta src
   4)Entrar y localizar el archivo html5shiv.js
   5) Copiar y Pegar el archivo html5shiv.js en la carpeta js de nuestro proyecto
   6) Dentro de nuestro index.html, hacer referencia al archivo html5shiv.js

  ---- Comentarios Condicionales----

   Sí la versión del navegador es anterior a Internet Explorer 9. Cargar el siguiente archivo

   [if lt IE 9]>

   Ejemplo:

	<script src="bower_components/html5shiv/dist/html5shiv.js"></script>

    <![endif]

    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++

    ***placeholder

    https://github.com/UmbraEngineering/Placeholder

   1)Descargamos el archivo.zip
   2)Descoprimir archivo.zip
   3)Buscar la carpeta src
   4)Entrar y localizar el archivo simple.js
   5) Copiar y Pegar el archivo simple.js en la carpeta js de nuestro proyecto
   6) Dentro de nuestro index.html, hacer referencia al archivo simple.js. Ponerlo fuera del body


            ---------------------------------------------------------------
                        ***Reconocer los gradientes, box-shadow y border-radius
            ----------------------------------------------------------------


    http://css3pie.com/

   1) Descargar archivo  Download PIE 2.0 beta 1
   2) Descomprimir y renombrar la carpeta como: compatibilidad-estilos
   3) Copiar la cartepa compatibilidad-estilos dentro de nuestro proyecto, en la carpeta css

   Sí la versión del navegador es anterior o igual a Internet Explorer 9.


    4) Crear las siguientes reglas y buscar el archivo .php

    .encabezado,
    .presentacion,
    a.aprender-mas,
    .complementario,
    .social img{


        behavior:url("css/compatibilidad-estilos/PIE.php");

    }

    5) Dentro del archivo estilos.css, buscar ls reglas donde se encuentre los gradiente, box-shadow y border-radius y agregar lo siguiente:

    -pie-background: linear-gradie (to top,#319b41,#42FF7B);

    cambiar los colores, por los colores originales del gradiente declarado en la regla css del archivo estilos.css

-->


<!-- Sí la versión del navegador es anterior o igual a Internet Explorer 9. Cargar el siguiente archivo

[if lte IE 9]>

   Ejemplo:

	<script src="ruta/simple.js"></script>

    <![endif]

-->


<script src="js/simple.js"></script>

</html>