E. public / 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/registraServiceWorker.js"></script>

  
14
 <script type="module" src="libclienteweb/manejaErrores.js"></script>

  
15

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

  
17

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

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

  
20

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

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

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

  
24

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

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

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

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

  
29
 <link rel="stylesheet" href="material-tokens/css/baseline.css">

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

  
31

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

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

  
34
  las páginas. -->

  
35
 <script src="ungap/es.js"></script>

  
36

  
37
 <script type="module" src="libmde/md-app-bar.js"></script>

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

  
39

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

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

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

  
43

  
44
</head>

  
45

  
46
<body>

  
47

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

  
49

  
50
  <h1>PWA con Lista</h1>

  
51

  
52
 </md-app-bar>

  
53

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

  
55

  
56
 <section>

  
57

  
58
  <ul class="md-list">

  
59

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

  
61
    <span class="headline">

  
62
     Ciudad de México

  
63
    </span>

  
64
   </li>

  
65

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

  
67
    <span class="headline">

  
68
     Lorem ipsum dolor sit amet consectetur adipisicing elit.

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

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

  
71
     alias!

  
72
    </span>

  
73
   </li>

  
74

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

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

  
77
    <span class="headline">

  
78
     Atenas

  
79
    </span>

  
80
   </li>

  
81

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

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

  
84
    <span class="headline">

  
85
     Ana

  
86
    </span>

  
87
   </li>

  
88

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

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

  
91
    <span class="headline">

  
92
     Neza

  
93
    </span>

  
94
   </li>

  
95

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

  
97
    <img alt="Ciudad de San Francisco"

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

  
99
    <span class="headline">

  
100
     San Francisco

  
101
    </span>

  
102
   </li>

  
103

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

  
105
    <img alt="Ciudad de San Francisco"

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

  
107
    <span class="headline">

  
108
     Lorem ipsum dolor sit amet consectetur adipisicing elit.

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

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

  
111
    </span>

  
112
   </li>

  
113

  
114
   <li>

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

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

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

  
118
     <span class="headline">

  
119
      Neza Link

  
120
     </span>

  
121
    </a>

  
122
   </li>

  
123

  
124
  </ul>

  
125

  
126
  <footer>

  
127
   <ul>

  
128
    <li>

  
129
     <p>

  
130
      <small>

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

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

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

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

  
135
       </a>

  
136
      </small>

  
137
     </p>

  
138
    </li>

  
139
    <li>

  
140
     <p>

  
141
      <small>

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

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

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

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

  
146
       </a>

  
147
      </small>

  
148
     </p>

  
149
    </li>

  
150
    <li>

  
151
     <p>

  
152
      <small>

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

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

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

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

  
157
       </a>

  
158
      </small>

  
159
     </p>

  
160
    </li>

  
161
   </ul>

  
162
  </footer>

  
163

  
164
 </section>

  
165

  
166
</body>

  
167

  
168
</html>

 


 
 
 
     skip_previous
    
 
     skip_next