Detalles del Evento y Formulario de Registro como Participante
Reto FrontEnd de StyleLeading
Fecha del Evento
Jueves 07 enero de 2021: 7:30 p.m. – 08:30 p.m.
Detalles del Reto:
¿Cómo participar?
Será un evento en línea, sólo debes llenar el formulario de registro (abajo) al evento como participante. Por el momento sólo puedes participar en el reto individualmente.
¿Qué debo tener?
Una computadora con un editor de código como Sublime Text, Visual Studio Code o cualquiera que sea de tu agrado. Adicional a esto, debes tener una conexión a internet.
¿Cómo me puedo preparar?
Una vez realices el registro como participante, podrás tendrás acceso de antemano a los archivos y las instrucciones para el evento. Esto incluye la guía de diseño y la base en HTML y CSS para el reto.
¿Cuánto tiempo tengo para el reto el día del evento?
Tendrás 20 minutos para completar el reto.
¿Será grabado el evento?
El evento será en vivo y lo estaremos transmitiendo por youtube live. (Puedes invitar a tus amig@s).
Como ves, es súper fácil participar y mostrar tus capacidades a los demás miembros de la comunidad.
Recuerda revisar la notificación en la carpeta de SPAM. Si llegas a tener problemas, puedes escribir directamente a jair@cooltimedia.com
Detalles del Evento y Formulario de Registro como Participante
Fecha del Evento
Jueves 10 dic: 7:30 p.m. – 08:30 p.m.
Detalles del Reto:
¿Cómo participar?
Será un evento en línea, sólo debes llenar el formulario de registro (abajo) al evento como participante. Por el momento sólo puedes participar en el reto individualmente.
¿Qué debo tener?
Una computadora con un editor de código como Sublime Text, Visual Studio Code o cualquiera que sea de tu agrado. Adicional a esto, debes tener una conexión a internet.
¿Cómo me puedo preparar?
Una vez realices el registro como participante, podrás tendrás acceso de antemano a los archivos y las instrucciones para el evento. Esto incluye la guía de diseño y la base en HTML y CSS para el reto.
¿Cuánto tiempo tengo para el reto el día del evento?
Tendrás 30 minutos para completar el reto.
¿Será grabado el evento?
El evento será en vivo y lo estaremos transmitiendo por youtube live. (Puedes invitar a tus amig@s).
Como ves, es súper fácil participar y mostrar tus capacidades a los demás miembros de la comunidad.
Recuerda revisar la notificación en la carpeta de SPAM. Si llegas a tener problemas, puedes escribir directamente a jair@cooltimedia.com
El primer reto de Frontend de styleLeading fue todo un éxito.
Así es. Les quiero contar la experiencia en el primer reto de Frontend que organizamos junto a la comunidad de miembros de styleLeading. Si aún no conoces la comunidad, te invito a seguirla en la plataforma Meetup -> styleLeading en Meetup.
Antes, me gustaría comentarte el porqué de crear estos retos.
“Una nueva forma de aprender, una forma nueva de crecer.” Este es el lema que utilizamos para esta iniciativa. Al momento de escribir esta publicación tenemos más de 6 meses de haber creado el grupo en la plataforma de Meetup. Nació con la pandemia y es por esa razón que todos los eventos han sido virtuales a través del canal en Youtube de Cooltimedia Panamá. Si aún no estas suscrito, puedes hacerlo utilizando el siguiente enlace: Suscribirse al Canal de Cooltimedia.
Estamos enfocados en promover y comunicar las mejoras prácticas y nuevas actualizaciones que podemos utilizar al crear proyectos de diseño y desarrollo web tanto básicos como avanzados. Buscamos aportar al desarrollo profesional de cada uno de los miembros del grupo, y les puedo confirmar que estamos trabajando proyectos reales con algunos de los miembros.
Como podrán entender, todos nos beneficiamos si logramos desarrollar profesionales de alto nivel en nuestra región. Se crearán más y mejores proyectos web, con más planificación, y con un equipo de diseño y desarrollo de lo mejor a nivel mundial. Es un largo camino para lograr este objetivo, pero ya dimos el primer paso y no vamos a detenernos. Sabemos que no todos pueden pagar por cursos especializados, es por esta razón que todo lo que ofrecemos no tiene costo.
Si quieres formar parte de este movimiento, comunícate con nosotros a través de Meetup de styleLeading. Allí estaremos publicando todas las semanas los nuevos retos y meetups en los que puedes participar sin costos o compromisos.
Ahora les comparto el video del primer reto Frontend realizado por styleLeading en el canal de Youtube de Cooltimedia:
Un saludo especial a todos los participantes y gracias por sus buenas vibras y ganas de aprender y crecer.
Ya estamos listos para el Meetup #18 de Style Leading.
En está edición, vamos a trabajar con el API de Google Map y el código necesario para geolocalizar a los visitantes de nuestro proyecto.
Si no conoces mucho sobre el tema, no te preocupes, te lo explicamos en la sesión.
La geolocalización es la capacidad para obtener la ubicación geográfica real de un objeto, como un radar, un teléfono o una computadora conectada a Internet.
Vamos a responder las dudas y preguntas que tengas. No dejes de participar 🙂
En los detalles del evento se encuentra el enlace para el Meetup, utilizaremos Google Meet.
Dentro de los ejemplos utilizamos la etiqueta de video HTML5 para colocar un archivo en formato MP4 en la estructura de HMTL y también utilizamos en otra página un video insertado desde youtube.
Resumen del Proyecto: * Vamos a utilizar HTML5, CSS3 y Javascript. * Vamos a utilizar CSS Grid y Display Flex para crear la estructura y ajustar los textos al contenido de ambas páginas. * Vamos a ajustar nuestro layout para hacerlo 100% responsive, es decir, adaptado a cualquier tamaño de pantalla.
Si te interesa conocer un poca más sobre Grid y Flex, tengo otra publicación con detalles de CSS Grid, puedes verla en la siguiente dirección: CSS Grid Layout – Primeros Pasos
Suscríbete a nuestro canal en Youtube y dale click a la campanita para recibir notificaciones cuando tengamos nuevo contenido útil para mejorar tus habilidades como desarrollador Front-end. Recuerda que siempre hay algo nuevo por aprender. Para suscribirte puedes utilizar el siguiente enlace: Canal en Youtube
Puedes utilizar el siguiente formulario para recibir en tu correo electrónico el proyecto con los archivos HTML y CSS, y así poder realizar las modificaciones que necesites y así mejorar el proyecto.
No olvides visitar nuestro BLOG para ver más contenido interesante y también otros proyectos con los archivos HTML y CSS, y así poder realizar las modificaciones que necesites.
Me despido como siempre, deseándote los mejor en tus proyectos.
En esta ocasión, creamos un proyecto utilizando CSS Grid para la estructura de columnas y filas de nuestro header y Flex para ajustar el contenido a cada celda de nuestro contenedor Grid. También vimos cómo podemos modificar el Grid con media queries para diferentes tamaños de pantalla.
Este es el resumen del proyecto:
* Utilizamos HTML5 + CSS3.
* Utilizamos CSS Grid y Flex para crear la estructura y ajustes de contenido.
* Adaptamos nuestro layout para hacerlo 100% responsive, es decir, adaptado a cualquier tamaño de pantalla.
Puedes ver un video que preparé con algunos ejemplos útiles para comenzar hoy mismo a utilizar Grid en tu proyecto.
https://youtu.be/fefCiH1VL9E
Suscríbete a nuestro canal en Youtube y dale click a la campanita para recibir notificaciones cuando tengamos nuevo contenido útil para mejorar tus habilidades como desarrollador Front-end. Recuerda que siempre hay algo nuevo por aprender. Para suscribirte puedes utilizar el siguiente enlace: Canal en Youtube
Puedes utilizar el siguiente formulario para recibir en tu correo electrónico el proyecto con los archivos HTML y CSS, y así poder realizar las modificaciones que necesites y así mejorar el proyecto.
No olvides visitar nuestro BLOG para ver más contenido interesante y también otros proyectos con los archivos HTML y CSS, y así poder realizar las modificaciones que necesites.
Me despido como siempre, deseándote los mejor en tus proyectos.
En esta ocasión, cubriremos los conceptos básicos de CSS Grid, incluida una terminología básica y una sintaxis fácil para que puedas comenzar a utilizar Grid en tu proyecto hoy. Haremos un proyecto en vivo utilizando CSS Grid para aclarar las dudas que tengas sobre su implementación.
* Vamos a utilizar HTML5 + CSS3.
* Vamos agregar animación al proyecto utilizando Keyframes.
* Vamos a utilizar Grid y Flex para crear la estructura.
Antes de iniciar debemos conocer ¿Qué es CSS Grid?
Es un sistema bidimensional, es decir, nos permite trabajar con las filas (rows) y columnas (columns) que necesitemos para armar nuestro diseño. Para esto, debemos crear una etiqueta en nuestro archivo HTML que nos sirva de contenedor (Grid Container) para nuestra cuadrícula donde iremos colocando nuestro contenido (Grid Items).
Para definir el contenido principal de nuestra sección utilizamos:
display: grid;
Para definir las filas y columnas dentro del mismo selector utilizamos:
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
Definimos las filas y columnas de nuestra cuadrícula separando los valores con espacios, 1fr quiere decir una fracción, es decir, en el ejemplo son dos columnas o dos fracciones y dos filas o fracciones. Los valores representan el tamaño del Grid Track y el espacio entre ellos representa la línea de la cuadrícula (grid line).
El ejemplo quedaría así:
.main-container{ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;} Pruébalo en tu editor de código favorito y mira el resultado. Si prefieres, puedes ver un video que preparé con algunos ejemplos útiles para comenzar hoy mismo a utilizar Grid en tu proyecto.
Suscríbete a nuestro canal en Youtube y dale click a la campanita para recibir notificaciones cuando tengamos nuevo contenido útil para mejorar habilidades con desarrollador Frontend. Recuerda que siempre hay algo nuevo por aprender, para suscribirte puedes utilizar el siguiente enlace: Canal en Youtube
Puedes utilizar el siguiente formulario para recibir en tu correo electrónico el proyecto con los archivos HTML y CSS, y así poder realizar las modificaciones que necesites y así mejorar el proyecto.
No olvides visitar nuestro BLOG para ver mas contenido interesante y también otros proyectos con los archivos HTML y CSS, y así poder realizar las modificaciones que necesites.
Me despido como siempre, deseándote los mejor en tus proyectos.
Software requerido para desarrollo web: ¿Qué necesitamos para que los procesos funcionen correctamente, y así brindar una buena experiencia?
¿Qué es el internet?
El origen de internet se remonta al año 1969, con la primera conexión entre computadoras, se llamó ARPANET.
Hoy se puede definir Internet como un conjunto descentralizado de redes de comunicación interconectadas que utilizan protocolos TCP/IP, y componen una red lógica de alcance mundial.
En 1991 Tim Berners-Lee y Robert Cailliau, publicaron una propuesta formal de un sistema de distribución de documentos de hipertexto y accesibles a través de Internet llamado WWW (World Wide Web).
Con esto inicia la creación de páginas web, que se pueden visualizar a través de navegadores que interpretan la estructura de etiquetas HTML (HyperText Markup Language).
Arquitectura Cliente / Servidor
Cuando navegamos en internet a través de diferentes sitios web, solicitamos recursos, imágenes, videos y archivos. Los equipos que tienen esos recursos disponibles para nosotros son conocidos como servidores, por el otro lado estamos nosotros los que solicitamos esos recursos, somos los clientes.
Servidor de Nombres de Dominio
Todos los equipos en internet tienen una dirección IP única, es un número que identifica de manera lógica y jerárquica, a una Interfaz en red. Existen diferentes versiones de direcciones IP, en nuestro caso puede ser (27.451.25.75), ahora es difícil memorizar esa dirección para poder ver nuestro sitio web de Cooltimedia.
Por está razón de se creó en servicio de DNS (Domain Name Server), esto permite asociar un nombre a una dirección IP existente, es decir, que al colocar en el navegador www.cooltimedia.com, el navegador consulta a los servidores DNS por el IP asociado a ese nombre y así encuentra nuestro servidor web con el sitio listo para ser visitado.
Profesionales en Desarrollo Web
Cuando utilizamos una página web o aplicación web, necesitamos que varias cosas funcionen muy bien para brindar una buena experiencia a los visitantes. Actualmente, esta responsabilidad recae en dos roles importantes.
Desarrollador Front-End
Su responsabilidad es crear y mejorar la experiencia que tenemos cuando navegamos en un sitio web, es decir, las animaciones, los colores, las tipografías y todos los elementos con los que interactué un visitante.
Desarrollador Back-End
Es responsable de tener todos los servicios en el servidor disponibles, iniciando con la conectividad del servidor, la base de datos y todo lo que funciona operar del lado del servidor.
Luego de esta breve explicación podemos ver las herramientas o software que podemos utilizar para desarrollar una página web. Una página web se comente de tres tipos de archivos principales:
Archivos HTML (HyperText Markup Language)
Son los archivos con extensión *.html o *htm, están compuestos de etiquetas que nos permite crear la estructura de nuestras páginas web.
Archivos CSS (Cascading Style Sheets)
Son archivos con extensión *.css, nos permiten asignar estilo a las etiquetas y clases de nuestro archivo HTML, la tipografía, los colores, tamaños de los elementos y mucho más, en resumen, nos permite hacer que nuestros sitios web sean más bonitos.
Archivos Javascript
Son los archivos con extensión *.js, javascript es un lenguaje de programación interpretado que nos permiten agregar funcionalidad a nuestras páginas web y es muy utilizado para enviar y recibir información del servidor web.
Les dejo el video de nuestro canal en Youtube hablando sobre este tema.
Te invito a que te des una vuelta por el canal de Youtube y también puedes visitar nuestro BLOG para ver más contenido interesante. Puedes contactar conmigo por correo electrónico.
Para el desarrollo del todo el proyecto solo utilizamos HTML5 y CSS3 solamente, hay que tomar en cuenta en el diseñador web de esta landing page quería mostrar un texto descriptivo o tagline de la aplicación y la imagen con las pantallas con la interfaz del app.
Como siempre les dejo los pasos del proyecto y un poco más abajo el enlace del video en Youtube si les interesa conocer cómo desarrollar el proyecto desde cero.
Paso #1: Estructura HTML5.
■ Lenguajes de etiquetas bajo las especificaciones de HTML5.
Paso #2: Creación de estilos con lenguaje CSS3.
■ Animación con Keyframes y uso de lenguaje CSS3 para los colores, bordes y demás detalles importantes.
Te cuento que puedes unirte a nuestro grupo de Meetup styleLeading donde hacemos proyectos en vivo y conversamos sobre diseño y desarrollo de sitios web: https://www.meetup.com/es/STYLE-LEADING/
¡Espero que les guste el proyecto! Te invito a que te des una vuelta por el canal de Youtube y también puedes visitar nuestro BLOG para ver más contenido interesante. Puedes contactar conmigo por correo electrónico, tenemos un repositorio en GitHubdel proyecto con sus archivos HTML5, CSS y JavaScript, y así poder realizar las modificaciones necesarias y entender con más detalle el código utilizado.
Me despido como siempre, deseándote los mejor en tus proyectos.
Para dudas, comentarios y sugerencias me puedes contactar a: jair@cooltimedia.com
Creando un página de login con CSS3 y HTML5. Para el proyecto de esta semana crearemos una página de login o entrada a una aplicación web, utilizamos keyframes para crear una animación a cada uno de los elementos dentro del formulario web, adicional utilizamos google fonts, bootstrap y font-awesome.
Durante el desarrollo del todo el proyecto utilizamos HTML5 y CSS3 únicamente, para las animaciones los keyframes funcionan muy bien y nos permiten crear proyectos web con un estilo muy profesional.
Para crear una página de login como la que desarrollamos en este proyecto debes tener los conocimientos básicos en HTML5 para la estructura del proyecto y CSS3 para aplicar el diseño.
Las animaciones que utilizamos son básicas, pero como podrás observar crean un efecto muy profesional. Es un punto de partida o referencia para tus proyectos.
Les dejo los pasos del proyecto y más abajo el enlace del video en Youtube si les interesa conocer como desarrollar el proyecto desde cero.
Paso #1: Estructura HTML5
■ Lenguajes de etiquetas,CSS de Bootstrap y iconos de FontAwesome.
Paso #2: Creación de estilos con lenguaje CSS3
■ Uso de Display: Flex para la los ajustes en la estructura, animación con Keyframes y uso de lenguaje CSS3 para los colores, bordes y demás detalles importantes.
Mira el Video de Nuestro Canal en Youtube
Les dejo este vídeo donde explico en detalle el proyecto donde utilizamos el teclado para interactuar con el famoso personaje de Mario Bros.
Puede unirte a nuestro grupo de Meetup styleLeading donde hacemos proyectos en vivo y conversamos sobre diseño y desarrollo de sitios web: https://www.meetup.com/es/STYLE-LEADING/
¡Espero que les guste el proyecto! Te invito a que te des una vuelta por el canal de Youtube y también puedes visitar nuestro BLOG para ver más contenido interesante. Puedes contactar conmigo por correo electrónico, tenemos un repositorio en GitHubdel proyecto con sus archivos HTML5, CSS y JavaScript, y así poder realizar las modificaciones necesarias y entender con más detalle el código utilizado.
Me despido como siempre, deseándote los mejor en tus proyectos.
Para dudas, comentarios y sugerencias me puedes contactar a: jair@cooltimedia.com
