Este documento proporciona una introducción a varias tecnologías clave relacionadas con el desarrollo web, incluidos los lenguajes de frontend como HTML, CSS y JavaScript, frameworks como React y Angular, y tecnologías de backend como PHP, Ruby y bases de datos. También explica conceptos como el diseño web adaptable y los preprocesadores CSS.

1. PRINCIPIOS DE
DISEÑO
Mg. Richard E. Mendoza G.

3. https://www.ted.com/talks/tim_berners_lee_a_magna_carta_for_the_web

5. El Front end es la parte de una web que
conecta e interactúa con los usuarios que
la visitan. Es la parte visible, la que
muestra el diseño, los contenidos y la
que permite a los visitantes navegar por
las diferentes páginas mientras lo
deseen. Esta parte reúne en su interior
hasta 3 lenguajes de programación
diferentes: HTML, CSS y JavaScript.
FRONTEND

6. Son lenguajes Web, protocolos y
tecnologías inter-operativas e
internacionales creadas con la finalidad
de guiar la Web hacia su máximo
potencial a través del desarrollo de
protocolos y pautas estandarizadas.
El W3C, organización independiente y
neutral, desarrolla estándares
relacionados con la Web también
conocidos como Recomendaciones, que
sirven como referencia para construir una
Web accesible, interoperable y eficiente,
en la que se puedan desarrollar
aplicaciones cada vez más robustas.
ESTANDARES WEB

7. Las siglas CSS (Cascading Style Sheets)
significan «Hojas de estilo en cascada» y
parten de un concepto simple pero muy
potente: aplicar estilos (colores, formas,
márgenes, etc...) a uno o varios
documentos (generalmente documentos
HTML, páginas webs) de forma masiva.
Se le denomina estilos en cascada porque
se aplican de arriba a abajo (siguiendo un
patrón denominado herencia).
La idea de CSS es la de utilizar el
concepto de separación de presentación
y contenido.
CSS

8. • CSS (siglas en inglés de Cascading Style
Sheets), en español «Hojas de estilo en
cascada», es un lenguaje de diseño gráfico
para definir y crear la presentación de un
documento estructurado escrito en un
lenguaje de marcado.2 Es muy usado para
establecer el diseño visual de los
documentos web, e interfaces de usuario
escritas en HTML o XHTML; el lenguaje
puede ser aplicado a cualquier
documento XML, incluyendo XHTML, SVG,
XUL, RSS, etcétera.
FRAMEWORKS DE CSS

9. • JavaScript es un lenguaje de múltiples
paradigmas que admite estilos de
programación funcionales, imperativos y
basados en eventos (incluidos los
basados en prototipos y orientados a
objetos). Un marco de software es una
abstracción en la que el software que
proporciona una funcionalidad genérica
que puede cambiarse selectivamente
mediante código escrito por el usuario. El
marco de JavaScript es un marco de
aplicación escrito en JavaScript donde los
programadores pueden manipular las
funciones y usarlas para su conveniencia.
FRAMEWORKS DE JS

10. Un preprocesador CSS es un lenguaje que
permite generar código CSS a partir de su
sintaxis única. El inconveniente de CSS es
que es un lenguaje demasiado limitado si
queremos realizar estructuras repetitivas o
condicionales. Con los preprocesadores se
añaden algunos conceptos que provienen de
programación, lo que nos permite a la hora
de generar código CSS el uso de variables,
estructuras de control, mixins, reutilización
de código, selectores anidados…
PREPROCESADORES DE CSS

11. Dentro del desarrollo web, el backend se
encarga de todos los procesos necesarios
para que la web funcione de forma
correcta. Estos procesos o funciones no
son visibles, pero tienen mucha
importancia en el buen funcionamiento
de un sitio web. Algunas de estas
acciones que controla el backend son la
conexión con la base de datos o la
comunicación con el servidor de hosting.
El desarrollo de backend se deben
dominar los lenguajes más utilizados en
el desarrollo web como Ruby, PHP, CSS,
HTML, Java y muchos otros.
BACKEND

12. Un framework de desarrollo backend o
server-side framework es el que trabaja
en el lado del servidor.
El objetivo principal que persiguen este
tipo de frameworks, es que los procesos
de desarrollos estén más acelerados, que
se puedan volver a utilizar los
fragmentos de códigos que ya existen y
que se realicen buenas prácticas
mediante el uso de distintos patrones
establecidos.
FRAMEWORKS BACKEND

13. Backend as a service (BaaS), también
conocido como “mobile backend as a
service”, es un modelo para proporcionar
a los desarrolladores web y de
aplicaciones móviles una forma de
vincular estas aplicaciones al
almacenamiento en nube (cloud storage),
servicios analíticos y/o otras
características. El término DevOps, que
es una combinación de los términos
ingleses development (desarrollo) y
operations (operaciones), designa la
unión de personas, procesos y tecnología
para ofrecer valor a los clientes.
INFRAESTRUCTURA

14. El back end del sitio web consiste en un
servidor, una aplicación y una base de
datos. Se toman los datos, se procesa la
información y se envía al usuario. ... Un
desarrollador Back end debe tener
amplios conocimientos de los siguientes
lenguajes: frameworks y los tipos de base
de datos.
BASES DE DATOS

15. HTML es el componente más básico de la
Web. Define el significado y la estructura
del contenido web. Además de HTML,
generalmente se utilizan otras
tecnologías para describir la
apariencia/presentación de una página
web (CSS) o la
funcionalidad/comportamiento
(JavaScript).
"Hipertexto" hace referencia a los
enlaces que conectan páginas web entre
sí, ya sea dentro de un único sitio web o
entre sitios web.
HTML

16. Todos los documentos HTML deben
comenzar con una declaración de tipo de
documento: <!DOCTYPE html>.
El documento HTML en sí comienza con
<html>y termina con </html>.
La parte visible del documento HTML
está entre <body>y </body>.
HTML BASICO

17. • Visual Studio Code
• Google Chrome
• Cuenta en github.com
• App de github
• Node.js(nodejs.org)
• Npm install stylus
SOFTWARE REQUERIDO

18. • HTML
• CSS
• Javascript
• Responsive Web Design
TECNOLOGIAS
REQUERIDAS

19. • EXPRESS
• (MID)
Backbone.js/Ember.js/Angular
• UNIT TESTTING
Jasmine.js, jsUnit
FOCOS FRONTEND

20. RESPONSIVE WEB DESING
Cuando utilizamos el término
“responsive” (adaptable), nos referimos
principalmente a “responsive design”
(diseño web adaptable). Esto significa
hacer que un sitio web sea accesible y
adaptable en todos los devices: tabletas,
smartphones, etc.
El principio de responsive design se logra
a través de hojas de estilos en cascada
(CSS) y técnicas de programación (HTML).
Con estas técnicas, puede evitar que se
integre el mismo contenido varias veces,
ya que el objetivo del responsive design
es adaptar el mismo.