En el marco del Talent Land 2019, liberamos nuestra plantilla de sitio web, la cual contempla aspectos de diseño responsivo y accesibilidad. Nuestro objetivo es lograr que la población comience a generar sus propios recursos y que sin importar su conocimiento previo adopten el código y las prácticas de accesibilidad digital.

1. Web para Todos
Diseño de sitios responsivos y con contenido accesible
Desarrollo para escritorio y móvil
23 de Abril de 2019
V. 1.0

2. Aviso
El material de esta presentación puede ser utilizado para
cualquier finalidad (con o sin fines de lucro).
Las marcas registradas son presentadas para fines educativos.

3. ¿Qué es Sibleint?
Sibleint es una comunidad que tiene como objetivo reducir la brecha tecnológica que
existe en los grupos vulnerables de la población. El dominio de las tecnologías de la
información y la comunicación por parte de estos grupos puede encaminarlos a un mejorar
su acceso a la educación, a la formación laboral con mayores oportunidades de empleo y la
inclusión social.

4. Ponente
Alan Joseph Hernández Becerra
Tecnologías para el Aprendizaje
@ajosephhb

5. Requerimientos

6. Requerimientos
- Navegador de Internet
Google Chrome
Mozilla Firefox
- Editor de Texto
Visual Studio Code (recomendación)
- Repositorios de Gráficos
Pexels
Pixabay
Flaticon
- Editores de Gráficos
Google Dibujos (recomendación)
- Biblioteca (Framework)
Bootstrap
- Biblioteca de iconos (Framework)
Font Awesome
- Repositorios de Tipografías
Google Fonts

7. Conceptos de un Sitio Web

8. Conceptos de un sitio web
Los sitios web se componen por tres tipos de ficheros los cuales les proporcionan la estructura, las
reglas sobre la apariencia y sus comportamientos.
https://www.w3schools.com/html/html5_intro.asp https://www.w3schools.com/css/default.asp https://www.w3schools.com/js/default.asp
HTML5
Estructura del Sitio
CSS
Reglas de Apariencia física
JavaScript
Seguridad y Comportamiento

9. Plantilla del Sitio

10. Estructura del Sitio
La plantilla del sitio se compone por ficheros
html, css y javascript almacenados en carpetas.
- img
Imágenes jpg y png para modificar
- offline
Ficheros js y css de los frameworks
- index
Fichero HTML para modificar
- style
Fichero CSS para modificar

11. Edición
Encontras el contenido de esta plantilla separada por comentarios, todo esto con la
finalidad de que puedas identificar las secciones.

12. Diseño Responsivo
Bootstrap y las media queries ayudan a adaptar el contenido de acuerdo a la pantalla.

13. Accesibilidad
La accesibilidad permite que cualquier persona pueda navegar por nuestro sitio
identificando el contenido de las imágenes y los enlaces. Recuerda escribir sobre las
etiquetas <title> y < alt>

14. Aspectos Legales
El material proporcionado es cien por ciento legal y gratuito,
mantente siempre al margen de la ley. Si estás más
interesado sobre el tema sigue las guías que proporciona
Mozilla Firefox y W3Schools, así como los sitios oficiales
sobre los frameworks mencionados previamente.

15. Descarga
https://drive.google.com/drive/folders/1xeFAOjSKnEA
XSSniJBauNHeHZOsGT_lO?usp=sharing
https://github.com/ajosephhb/boostrap_accesible
Google Drive
GitHub

16. ¡Gracias!
@Sibleint
+52 1 33 10 07 05 03
contactosible@gmail.com
Alan Joseph Hernández Becerra