Desarrollo web | Programación e Informatica

Indice:

1. Inicio
2. Áreas
3. HTML (lenguaje de marcado en hipertexto)
   
4. CSS (Hoja de estilo en cascada)
   
5. JavaScript (En este ámbito)
6. Mas lenguajes (En Backend) como Python PHP Ruby(En este ámbito).
7. Frameworks
8. Tecnologías
9. Conceptos

10. Diferencias entre Sitio Web, Página Web y Aplicación Web

     
     

Es un proceso complejo que implica la creación de productos digitales en línea. También es un término que define la creación de sitios web para Internet o una intranet. Para conseguirlo se hace uso de tecnologías de software del lado del servidor y del cliente que involucran una combinación de procesos de base de datos con el uso de un navegador web a fin de realizar determinadas tareas o mostrar información.

Tradicionalmente un software departamental o incluso un ambicioso proyecto corporativo de gran envergadura es desarrollado en forma stand alone, es decir, usando lenguajes ya sea compilados(C, C++, Delphi), semicompilados(.NET, Mono, Java), o interpretados (Python, PHP) para crear tanto la funcionalidad como toda la interfaz de los usuarios, pero cabe perfectamente un desarrollo orientado a web para dichos propósitos, siendo más homogéneo y multiplataforma.

 

Los lenguajes de programación más usados en desarrollo web son principalmente (por orden alfabético): ASP.NET, PHP y JSP, aunque aún hay quienes usan ASP, Macromedia ColdFusion y Perl. También hay un proyecto para usar Pascal en web a través del lenguaje Pascal Server Pages - PSP pero aún no se han concretado desarrollos, hasta donde se conoce.

El sistema de gestión de base de datos más popular en desarrollo web es MySQL, seguida por Oracle, SQL Server y PostgreSQL, también puede usarse perfectamente Firebird o HSQL.

Idealmente un desarrollador web debería conocer, además de al menos un lenguaje de programación y el manejo de HTML.

Etapas del desarrollo web

• Etapa 1: Investigación y análisis sobre el negocio desarrollo de un sitio web
• Etapa 2: Creación de diseño y estructura desarrollo web
• Etapa 3: Desarrollo e implementación
• Etapa 4: Prueba, entrega y lanzamiento

 

15 Áreas y Especialidades de Desarrollo Web

El desarrollo web es un campo diverso que abarca múltiples áreas y especialidades. A continuación, se presentan 15 de ellas:

1. Desarrollo Front-End: Se enfoca en la parte visual y la interacción del usuario con el sitio web, utilizando tecnologías como HTML, CSS y JavaScript.
2. Desarrollo Back-End: Se ocupa de la lógica del servidor, bases de datos y la integración de sistemas, utilizando lenguajes como PHP, Python y Ruby.
3. Desarrollo Full-Stack: Combina habilidades de front-end y back-end, permitiendo al desarrollador trabajar en todas las capas de una aplicación web.
4. Diseño Web: Se centra en la estética y la experiencia del usuario (UX), asegurando que el sitio sea atractivo y fácil de usar.
5. Gestión de Contenidos: Involucra la creación y organización de contenido en sitios web, utilizando sistemas de gestión de contenido (CMS) como WordPress.
6. SEO (Optimización para Motores de Búsqueda): Se especializa en mejorar la visibilidad de un sitio web en los motores de búsqueda, aumentando el tráfico orgánico.
7. Desarrollo de Aplicaciones Web: Se enfoca en crear aplicaciones que funcionan en un navegador, utilizando tecnologías como React, Angular o Vue.js.
8. E-Commerce o Comercio web: Especialidad en la creación y gestión de tiendas en línea, integrando sistemas de pago y optimizando la experiencia de compra.
9. Desarrollo Móvil: Se centra en la creación de aplicaciones y sitios web optimizados para dispositivos móviles, utilizando frameworks como React Native o Flutter.
10. Seguridad Web: Se especializa en proteger sitios web contra amenazas y ataques, implementando medidas de seguridad y buenas prácticas.
11. Desarrollo de APIs: Se ocupa de crear interfaces de programación de aplicaciones que permiten la comunicación entre diferentes sistemas y servicios.
12. Accesibilidad Web: Se enfoca en hacer que los sitios web sean accesibles para personas con discapacidades, siguiendo las pautas de accesibilidad.
13. Desarrollo de Juegos Web: Se especializa en la creación de juegos que se pueden jugar en navegadores, utilizando tecnologías como HTML5 y WebGL.
14. DevOps: Combina desarrollo y operaciones, enfocándose en la automatización y mejora de procesos de desarrollo y despliegue.
15. Análisis de Datos Web: Se centra en la recopilación y análisis de datos de usuarios para mejorar la experiencia del sitio y las estrategias de marketing.

HTML:

Hace referencia al lenguaje de marcado utilizado en la creación de páginas web. Este estándar que sirve de referencia del software que interactúa con la elaboración de páginas web en sus diferentes versiones. Define una estructura básica y un código (denominado código HTML) para la presentación de contenido de una página web, que incluye texto, imágenes, videos, juegos, entre otros elementos.

El lenguaje HTML se fundamenta en la diferenciación como filosofía de desarrollo. Para añadir elementos externos a una página como imágenes, vídeos o scripts, no se incrustan directamente en el código de la página. En su lugar, se realiza una referencia a la ubicación de cada elemento mediante texto. De este modo, la página web contiene solamente texto, dejando al navegador web (intérprete del código) la labor de unir todos los elementos y visualizar la página final. Al ser un estándar, HTML pretende ser un lenguaje que permita que cualquier página web escrita en una determinada versión, pueda ser interpretada de manera uniforme (siguiendo el estándar) por cualquier navegador web actualizado.  

 

 Marcador

HTML se escribe utilizando «etiquetas», encerradas por corchetes angulares (<,>,/). Además de describir la estructura de un documento, el HTML puede, hasta cierto punto, definir su apariencia y hacer referencia a un tipo de programa llamado script, el cual puede influir en el comportamiento de navegadores web y otros procesadores de HTML.⁹​ El término HTML, también se refiere al contenido del tipo de MIME text/html o de manera más amplia, como un término genérico para el HTML. Esto puede ser en forma derivada del XML (como XHTML 1.0 y versiones posteriores) o directamente derivado de SGML (como HTML 4.01 y versiones anteriores). El HTML consta de varios componentes esenciales, incluyendo elementos y sus atributos, tipos de datos y la declaración de tipo de documento.

 

  HTML se escribe utilizando «etiquetas», encerradas por corchetes angulares (<,>,/). Además de describir la estructura de un documento, el HTML puede, hasta cierto punto, definir su apariencia y hacer referencia a un tipo de programa llamado script, el cual puede influir en el comportamiento de navegadores web y otros procesadores de HTML.⁹​ El término HTML, también se refiere al contenido del tipo de MIME text/html o de manera más amplia, como un término genérico para el HTML. Esto puede ser en forma derivada del XML (como XHTML 1.0 y versiones posteriores) o directamente derivado de SGML (como HTML 4.01 y versiones anteriores). El HTML consta de varios componentes esenciales, incluyendo elementos y sus atributos, tipos de datos y la declaración de tipo de documento.

Más en HTML y CSS.

CSS :

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.²​ 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. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web y GUIs para muchas aplicaciones móviles (como Firefox OS).

 

 CSS está diseñado principalmente para marcar la separación del contenido del documento y la forma de presentación de este, características tales como las capas o layouts, los colores y las fuentes.⁴​ Esta separación busca mejorar la accesibilidad del documento, proveer más flexibilidad y control en la especificación de características presentacionales, permitir que varios documentos HTML compartan un mismo estilo usando una sola hoja de estilos separada en un archivo .css, y reducir la complejidad y la repetición de código en la estructura del documento. 

Sintaxis

CSS tiene una sintaxis simple y usa un conjunto de palabras clave en inglés para especificar los nombres de varias propiedades de estilo. Una hoja de estilos consiste en una serie de reglas. Cada regla, o conjunto de reglas consisten en uno o más selectores, y un bloque de declaración.   

Selctores

Declaran qué etiquetas se le aplican a los estilos que coincidan con la etiqueta o atributo señalados en la regla.

Los selectores pueden aplicarse a:

• Todos los elementos de un tipo, como los párrafos <p>.
• Elementos seguidos de un atributo, en particular:
  • id: identificador, un identificador único para la etiqueta.
  • class: clase, un identificador para anotar múltiples elementos.
                                                                                                                                                     

Las clases y los identificadores son sensibles a las mayúsculas, comienzan con letras, y pueden incluir caracteres alfanuméricos y guiones bajos. Una clase se aplica a cualquier número de elementos. Un identificador se aplica a un solo elemento. 

 

Mas en HTML y CSS.

JavaScript 

Nota: Solo esta sección se trata de JavaScript en desarrollo web y utilizar JavaScript dentro de una página web. Si quiere ver mas del lenguaje (en general) visite nuestra entrada de JavaScript(JS) o el articulo de Wikipedia.

Es un lenguaje de programación fundamental en el desarrollo web que permite añadir interactividad a las páginas web, haciendo que sean más dinámicas y atractivas para los usuarios.Puedes crear páginas web increíbles sin JavaScript, pero JavaScript abre un nuevo nivel de posibilidades.

Interactividad:

 JavaScript permite implementar características interactivas en las páginas web, como juegos, eventos que ocurren al presionar botones, y efectos de estilo dinámicos. Esto hace que la experiencia del usuario sea más atractiva y envolvente.

• Complejidad en las Páginas Web: 

Este lenguaje permite implementar funciones complejas en las páginas web. Cada vez que una página web realiza acciones más allá de mostrar información estática, como actualizaciones de contenido o interacciones con el usuario, JavaScript está involucrado.

• Desarrollo Frontend y Backend: JavaScript es esencial para el desarrollo frontend, pero también se ha expandido al backend gracias a entornos como Node.js, lo que permite a los desarrolladores utilizar el mismo lenguaje tanto en el cliente como en el servidor. 

• Demanda Laboral: 

 Actualmente, JavaScript es uno de los lenguajes más demandados en el mercado laboral, lo que lo convierte en una habilidad valiosa para los desarrolladores web.

 

  Es un componente crucial del desarrollo web moderno, proporcionando las herramientas necesarias para crear aplicaciones web interactivas y dinámicas. Aprender JavaScript abre muchas oportunidades en el campo del desarrollo, tanto en el lado del cliente como en el servidor. 

Uso en sitio/página web 

Dentro de un navegador, JavaScript no hace nada por sí solo. Se ejecuta desde dentro de las páginas web HTML. Para llamar al código JavaScript desde dentro de HTML, se necesita el <script>elemento . Hay dos formas de usar script, dependiendo de si se está vinculando a un script externo o si se está incrustando un script directamente en la página web.

Vinculación de un script externo

Por lo general, escribirás scripts en sus propios archivos .js. Si quieres ejecutar un script .js desde tu página web, solo tienes que usar <script>un srcatributo que apunte al archivo del script, utilizando su URL :

html

<script src="path/to/my/script.js"></script>

Cómo escribir JavaScript dentro de HTML

También puede agregar código JavaScript entre <script>etiquetas en lugar de proporcionar un srcatributo.

html

<script>
  window.addEventListener("load", () => {
    console.log("This function is executed once the page is fully loaded");
  });
</script>

Esto es conveniente cuando solo necesitas un poco de JavaScript, pero si mantienes JavaScript en archivos separados, te resultará más fácil.

• Concéntrate en tu trabajo
• Escribe HTML autosuficiente
• escribir aplicaciones JavaScript estructuradas

Utilice scripts de forma accesible

La accesibilidad es un tema importante en cualquier desarrollo de software. JavaScript puede hacer que su sitio web sea más accesible si lo usa con prudencia, o puede convertirse en un desastre si utiliza scripts sin cuidado. Para que JavaScript trabaje a su favor, vale la pena conocer ciertas prácticas recomendadas para agregar JavaScript:

• Haga que todo el contenido esté disponible como texto (estructurado). Utilice HTML para su contenido tanto como sea posible. Por ejemplo, si ha implementado una bonita barra de progreso en JavaScript, asegúrese de complementarla con porcentajes de texto coincidentes dentro del HTML. Del mismo modo, sus menús desplegables deben estar estructurados como listas desordenadas de enlaces .
• Hacer que todas las funciones sean accesibles desde el teclado.
  • Permitir a los usuarios navegar por todos los controles (por ejemplo, enlaces y entrada de formulario) en un orden lógico.
  • Si utiliza eventos de puntero (como eventos de mouse o eventos táctiles), duplique la funcionalidad con eventos de teclado.
  • Pruebe su sitio utilizando únicamente el teclado.
• No establezca límites de tiempo ni los adivine. Navegar con el teclado o escuchar el contenido leído requiere tiempo adicional. Es difícil predecir cuánto tiempo les llevará a los usuarios o navegadores completar un proceso (especialmente acciones asincrónicas como cargar recursos).
• Mantenga las animaciones sutiles y breves, sin parpadeos. Los parpadeos son molestos y pueden provocar convulsiones . Además, si una animación dura más de un par de segundos, proporcione al usuario una forma de cancelarla.
• Permita que los usuarios inicien interacciones. Es decir, no actualice el contenido, ni lo redireccione ni lo actualice automáticamente. No utilice carruseles ni muestre ventanas emergentes sin previo aviso.
• Tenga un plan B para los usuarios sin JavaScript. Es posible que las personas desactiven JavaScript para mejorar la velocidad y la seguridad, y los usuarios a menudo enfrentan problemas de red que impiden la carga de scripts. Además, los scripts de terceros (anuncios, scripts de seguimiento, extensiones del navegador) pueden dañar sus scripts.
  • Como mínimo, deja un mensaje breve <noscript>como este:<noscript>To use this site, please enable JavaScript.</noscript>
  • Lo ideal es replicar la funcionalidad de JavaScript con HTML y secuencias de comandos del lado del servidor cuando sea posible.
  • Si solo buscas efectos visuales simples, CSS a menudo puede realizar el trabajo de forma aún más intuitiva.
  • Dado que casi todo el mundo tiene JavaScript habilitado, <noscript>no hay excusa para escribir scripts inaccesibles.

PHP 

Es un lenguaje de programación/scripting de propósito general que se utiliza principalmente para el desarrollo web. 

  

• Popularidad y Uso: Es uno de los lenguajes más populares en el desarrollo web, utilizado por una amplia variedad de sitios, desde blogs personales hasta grandes plataformas como Facebook y WordPress. Su facilidad de uso y su capacidad para integrarse con bases de datos lo hacen ideal para crear aplicaciones web dinámicas. 

• Historia: Fue creado en 1993 por Rasmus Lerdorf y se lanzó oficialmente en 1995. Desde entonces, ha evolucionado significativamente y ahora es mantenido por el PHP Group. 

• Características: PHP es un lenguaje del lado del servidor, lo que significa que se ejecuta en el servidor y genera HTML que se envía al navegador del cliente. Esto permite a los desarrolladores crear páginas web interactivas y personalizadas, manejar formularios, gestionar sesiones y realizar operaciones con bases de datos. 

• Integración con Bases de Datos: PHP se integra fácilmente con bases de datos como MySQL, lo que permite a los desarrolladores almacenar y recuperar datos de manera eficiente. Esto es fundamental para aplicaciones web que requieren gestión de contenido, como sistemas de gestión de contenido (CMS) y tiendas en línea. 

• Comunidad y Recursos: PHP cuenta con una gran comunidad de desarrolladores y una amplia gama de recursos, tutoriales y frameworks (como Laravel y Symfony) que facilitan el desarrollo de aplicaciones web robustas y escalables.

Python (Desarrollo web)

Es un lenguaje de programación muy popular en el desarrollo web, conocido por su simplicidad y legibilidad.Python es una excelente opción para el desarrollo web, gracias a su facilidad de uso, potentes frameworks como Django y su capacidad para manejar aplicaciones complejas. Aprender Python puede abrir muchas puertas en el mundo del desarrollo web y más allá.

 

Frameworks Potentes: 

Python cuenta con varios frameworks que facilitan el desarrollo web, siendo Django uno de los más destacados. Django es un framework web completo que permite crear aplicaciones robustas y escalables de manera rápida y eficiente. Su enfoque en la reutilización de código y la "convención sobre configuración" lo hace muy atractivo para los desarrolladores.

• Ventajas del Desarrollo Web con Python: Entre las ventajas de usar Python para el desarrollo web se encuentran su facilidad de aprendizaje, la gran cantidad de bibliotecas disponibles y su capacidad para manejar tareas complejas, como el procesamiento de datos y la integración con inteligencia artificial

• Aplicaciones Diversas: Python es adecuado para una variedad de aplicaciones web, desde sitios web simples hasta aplicaciones complejas que requieren un procesamiento intensivo de datos. Esto lo convierte en una opción popular en áreas como el Big Data y la Inteligencia Artificial, donde se necesita un manejo eficiente de la información

• Comunidad Activa: La comunidad de Python es muy activa, lo que significa que hay una gran cantidad de recursos, tutoriales y soporte disponible para los desarrolladores que desean aprender y mejorar sus habilidades en desarrollo web.

 Ruby

Es un lenguaje de programación que ha ganado popularidad en el desarrollo web, especialmente gracias a su framework más conocido, Ruby on Rails. 

 

A continuación, se presentan algunos aspectos clave sobre Ruby en este contexto:

• Ruby on Rails: Este es un entorno de desarrollo web de código abierto que está optimizado para la satisfacción de los programadores y para la productividad sostenible. Ruby on Rails permite a los desarrolladores crear aplicaciones web de forma rápida y efectiva, facilitando el desarrollo de soluciones personalizadas basadas en diversos requisitos comerciales.
  
  
• Simplicidad y Productividad: Ruby es conocido por su simplicidad y legibilidad, lo que lo convierte en una excelente opción para quienes buscan programar de manera fácil y eficiente. Esto es especialmente valioso para aquellos que están comenzando su carrera como desarrolladores web
• .
• Uso Generalizado: Ruby ha cimentado su posición como uno de los lenguajes más utilizados para escribir aplicaciones web personalizadas. Su enfoque en la productividad y la facilidad de uso ha atraído a muchos desarrolladores
• .
• Código Abierto: Ruby y su framework Ruby on Rails son completamente gratuitos, lo que significa que se pueden utilizar, modificar y copiar sin restricciones. Esto fomenta una comunidad activa y colaborativa que contribuye al crecimiento y mejora del lenguaje y sus herramientas.
Conclusión
En resumen, Ruby es un lenguaje poderoso y accesible para el desarrollo web, especialmente cuando se utiliza con Ruby on Rails. Su enfoque en la simplicidad y la productividad lo convierte en una opción atractiva para desarrolladores de todos los niveles, permitiendo la creación de aplicaciones web efectivas y personalizadas.

Framewoks:

Es un conjunto de herramientas de código predefinido y actualizado que ayuda a estructurar un proyecto digital. Proporciona componentes y soluciones listas para usar, lo que permite a los desarrolladores enfocarse en la lógica de la aplicación en lugar de reinventar la rueda al crear funciones comunes desde cero.

 

 

React y angular

 React y Angular son dos de las herramientas más populares en el desarrollo web moderno, cada una con sus propias características y ventajas.

• • React: Es una biblioteca de JavaScript para el desarrollo de interfaces de usuario (UI) que fue desarrollada y es mantenida por Facebook. Se lanzó en mayo de 2013 y se centra en la creación de componentes reutilizables que permiten construir interfaces de usuario de manera eficiente. React utiliza un enfoque basado en el estado y el ciclo de vida de los componentes, lo que facilita la gestión de la UI en aplicaciones complejas
  • 

• Angular: A diferencia de React, Angular es un framework completo de JavaScript de código abierto que proporciona una solución integral para el desarrollo web. Desarrollado por Google, Angular permite crear aplicaciones de una sola página (SPA) y utiliza TypeScript como su lenguaje principal. Angular también promueve el uso de componentes, encapsulando la lógica de negocio y permitiendo la integración de componentes más pequeños en otros más grandes para crear interfaces de usuario compleja.
•   

Tecnologías Emergentes

El desarrollo web está en constante evolución, y es crucial que los desarrolladores se mantengan actualizados con las últimas tendencias y tecnologías. Esto incluye el uso de APIs, microservicios, y tecnologías de cloud computing que permiten una mayor escalabilidad y flexibilidad en las aplicaciones web 

3

.

Conceptos 

1. Estructura y Diseño: El desarrollo web no solo se trata de codificar, sino también de diseñar la experiencia del usuario. Esto incluye la disposición de los elementos en la página, la elección de colores y tipografías, y la creación de una navegación intuitiva 
   1
   .
2. Front-end y Back-end: El desarrollo web se divide en dos áreas principales:
   • Front-end: Se refiere a la parte del sitio web que los usuarios ven y con la que interactúan. Utiliza lenguajes como HTML, CSS y JavaScript.
   • Back-end: Es la parte del servidor que maneja la lógica de la aplicación, la base de datos y la autenticación de usuarios. Lenguajes como PHP, Python y Ruby son comunes en esta área.
1. Diseño responsivo: Este concepto se refiere a la capacidad de un sitio web para adaptarse a diferentes tamaños de pantalla y dispositivos. Es fundamental en la era actual, donde los usuarios acceden a internet desde móviles, tabletas y computadoras.
1. SEO (Optimización para Motores de Búsqueda): Es el proceso de optimizar un sitio web para mejorar su visibilidad en los motores de búsqueda. Esto incluye el uso de palabras clave, la creación de contenido de calidad y la mejora de la velocidad de carga del sitio 
   2
   .
2. APIs (Interfaz de Programación de Aplicaciones): Las APIs permiten que diferentes aplicaciones se comuniquen entre sí. Son esenciales para integrar servicios externos, como redes sociales o sistemas de pago, en un sitio web 
   3
   .
3. Frameworks y Bibliotecas: Los frameworks (como React, Angular y Django) y las bibliotecas (como jQuery) son herramientas que facilitan el desarrollo al proporcionar estructuras y funcionalidades predefinidas, lo que ahorra tiempo y esfuerzo.

Diferencias entre Sitio Web, Página Web y Aplicación Web

Aunque los términos sitio web, página web y aplicación web se utilizan a menudo de manera intercambiable, en realidad tienen significados distintos:

1. Página Web: Es un documento individual que se encuentra en la web y que puede ser visualizado a través de un navegador. Una página web puede contener texto, imágenes, videos y otros elementos multimedia. Por ejemplo, una sola entrada de un blog o un artículo en línea es una página web.
2. Sitio Web: Se refiere a un conjunto de páginas web relacionadas que están bajo un mismo dominio. Un sitio web puede incluir múltiples páginas web, como la página de inicio, páginas de contacto, y más. Por ejemplo, el sitio web de una empresa puede tener varias secciones, cada una con diferentes páginas web 
   1
   .
3. Aplicación Web: Es un tipo de software que se ejecuta en un servidor y se accede a través de un navegador web. A diferencia de un sitio web, una aplicación web permite la interacción del usuario y puede realizar funciones más complejas, como gestionar bases de datos o permitir la edición de contenido. Ejemplos de aplicaciones web incluyen plataformas como Google Docs o aplicaciones de banca en línea 
   2
   .

Conclusión

En resumen, una página web es un documento individual, un sitio web es un conjunto de páginas web y una aplicación web es un software accesible a través de un navegador que permite interacciones más complejas. Aunque están relacionados, cada uno tiene su propia función y características específicas.