TEMA 7 BLOQUE III
APLICACIONES WEB. Desarrollo web front-end y en servidor. multiplataforma y multidispositivo. Lenguajes: HTML, XML y sus derivaciones. Navegadores y lenguajes de programación web. Lenguajes de script.
EMPEZAR
Daniel Villar Fernández Email:danipreparadortic@gmail.comTelegram: @danivf16
ÍNDICE
Navegadores y lenguajes de programación web
Aplicaciones web
Desarrollo web front-end y en servidor (backend)
Lenguajes de script.
Lenguajes: HTML, XML
APLICACIONES WEB
Las aplicaciones web son programas que se ejecutan en un navegador web y se acceden a través de Internet.
01.
A diferencia del software tradicional instalado en un dispositivo, estas aplicaciones se sirven desde un servidor remoto y se renderizan en el cliente (el navegador).
02.
Hoy en día, una aplicación web no es solo "una web", es un sistema distribuido bajo la arquitectura Cliente-Servidor.
03.
OBJETIVO DE ESTE TEMA
Cómo interactúan el navegador (conocido como Front-end) y el servidor (conocido como Back-end),
01.
Cómo se adapta el contenido a cualquier dispositivo (Responsive /Multiplataforma)
02.
Qué lenguajes permiten este proceso (HTML, CSS, JS (JavaScript), PHP, etc.).
03.
CONCEPTOS PREVIOS
Antes de comenzar con los apartados del tema, es preciso aprender ciertos conceptos que van a aparecer, para que podamos relacionarlos de la forma correcta.
+INFO
+INFO
SEO
DOM (“Documento Object Model”
+INFO
+INFO
BOM (“Browser Object Model”)
RENDERIZADO
+INFO
+INFO
MPA (Multi-Page Application
W3C (World Wide Web Consortium)
CONCEPTOS PREVIOS
Antes de comenzar con los apartados del tema, es preciso aprender ciertos conceptos que van a aparecer, para que podamos relacionarlos de la forma correcta.
SPA
+INFO
+INFO
DISEÑO ADAPTATIVO
+INFO
PWA
+INFO
DISEÑO RESPONSIVO
Desarrollo web front-end y back-end
Comprender qué se hace en cada parte es fundamental para relacionar conceptos del diseño de aplicaciones web.
Concepto Clave: El dominio del navegador.
Estos lenguajes determinan la experiencia visual y la interactividad.
Todo lo que el usuario "toca" en una pantalla web vive aquí.
Front-End
Lenguajes y Tecnologías Clave
Hay 3 elementos básicos en la parte del cliente (frontend ó navegador)
Es el esqueleto o estructura de la página. Define elementos como párrafos, encabezados, imágenes y formularios.
HTML (HyperText Markup Language)
Controla el estilo, el diseño (layout), los colores y las tipografías, haciendo que el HTML sea visualmente atractivo.
CSS (Cascading Style Sheets)
Es el cerebro que dota de interactividad. Permite manipular el contenido (DOM), responder a eventos del usuario (clics, desplazamiento) y comunicarse con el servidor de forma asíncrona (AJAX).
JavaScript
Front-End
HTML (HyperText Markup Language)
Front-End
HTML (HyperText Markup Language)
Antes del "renderizado" o los "componentes", existe una verdad fundamental: el navegador necesita un esqueleto. Sin importar la complejidad del código, el resultado final debe ser siempre esta estructura.
Front-End
HTML (HyperText Markup Language)
¿Por Qué No Escribimos HTML a Mano?
En el desarrollo moderno, la demanda de interactividad y escala hace imposible escribir línea por línea. Necesitamos automatización.
FRAMEWORKS
Front-End
HTML (HyperText Markup Language)
Front-End
HTML (HyperText Markup Language)
Frameworks y Librerías Front-End
React es una librería y Next.js es un framework
Compilador Front-End
Vanilla JS es simplemente JavaScript estándar, el lenguaje como viene "de fábrica" en los navegadores
Info
Compilador Front-End
Frameworks Front-End: Vue.js
Frameworks Front-End: Angular
Angular tiene una estructura estricta y tiene Typescript nativo para prevenir errores.
Frameworks Front-End: Astro
para crear sitios de contenido y blogs
Lenguajes en el front-end
Javascript para front-end, typescript para backend
Ejemplo de código Javascript
Ejemplo de código Javascript
Ejemplo de código Javascript
Front-end: resumen frameworks y librerías
Conclusión: Estado del front-end
Back-end
Back-end (servidor)
Es la lógica de negocio, el procesamiento de datos y la conexión con la base de datos (persistencia => almacenamiento de datos). El usuario no lo ve, pero lo usa cada vez que solicita información. Es lo que conocemos como “la parte del servidor”.
Esta arquitectura se basa en peticiones (Requests) y respuestas (Responses) a través del protocolo HTTP/HTTPS.
Back-end. Lenguajes y Entornos Clave
Velocidad vs Rendimiento
Back-end. Lenguajes
Back-end. Lenguajes
Back-end. Lenguajes
Back-end. Entorno de ejecución Node.js
NODE.JS: Es un entorno de ejecución (runtime) para JavaScript fuera del navegador. Node.js no es un framework ni una librería.
NODE.JS: Esta es una distinción fundamental. Mientras que React o Express son frameworks/librerías (código que tú usas), Node.js es la plataforma subyacente que permite ejecutar ese código de JavaScript en el lado del servidor.
Back-end. Entorno de ejecución Node.js
NODE.JS: Para entender mejor las diferencias, aquí tienes una tabla comparativa:
Back-end. Frameworks Express.js y Nest.js
Express.JS: es un framework minimalista y flexible para Node.js diseñado específicamente para construir aplicaciones web y APIs del lado del servidor de manera rápida y sencilla.
Nest.js: es un framework progresivo y opinado para construir aplicaciones del lado del servidor (backend) eficientes y escalables con Node.js.El término "opinado" quiere decir que te da una arquitectura y convenciones específicas que debes seguir.
Back-end. Frameworks Express.js y Nest.js
Back-end. Frameworks para Python
Back-end. Frameworks para Java
Back-end. Frameworks para Php
Back-end. Frameworks para .NET
Back-end. Ruby on Nails
Back-end. Matriz de decisión Frameworks
Back-end. Resumen de frameworks
Back-end. Tendencias de futuro.
HTML
HTML (HyperText Markup Language) es un lenguaje de marcado de propósito específico para crear páginas web.
Sus características definitorias son:
1. No es un lenguaje de programación: No tiene lógica (bucles, condiciones). Describe estructura y contenido mediante etiquetas que definen elementos (párrafos, títulos, imágenes).
2. Basado en etiquetas y elementos: Se escribe usando etiquetas entre corchetes angulares (<etiqueta>). La mayoría tiene una de apertura y una de cierre (<p>contenido</p>).
3. Semántico: Las etiquetas dan significado al contenido. <nav> indica navegación, <article> un artículo independiente. Esto es crucial para accesibilidad y SEO.
HTML
HTML (HyperText Markup Language) es un lenguaje de marcado de propósito específico para crear páginas web.
Sus características definitorias son:
4. Jerárquico y anidado: Los elementos se anidan dentro de otros, formando una estructura de árbol (el DOM). 5. Independiente de la apariencia visual: HTML se ocupa del contenido. El estilo (colores, fuentes, diseño) es responsabilidad exclusiva de CSS.
HTML: EJemplo de código
HTML: EJemplo de código
XML
XML (eXtensible Markup Language) es un metalenguaje de marcado diseñado para almacenar y transportar datos de forma estructurada, legible tanto por máquinas como por humanos.
Sus características definitorias son:
XML
Sus características definitorias son:
XML
Sus características definitorias son:
XML: comparativa con html
XML: EJEMPLO DE CÓDIGO
CSS "Cascading Style Sheets)."
CSS es un lenguaje, pero no de programación. Es un lenguaje declarativo de hojas de estilo (Cascading Style Sheets).
Mientras un lenguaje de programación (como JavaScript) define lógica (condicionales, bucles, funciones), CSS solo declara propiedades visuales: "este elemento debe ser rojo y tener un margen de 10px". No tiene lógica algorítmica.
CSS "Cascading Style Sheets)."
CSS es el lenguaje que da vida, color, diseño y disposición a la web. Sin él, toda la web se vería como un documento de texto plano.
CSS "Cascading Style Sheets."
CSS "Cascading Style Sheets."
CSS "Cascading Style Sheets."
CSS "Cascading Style Sheets."
NAVEGADORES WEB
El navegador moderno ha evolucionado hasta convertirse en el sistema operativo de facto de la web, encargado de implementar estándares globales en un entorno seguro y eficiente.
NAVEGADORES WEB: GOOGLE CHROME
NAVEGADORES WEB: MICROSOFT EDGE
NAVEGADORES WEB: APPLE SAFARI
NAVEGADORES WEB: MOZILLA FIREFOX
NAVEGADORES WEB: LADYBIRD
Es un nuevo navegador web de código abierto, diseñado para ser totalmente independiente y no basado en motores populares como Blink (Chromium) o Gecko (Firefox). Desarrollado desde cero con su propio motor, busca adherirse a los estándares web, con un enfoque en la privacidad, rendimiento y un desarrollo sin fines de lucro.
NAVEGADORES WEB: CUADRO RESUMEN
LENGUAJES DE PROGRAMACIÓN WEB
LENGUAJES DE PROGRAMACIÓN WEB
LENGUAJES DE PROGRAMACIÓN WEB
VELOCIDAD DESARROLLO
RENDIMIENTO BRUTO
MVPs y SAAs
PYMES Y CMS
LENGUAJES DE PROGRAMACIÓN WEB
DATOS E INTELIGENCIA ARTIFICIAL
LENGUAJES DE PROGRAMACIÓN WEB
INFRAESTRUCTURA EN LA NUBE NATIVA: GO
ES LA OPCIÓN PARA MICROSERVICIOS Y APIS DE ALTO TRÁFICO
LENGUAJES DE PROGRAMACIÓN WEB
SISTEMAS CRÍTICOS Y SEGURIDAD DE MEMORIA
C Y C++ SE DESACONSEJAN PARA ESTOS SISTEMAS
LENGUAJES DE PROGRAMACIÓN WEB
PARA MÓVILES
RUTA NATIVA
RUTA MULTIPLATAFORMA
FLUTTER SE CONSOLIDA PARA APLICACIONES DE ALTO RENDIMIENTO
LENGUAJES DE PROGRAMACIÓN WEB
PARA MÓVILES
RUTA NATIVA
RUTA MULTIPLATAFORMA
FLUTTER SE CONSOLIDA PARA APLICACIONES DE ALTO RENDIMIENTO
LENGUAJES DE PROGRAMACIÓN WEB
MATRIZ DE DECISIÓN: RENDIMIENTO VS VELOCIDAD
DEPENDE DEL OBJETIVO SE ELEGIRÁ UN LENGUAJE U OTRO.
LENGUAJES DE PROGRAMACIÓN WEB
¿CUÁL ES EL OBJETIVO?
EL OBJETIVO MARCA LA ELECCIÓN
LENGUAJES DE SCRIPTING.
LENGUAJES DE SCRIPTING.
LENGUAJES DE SCRIPTING.
LENGUAJES DE SCRIPTING.
LENGUAJES DE SCRIPTING.
LENGUAJES DE SCRIPTING.
LENGUAJES DE SCRIPTING.
LENGUAJES DE SCRIPTING.
LENGUAJES DE SCRIPTING.
¡YA HEMOS LLEGADO AL FINAL DEL TEMA!
¡MUCHAS GRACIAS!
Daniel Villar Fernández Email: danipreparadortic@gmail.com Telegram: @Danivf16
MPA (Multi-Page Application).
Es el modelo de página web clásico. Cada vez que haces clic, el navegador recarga toda la página (ej. Amazon clásico, webs institucionales). Se suele usar para SEO (posicionamiento en los buscadores) fuerte y contenido estático.
W3C (World Wide Web Consortium)
- El W3C (World Wide Web Consortium) es una comunidad internacional que desarrolla estándares que aseguran el crecimiento de la Web a largo plazo.
- Entre los estándares creados por este consorcio destacan:
- HTML5: Proporciona la estructura semántica del contenido. Esta versión añade elementos como: <header>, <nav>, <main>, <article>, etc.
- CSS3 (“Cascading Style Sheets”): Son hojas de estilo en cascada y sirven para dar forma, estilo y colores a una página web.
Concepto de SEO "Search Engine Optimization ".
SEO (Search Engine Optimization u Optimización para Motores de Búsqueda) se refiere al conjunto de técnicas, mejores prácticas y modificaciones técnicas que los desarrolladores implementan en un sitio web para mejorar su visibilidad en los resultados orgánicos (no pagados) de motores de búsqueda como Google, Bing….
DOM (“Documento Object Model”
El Modelo de Objetos del Documento (DOM), permite ver el mismo documento HTML de otra manera, describiendo el contenido del documento como un árbol de nodos, sobre los que un programa de Javascript puede interactuar.
El DOM (Document Object Model) es una interfaz de programación (API) que permite a los scripts actualizar el contenido, la estructura y el estilo de un documento (HTML y XML) mientras este se está visualizando en el navegador.
Info
Diseño responsivo.
Concepto de diseño responsivo: también se conoce como responsive design, es un enfoque de diseño web que busca que las páginas se adapten automáticamente al tamaño y las características del dispositivo desde el que se visualizan (computadoras, tablets, smartphones, etc.).
Tiene un color adecuado a su tema.
Hacer un diseño adaptativo es hacer páginas distintas según el tamaño de la pantalla.
- La ventaja de las webs adaptativas es que en la versión móvil solo se cargan las cosas que se necesitan para el móvil además de que está hecha pensando en móvil.
- El inconveniente es que hay que desarrollar dos páginas.
BOM (“Browser Object Model”)
Objetos externos al documento web en sí, como la ventana del navegador y la pantalla del equipo.
El BOM es una colección de objetos que dan acceso al navegador y a la pantalla del ordenador.
PWA "Progressive Web Apps "
Las PWA (por sus siglas en inglés, Progressive Web Apps o Aplicaciones Web Progresivas) son una evolución de las aplicaciones web que combinan lo mejor de dos mundos: la accesibilidad de una web y la funcionalidad de una app nativa. Básicamente, son páginas web que, gracias a tecnologías modernas, pueden "instalarse" en tu dispositivo (móvil u ordenador) y comportarse casi igual que una aplicación que descargas de la App Store o Google Play, pero sin ocupar tanto espacio ni requerir actualizaciones manuales. Ejemplos: Spotify, DropBox, Pinterest...
SPA (Single Page Application).
- Carga una sola vez y actualiza el contenido dinámicamente sin recargar (ej. Gmail, Trello). - Se usa para aplicaciones interactivas complejas.
CONCEPTO DE RENDERIZADO
El renderizado es el proceso de convertir código (HTML, CSS, JavaScript) en contenido visual e interactivo que el usuario puede ver y usa.
- Dicho de otra forma, es el proceso mediante el cual un navegador transforma el código que recibe (HTML, CSS, JavaScript) en los píxeles visuales e interactivos que vemos en la pantalla. Es el "momento de la verdad" donde el código se convierte en experiencia de usuario. - Lo veremos de forma más detallada en otro apartado de la presentación.
Tema 7 Bloque III
Daniel
Created on February 4, 2026
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Tech Presentation Mobile
View
Geniaflix Presentation
View
Vintage Mosaic Presentation
View
Shadow Presentation
View
Newspaper Presentation
View
Zen Presentation
View
Audio tutorial
Explore all templates
Transcript
TEMA 7 BLOQUE III
APLICACIONES WEB. Desarrollo web front-end y en servidor. multiplataforma y multidispositivo. Lenguajes: HTML, XML y sus derivaciones. Navegadores y lenguajes de programación web. Lenguajes de script.
EMPEZAR
Daniel Villar Fernández Email:danipreparadortic@gmail.comTelegram: @danivf16
ÍNDICE
Navegadores y lenguajes de programación web
Aplicaciones web
Desarrollo web front-end y en servidor (backend)
Lenguajes de script.
Lenguajes: HTML, XML
APLICACIONES WEB
Las aplicaciones web son programas que se ejecutan en un navegador web y se acceden a través de Internet.
01.
A diferencia del software tradicional instalado en un dispositivo, estas aplicaciones se sirven desde un servidor remoto y se renderizan en el cliente (el navegador).
02.
Hoy en día, una aplicación web no es solo "una web", es un sistema distribuido bajo la arquitectura Cliente-Servidor.
03.
OBJETIVO DE ESTE TEMA
Cómo interactúan el navegador (conocido como Front-end) y el servidor (conocido como Back-end),
01.
Cómo se adapta el contenido a cualquier dispositivo (Responsive /Multiplataforma)
02.
Qué lenguajes permiten este proceso (HTML, CSS, JS (JavaScript), PHP, etc.).
03.
CONCEPTOS PREVIOS
Antes de comenzar con los apartados del tema, es preciso aprender ciertos conceptos que van a aparecer, para que podamos relacionarlos de la forma correcta.
+INFO
+INFO
SEO
DOM (“Documento Object Model”
+INFO
+INFO
BOM (“Browser Object Model”)
RENDERIZADO
+INFO
+INFO
MPA (Multi-Page Application
W3C (World Wide Web Consortium)
CONCEPTOS PREVIOS
Antes de comenzar con los apartados del tema, es preciso aprender ciertos conceptos que van a aparecer, para que podamos relacionarlos de la forma correcta.
SPA
+INFO
+INFO
DISEÑO ADAPTATIVO
+INFO
PWA
+INFO
DISEÑO RESPONSIVO
Desarrollo web front-end y back-end
Comprender qué se hace en cada parte es fundamental para relacionar conceptos del diseño de aplicaciones web.
Concepto Clave: El dominio del navegador.
Estos lenguajes determinan la experiencia visual y la interactividad.
Todo lo que el usuario "toca" en una pantalla web vive aquí.
Front-End
Lenguajes y Tecnologías Clave
Hay 3 elementos básicos en la parte del cliente (frontend ó navegador)
Es el esqueleto o estructura de la página. Define elementos como párrafos, encabezados, imágenes y formularios.
HTML (HyperText Markup Language)
Controla el estilo, el diseño (layout), los colores y las tipografías, haciendo que el HTML sea visualmente atractivo.
CSS (Cascading Style Sheets)
Es el cerebro que dota de interactividad. Permite manipular el contenido (DOM), responder a eventos del usuario (clics, desplazamiento) y comunicarse con el servidor de forma asíncrona (AJAX).
JavaScript
Front-End
HTML (HyperText Markup Language)
Front-End
HTML (HyperText Markup Language)
Antes del "renderizado" o los "componentes", existe una verdad fundamental: el navegador necesita un esqueleto. Sin importar la complejidad del código, el resultado final debe ser siempre esta estructura.
Front-End
HTML (HyperText Markup Language)
¿Por Qué No Escribimos HTML a Mano?
En el desarrollo moderno, la demanda de interactividad y escala hace imposible escribir línea por línea. Necesitamos automatización.
FRAMEWORKS
Front-End
HTML (HyperText Markup Language)
Front-End
HTML (HyperText Markup Language)
Frameworks y Librerías Front-End
React es una librería y Next.js es un framework
Compilador Front-End
Vanilla JS es simplemente JavaScript estándar, el lenguaje como viene "de fábrica" en los navegadores
Info
Compilador Front-End
Frameworks Front-End: Vue.js
Frameworks Front-End: Angular
Angular tiene una estructura estricta y tiene Typescript nativo para prevenir errores.
Frameworks Front-End: Astro
para crear sitios de contenido y blogs
Lenguajes en el front-end
Javascript para front-end, typescript para backend
Ejemplo de código Javascript
Ejemplo de código Javascript
Ejemplo de código Javascript
Front-end: resumen frameworks y librerías
Conclusión: Estado del front-end
Back-end
Back-end (servidor)
Es la lógica de negocio, el procesamiento de datos y la conexión con la base de datos (persistencia => almacenamiento de datos). El usuario no lo ve, pero lo usa cada vez que solicita información. Es lo que conocemos como “la parte del servidor”.
Esta arquitectura se basa en peticiones (Requests) y respuestas (Responses) a través del protocolo HTTP/HTTPS.
Back-end. Lenguajes y Entornos Clave
Velocidad vs Rendimiento
Back-end. Lenguajes
Back-end. Lenguajes
Back-end. Lenguajes
Back-end. Entorno de ejecución Node.js
NODE.JS: Es un entorno de ejecución (runtime) para JavaScript fuera del navegador. Node.js no es un framework ni una librería.
NODE.JS: Esta es una distinción fundamental. Mientras que React o Express son frameworks/librerías (código que tú usas), Node.js es la plataforma subyacente que permite ejecutar ese código de JavaScript en el lado del servidor.
Back-end. Entorno de ejecución Node.js
NODE.JS: Para entender mejor las diferencias, aquí tienes una tabla comparativa:
Back-end. Frameworks Express.js y Nest.js
Express.JS: es un framework minimalista y flexible para Node.js diseñado específicamente para construir aplicaciones web y APIs del lado del servidor de manera rápida y sencilla.
Nest.js: es un framework progresivo y opinado para construir aplicaciones del lado del servidor (backend) eficientes y escalables con Node.js.El término "opinado" quiere decir que te da una arquitectura y convenciones específicas que debes seguir.
Back-end. Frameworks Express.js y Nest.js
Back-end. Frameworks para Python
Back-end. Frameworks para Java
Back-end. Frameworks para Php
Back-end. Frameworks para .NET
Back-end. Ruby on Nails
Back-end. Matriz de decisión Frameworks
Back-end. Resumen de frameworks
Back-end. Tendencias de futuro.
HTML
HTML (HyperText Markup Language) es un lenguaje de marcado de propósito específico para crear páginas web.
Sus características definitorias son:
1. No es un lenguaje de programación: No tiene lógica (bucles, condiciones). Describe estructura y contenido mediante etiquetas que definen elementos (párrafos, títulos, imágenes). 2. Basado en etiquetas y elementos: Se escribe usando etiquetas entre corchetes angulares (<etiqueta>). La mayoría tiene una de apertura y una de cierre (<p>contenido</p>). 3. Semántico: Las etiquetas dan significado al contenido. <nav> indica navegación, <article> un artículo independiente. Esto es crucial para accesibilidad y SEO.
HTML
HTML (HyperText Markup Language) es un lenguaje de marcado de propósito específico para crear páginas web.
Sus características definitorias son:
4. Jerárquico y anidado: Los elementos se anidan dentro de otros, formando una estructura de árbol (el DOM). 5. Independiente de la apariencia visual: HTML se ocupa del contenido. El estilo (colores, fuentes, diseño) es responsabilidad exclusiva de CSS.
HTML: EJemplo de código
HTML: EJemplo de código
XML
XML (eXtensible Markup Language) es un metalenguaje de marcado diseñado para almacenar y transportar datos de forma estructurada, legible tanto por máquinas como por humanos.
Sus características definitorias son:
XML
Sus características definitorias son:
XML
Sus características definitorias son:
XML: comparativa con html
XML: EJEMPLO DE CÓDIGO
CSS "Cascading Style Sheets)."
CSS es un lenguaje, pero no de programación. Es un lenguaje declarativo de hojas de estilo (Cascading Style Sheets).
Mientras un lenguaje de programación (como JavaScript) define lógica (condicionales, bucles, funciones), CSS solo declara propiedades visuales: "este elemento debe ser rojo y tener un margen de 10px". No tiene lógica algorítmica.
CSS "Cascading Style Sheets)."
CSS es el lenguaje que da vida, color, diseño y disposición a la web. Sin él, toda la web se vería como un documento de texto plano.
CSS "Cascading Style Sheets."
CSS "Cascading Style Sheets."
CSS "Cascading Style Sheets."
CSS "Cascading Style Sheets."
NAVEGADORES WEB
El navegador moderno ha evolucionado hasta convertirse en el sistema operativo de facto de la web, encargado de implementar estándares globales en un entorno seguro y eficiente.
NAVEGADORES WEB: GOOGLE CHROME
NAVEGADORES WEB: MICROSOFT EDGE
NAVEGADORES WEB: APPLE SAFARI
NAVEGADORES WEB: MOZILLA FIREFOX
NAVEGADORES WEB: LADYBIRD
Es un nuevo navegador web de código abierto, diseñado para ser totalmente independiente y no basado en motores populares como Blink (Chromium) o Gecko (Firefox). Desarrollado desde cero con su propio motor, busca adherirse a los estándares web, con un enfoque en la privacidad, rendimiento y un desarrollo sin fines de lucro.
NAVEGADORES WEB: CUADRO RESUMEN
LENGUAJES DE PROGRAMACIÓN WEB
LENGUAJES DE PROGRAMACIÓN WEB
LENGUAJES DE PROGRAMACIÓN WEB
VELOCIDAD DESARROLLO
RENDIMIENTO BRUTO
MVPs y SAAs
PYMES Y CMS
LENGUAJES DE PROGRAMACIÓN WEB
DATOS E INTELIGENCIA ARTIFICIAL
LENGUAJES DE PROGRAMACIÓN WEB
INFRAESTRUCTURA EN LA NUBE NATIVA: GO
ES LA OPCIÓN PARA MICROSERVICIOS Y APIS DE ALTO TRÁFICO
LENGUAJES DE PROGRAMACIÓN WEB
SISTEMAS CRÍTICOS Y SEGURIDAD DE MEMORIA
C Y C++ SE DESACONSEJAN PARA ESTOS SISTEMAS
LENGUAJES DE PROGRAMACIÓN WEB
PARA MÓVILES
RUTA NATIVA
RUTA MULTIPLATAFORMA
FLUTTER SE CONSOLIDA PARA APLICACIONES DE ALTO RENDIMIENTO
LENGUAJES DE PROGRAMACIÓN WEB
PARA MÓVILES
RUTA NATIVA
RUTA MULTIPLATAFORMA
FLUTTER SE CONSOLIDA PARA APLICACIONES DE ALTO RENDIMIENTO
LENGUAJES DE PROGRAMACIÓN WEB
MATRIZ DE DECISIÓN: RENDIMIENTO VS VELOCIDAD
DEPENDE DEL OBJETIVO SE ELEGIRÁ UN LENGUAJE U OTRO.
LENGUAJES DE PROGRAMACIÓN WEB
¿CUÁL ES EL OBJETIVO?
EL OBJETIVO MARCA LA ELECCIÓN
LENGUAJES DE SCRIPTING.
LENGUAJES DE SCRIPTING.
LENGUAJES DE SCRIPTING.
LENGUAJES DE SCRIPTING.
LENGUAJES DE SCRIPTING.
LENGUAJES DE SCRIPTING.
LENGUAJES DE SCRIPTING.
LENGUAJES DE SCRIPTING.
LENGUAJES DE SCRIPTING.
¡YA HEMOS LLEGADO AL FINAL DEL TEMA!
¡MUCHAS GRACIAS!
Daniel Villar Fernández Email: danipreparadortic@gmail.com Telegram: @Danivf16
MPA (Multi-Page Application).
Es el modelo de página web clásico. Cada vez que haces clic, el navegador recarga toda la página (ej. Amazon clásico, webs institucionales). Se suele usar para SEO (posicionamiento en los buscadores) fuerte y contenido estático.
W3C (World Wide Web Consortium)
- El W3C (World Wide Web Consortium) es una comunidad internacional que desarrolla estándares que aseguran el crecimiento de la Web a largo plazo. - Entre los estándares creados por este consorcio destacan: - HTML5: Proporciona la estructura semántica del contenido. Esta versión añade elementos como: <header>, <nav>, <main>, <article>, etc. - CSS3 (“Cascading Style Sheets”): Son hojas de estilo en cascada y sirven para dar forma, estilo y colores a una página web.
Concepto de SEO "Search Engine Optimization ".
SEO (Search Engine Optimization u Optimización para Motores de Búsqueda) se refiere al conjunto de técnicas, mejores prácticas y modificaciones técnicas que los desarrolladores implementan en un sitio web para mejorar su visibilidad en los resultados orgánicos (no pagados) de motores de búsqueda como Google, Bing….
DOM (“Documento Object Model”
El Modelo de Objetos del Documento (DOM), permite ver el mismo documento HTML de otra manera, describiendo el contenido del documento como un árbol de nodos, sobre los que un programa de Javascript puede interactuar. El DOM (Document Object Model) es una interfaz de programación (API) que permite a los scripts actualizar el contenido, la estructura y el estilo de un documento (HTML y XML) mientras este se está visualizando en el navegador.
Info
Diseño responsivo.
Concepto de diseño responsivo: también se conoce como responsive design, es un enfoque de diseño web que busca que las páginas se adapten automáticamente al tamaño y las características del dispositivo desde el que se visualizan (computadoras, tablets, smartphones, etc.).
Tiene un color adecuado a su tema.
Hacer un diseño adaptativo es hacer páginas distintas según el tamaño de la pantalla. - La ventaja de las webs adaptativas es que en la versión móvil solo se cargan las cosas que se necesitan para el móvil además de que está hecha pensando en móvil. - El inconveniente es que hay que desarrollar dos páginas.
BOM (“Browser Object Model”)
Objetos externos al documento web en sí, como la ventana del navegador y la pantalla del equipo. El BOM es una colección de objetos que dan acceso al navegador y a la pantalla del ordenador.
PWA "Progressive Web Apps "
Las PWA (por sus siglas en inglés, Progressive Web Apps o Aplicaciones Web Progresivas) son una evolución de las aplicaciones web que combinan lo mejor de dos mundos: la accesibilidad de una web y la funcionalidad de una app nativa. Básicamente, son páginas web que, gracias a tecnologías modernas, pueden "instalarse" en tu dispositivo (móvil u ordenador) y comportarse casi igual que una aplicación que descargas de la App Store o Google Play, pero sin ocupar tanto espacio ni requerir actualizaciones manuales. Ejemplos: Spotify, DropBox, Pinterest...
SPA (Single Page Application).
- Carga una sola vez y actualiza el contenido dinámicamente sin recargar (ej. Gmail, Trello). - Se usa para aplicaciones interactivas complejas.
CONCEPTO DE RENDERIZADO
El renderizado es el proceso de convertir código (HTML, CSS, JavaScript) en contenido visual e interactivo que el usuario puede ver y usa. - Dicho de otra forma, es el proceso mediante el cual un navegador transforma el código que recibe (HTML, CSS, JavaScript) en los píxeles visuales e interactivos que vemos en la pantalla. Es el "momento de la verdad" donde el código se convierte en experiencia de usuario. - Lo veremos de forma más detallada en otro apartado de la presentación.