F. index.html

1
<!DOCTYPE html>
2
<html lang="es" class="light dark">
3

  
4
<head>

  
5

  
6
 <meta charset="UTF-8">

  
7

  
8
 <title>PWA con Lista</title>

  
9

  
10
 <!-- Resumen para los motores de búsqueda. -->

  
11
 <meta name="description" content="Ejemplo de PWA con Material Design">

  
12

  
13
 <script type="module" src="js/lib/registraServiceWorker.js"></script>

  
14

  
15
 <meta name="viewport" content="width=device-width">

  
16

  
17
 <!-- Color de la barra de navegación de Chrome en dispositivos móviles. -->

  
18
 <meta name="theme-color" content="#fffbfe">

  
19

  
20
 <!-- Ícono para la página web, que normalmente se pone en la raíz del sitio.

  
21
  Puede ser diferente para cada página. -->

  
22
 <link rel="icon" sizes="32x32" href="favicon.ico">

  
23

  
24
 <!-- Configuración de la PWA para Chrome, Edge y Safari.

  
25
  Debe ponerse en todas las páginas. -->

  
26
 <link rel="manifest" href="site.webmanifest">

  
27

  
28
 <!-- Permite a los navegadores, que como Safari no soportan el estándar

  
29
  completo de custom elementsm, lo cumplan totalmente. Debe ponerse en todas

  
30
  las páginas. -->

  
31
 <script src="ungap/custom-elements.js"></script>

  
32

  
33
 <script type="module" src="js/lib/custom/md-app-bar.js"></script>

  
34
 <script type="module" src="js/nav-tab-fixed.js"></script>

  
35

  
36
 <link rel="stylesheet" href="css/estilos.css">

  
37
 <link rel="stylesheet" href="css/transicion_pestanas.css">

  
38
 <link rel="stylesheet" href="css/md-tab.css">

  
39
 <link rel="stylesheet" href="css/material-symbols-outlined.css">

  
40
 <link rel="stylesheet" href="css/md-list.css">

  
41

  
42
</head>

  
43

  
44
<body>

  
45

  
46
 <md-app-bar class="centered" adicional="tab">

  
47

  
48
  <h1>PWA con Lista</h1>

  
49

  
50
 </md-app-bar>

  
51

  
52
 <nav-tab-fixed id="tab"></nav-tab-fixed>

  
53

  
54
 <section>

  
55

  
56
  <ul class="md-list">

  
57

  
58
   <li class="md-one-line">

  
59
    <span class="headline">

  
60
     Ciudad de México

  
61
    </span>

  
62
   </li>

  
63

  
64
   <li class="md-one-line">

  
65
    <span class="headline">

  
66
     Lorem ipsum dolor sit amet consectetur adipisicing elit.

  
67
     Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque

  
68
     illo amet, eos ea similique quia, maiores tenetur modi nobis expedita

  
69
     alias!

  
70
    </span>

  
71
   </li>

  
72

  
73
   <li class="md-one-line icon">

  
74
    <span class="material-symbols-outlined">account_balance</span>

  
75
    <span class="headline">

  
76
     Atenas

  
77
    </span>

  
78
   </li>

  
79

  
80
   <li class="md-one-line avatar">

  
81
    <img alt="Avatar de Ana" src="img/pexels-moises-patrício-10961948.jpg">

  
82
    <span class="headline">

  
83
     Ana

  
84
    </span>

  
85
   </li>

  
86

  
87
   <li class="md-one-line image">

  
88
    <img alt="Coyote de Neza" src="img/Escultura_de_coyote.jpeg">

  
89
    <span class="headline">

  
90
     Neza

  
91
    </span>

  
92
   </li>

  
93

  
94
   <li class="md-one-line video">

  
95
    <img alt="Ciudad de San Francisco"

  
96
      src="img/pexels-craig-dennis-3701822.jpg">

  
97
    <span class="headline">

  
98
     San Francisco

  
99
    </span>

  
100
   </li>

  
101

  
102
   <li class="md-one-line video">

  
103
    <img alt="Ciudad de San Francisco"

  
104
      src="img/pexels-craig-dennis-3701822.jpg">

  
105
    <span class="headline">

  
106
     Lorem ipsum dolor sit amet consectetur adipisicing elit.

  
107
     Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque

  
108
     illo amet, eos ea similique quia, maiores tenetur modi nobis expedita

  
109
    </span>

  
110
   </li>

  
111

  
112
   <li>

  
113
    <a class="md-one-line image" target="_blank" rel="noopener noreferrer"

  
114
      href="https://culturacolectiva.com/historia/ciudad-neza-su-historia-en-fotografias/">

  
115
     <img alt="Coyote de Neza" src="img/Escultura_de_coyote.jpeg">

  
116
     <span class="headline">

  
117
      Neza Link

  
118
     </span>

  
119
    </a>

  
120
   </li>

  
121

  
122
  </ul>

  
123

  
124
  <footer>

  
125
   <ul>

  
126
    <li>

  
127
     <p>

  
128
      <small>

  
129
       <a target="_blank" rel="noopener noreferrer"

  
130
         href="https://www.pexels.com/es-es/foto/nina-mono-cara-sonriente-10961948/">

  
131
        La foto de la niña es de Moises Patrício, publicada en el sitio Pexels.

  
132
        Haz clic en este hipervínculo para más información.

  
133
       </a>

  
134
      </small>

  
135
     </p>

  
136
    </li>

  
137
    <li>

  
138
     <p>

  
139
      <small>

  
140
       <a target="_blank" rel="noopener noreferrer"

  
141
         href="https://www.pinterest.com.mx/ludresi/">

  
142
        La foto del Coyote de Neza es de Ludres Isan, publicada en el sitio

  
143
        Pinterest. Haz clic en este hipervínculo para más información.

  
144
       </a>

  
145
      </small>

  
146
     </p>

  
147
    </li>

  
148
    <li>

  
149
     <p>

  
150
      <small>

  
151
       <a target="_blank" rel="noopener noreferrer"

  
152
         href="https://www.pexels.com/es-es/foto/puente-golden-gate-san-francisco-california-3701822/">

  
153
        La foto del puente de San Francisco es de Craig Dennis, publicada en el

  
154
        sitio Pexels. Haz clic en este hipervínculo para más información.

  
155
       </a>

  
156
      </small>

  
157
     </p>

  
158
    </li>

  
159
   </ul>

  
160
  </footer>

  
161

  
162
 </section>

  
163

  
164
</body>

  
165

  
166
</html>

 


 
 
 
     skip_previous
    
 
     skip_next