En este tutorial práctico integraremos TypewriterJS a nuestra aplicación web en construcción que es parte de la serie de tutoriales que es parte del desarrollo de una página web dinámico aplicando Bootstrap 5, PHP 8 y MariaDB; finalmente ejecutaremos la aplicación sobre el servidor de aplicaciones Apache.
Requisitos:
- XAMPP v3.3.0.
- PHP 8 y Bootstrap 5.
- MariaDB y PHPMyAdmin.
- Visual Studio Code.
- TypewriterJS
Lo que veremos en este tutorial:
- Integrando TypewriterJS CORE a nuestro proyecto web.
- Programando el Cliente TypewriterCustomer.
- Asignar TypewriterJS Cliente a la etiqueta HTML.
- Conclusiones y Referencias.
1. Integrando TypewriterJS CORE a nuestro proyecto web.
Para la integración TypewriterJS CORE es necesario realizar la descarga de recurso core.js desde la pagina de TypewriterJS, seguidamente crearemos el directorio assets en la raiz del proyecto principal, finalmente creamos los sub directorios plugins\typewriterjs, finalmente el recurso core.js descargado pegamos en el sub typewriterjs.
 |
| El directorio assets también será util para los próximos tutoriales |
2. Programando el Cliente TypewriterCustomer.
Para programar nuestro archivo cliente TypewriterCustomer es necesario crear el sub directorio js sobre el principal directorio assets y seguidamente crear el archivo typewriter-custom.js:
 |
| El sub directorio js almacenar los archivos JavaScript personalizados propiamente del proyecto |
Desarrollamos el Cliente Typewriter, para este coso práctico, se desea mostrar sobre 5 ventajas acerca de usar Bootstrap en un sitio web:
1 2 3 4 5 6 7 8 9 | "use strict"; /* ========= Typewriter effect =========== */ /* Ref: https://safi.me.uk/typewriterjs/ */ const instance = new Typewriter('#typewriterbootstrap', { strings: ['de uso facil', 'compatible con distintos navegadores', 'para desarrollo responsive', 'de amplia comunidad web', 'para desarrollo rapido'], autoStart: true, loop: true, }); |
3. Asignar TypewriterJS Cliente a la etiqueta HTML.
Antes de realizar la asignación, agregaremos los siguientes bloques de CSS a nuestro proyecto web en contrucción:
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 | /* typewriter ------------------------- */ .typewriter { display:flex; justify-content: center; align-items: center; height: 14em; padding-bottom: 10em; } .typewriter p { font-size: 2.4em; color: #4B1184; padding-left: 4em; padding-right: 4em; } /* typewriter @media ------------------------- */ @media (min-width: 320px) and (max-width: 767px){ .typewriter p { font-size: 1.2em; padding-left: 1em; padding-right: 1em; } } @media (min-width: 768px) and (max-width: 1024px){ .typewriter p { font-size: 2em; padding-left: 1em; padding-right: 1em; } } @media (min-width: 768px) and (max-width: 912px){ .typewriter p { font-size: 2.2em; padding-left: 1em; padding-right: 1em; } } |
Finalmente asignamos el TypewriterJS Cliente elaborado de nombre typewriterbootstrap a etiqueta span:
1 2 3 4 5 6 7 8 9 | <div class="container-fluid typewriter"> <div class="row"> <div class="col-md-12 text-center"> <p>Bootstrap es muy popular como herramientas de desarrollo web y muchos expertos los desean por ser <span lang="es" id="typewriterbootstrap" class="text-primary font-weight-bold"></span></p> <button class="btn btn-secondary" type="button">Registrate en el curso</button> </div> </div> </div> |
4. Conclusiones y Referencias.
Conclusiones:
En este tutorial integramos TypewriterJS a nuestra aplicación web y elaboramos el CSS para el control div donde mostramos el texto de tipo typewriter; asimismo agregamos el CSS @media query para mantener un diseño responsivo.
Referencias:
Recuerda que no hay otra forma de aprender a programar que escribir muchísimo código.
Directorio 10demo-typewriterjs
Excelente fin de semana para todos, comparten los tutoriales y sigueme en las redes sociales... un fuerte abrazo.
0 Comentarios