Tecnología para desarrollo web: HTML, CSS y JavaScript, Apuntes de Desarrollo de Aplicaciones Web

¡Descarga Tecnología para desarrollo web: HTML, CSS y JavaScript y más Apuntes en PDF de Desarrollo de Aplicaciones Web solo en Docsity!

SEQ CHAPTER \h \r 1 JAVA SCRIPT

Pedro Fernando Márquez Díaz

Agosto 2019.

Corporación unificada nacional.

Ingeniería de Sistemas.

Tecnología aplicada

HTML

HTML, Lenguaje de Marcado para Hipertextos (HyperText Markup Language) es el elemento de construcción más básico de una página web y se usa para crear y representar visualmente una página web. Determina el contenido de la página web, pero no su funcionalidad. Otras tecnologías distintas de HTML son usadas generalmente para describir la apariencia/presentación de una página web (CSS) o su funcionalidad ( JavaScript). HTML le da "valor añadido" a un texto estándar en español. Hiper Texto se refiere a enlaces que conectan una página Web con otra, ya sea dentro de una página web o entre diferentes sitios web. los vínculos son un aspecto fundamental de la Web. Al subir contenido a Internet y vincularlo a páginas de otras personas, te haces participante activo de esta Red Mundial. CSS CSS es un lenguaje que sirve para dotar de presentación y aspecto, de “estilo”, a páginas web (documentos HTML). CSS no es un lenguaje de programación. Podríamos decir que es un lenguaje que suele aparecer relacionado o próximo a un lenguaje de programación o que suele colaborar con un lenguaje de programación, pero no es un lenguaje de programación propiamente dicho. JAVASCRIPT Javascript es un lenguaje de programación que surgió con el objetivo inicial de programar ciertos comportamientos sobre las páginas web, respondiendo a la interacción del usuario y la realización de automatismos sencillos. En ese contexto podríamos decir

FUNCION DE FRAMEWORK

Un Framework sirve para poder escribir código o desarrollar una aplicación de manera más sencilla. Es algo que permite una mejor organización y control de todo el código elaborado, así como una posible reutilización en el futuro. Debido a esto, garantiza una mayor productividad que los métodos más convencionales y una minimización del coste al agilizar las horas de trabajo volcadas en el desarrollo. Por otra parte, su acción es algo que afecta también a los errores, minimizándolos considerablemente. En definitiva, es algo que brinda una ayuda general y más que considerable al programador y desarrollador, haciendo que sus labores sean mucho más sencillas. CARACTERISTICAS Y ESTRUCTURA DE HTML Un documento HTML debe tener siempre una estructura inicial, con algunas etiquetas y características obligatorias y otras recomendables. Ese esquema es el siguiente, donde se diferencian tres zonas principales:

• Tipo de documento: En la primera línea del documento HTML debe ir especificado siempre de que tipo de documento HTML se trata. No es absolutamente obligatorio indicarlo ( de hecho, hay páginas webs que no lo tienen ), pero eso trae algunas consecuencias que veremos más adelante.
• Head: En el documento HTML hay una primera sección donde se especificarán todos los metadatos del documento, es decir, la parte «que no se ve» directamente en el navegador de forma visual.
• Body: La segunda sección es el cuerpo de la página, donde si aparecen todos los elementos que aparecerán visualmente en el navegador del usuario.

Las dos últimas secciones deben estar dentro de la etiqueta , que es la que debe contener cualquier tipo de etiqueta HTML (salvo el tipo de documento, que debe especificarse antes): CARACTERISTICAS Y ESTRUCTURA DE JAVASCRIPT Imperativo y estructurado JavaScript es compatible con gran parte de la estructura de programación de C (por ejemplo, sentencias if, bucles for, sentencias switch, etc.). Con una salvedad, en parte: en C, el ámbito de las variables alcanza al bloque en el cual fueron definidas; sin embargo, JavaScript no es compatible con esto, puesto que el ámbito de las variables es el de la función en la cual fueron declaradas. Esto cambia con la versión de ECMAScript 2015, ya que añade compatibilidad con block scoping por medio de la palabra clave let. Como en C, JavaScript hace distinción entre expresiones y sentencias. Una diferencia sintáctica con respecto a C es la inserción automática de punto y coma, es decir, en JavaScript los puntos y coma que finalizan una sentencia pueden ser omitidos. Dinámico Como en la mayoría de lenguajes de scrpting, el tipo está asociado al valor, no a la variable. Por ejemplo, una variable x en un momento dado puede estar ligada a un número y más adelante, religada a una cadena. JavaScript es compatible con varias formas de comprobar el tipo de un objeto, incluyendo duck tiping. Una forma de saberlo es por medio de la palabra clave typeof. Objetual

Al igual que los documentos HTML, los documentos CSS son archivos de texto donde se escribe una serie de órdenes y el cliente (navegador) las interpreta y aplica a los documentos HTML asociados. Estructura CSS La estructura CSS se basa en reglas que tienen el siguiente formato:

• Selector: El selector es el elemento HTML que vamos a seleccionar del documento para aplicarle un estilo concreto. Por ejemplo, el elemento p. Realmente, esto es mucho más complejo, pero ya dedicaremos una serie de capítulos exclusivamente a este tema.
• Propiedad: La propiedad es una de las diferentes características que brinda el lenguaje CSS e iremos aprendiendo.
• Valor: Cada propiedad CSS tiene una serie de valores concretos, con los que tendrá uno u otro comportamiento. Con todo esto le iremos indicamos al navegador que, para cada etiqueta (selector especificado) debe aplicar las reglas (propiedad y valor) indicadas. CARACTERISTICAS DE PHP
• Es de propósito general. Aunque está especializado en la programación de sitios web dinámicos, se puede usar PHP para acceder y manejar una base de datos, generar cálculos aritméticos (con scripts), comunicarse entre un servidor y un cliente, etc.
• Puedes hacer blogs, foros, aplicaciones dinámicas…

• Es un lenguaje con una curva de aprendizaje baja, se aprende rápidamente, aunque eso hace que tenga mala fama, por ejemplo, en la declaración de variables porque no se define un tipo de datos.
• Con PHP 5 tienes programación orientada a objetos , así que tiene la base de la programación que se usa hoy en día.
• Soporte para base de datos , específicamente con MySQL. También tiene un buen soporte con PostgreSQL, SQLite y Oracle. El acceso se hace mediante librerías o extensiones ya configuradas, que ayudan en la escritura del código.
• Creación de WebServices , mediante SOAP.
• Es un lenguaje interpretado , es decir, no se compila. Además, el código se almacena en el servidor, por ejemplo, dentro de una página web.
• Tiene una sintaxis parecida al C.
• Es multiplataforma. Podemos tener un servidor de PHP en multitud de sistemas operativos, como Linux, Mac OS X, Windows.
• Es de código libre , así que hay un buen soporte, además de mucha información por internet.
• Amplia documentación oficial , y no oficial como en GitHub o StackOverflow.
• Existen otros protocolos y servicios que puedes comunicarte mediante php, correo con POP3 y SNMP, autentificación de dominio de Windows con LDAP, IMAP, etc.

EDITORES DE TEXTO PARA DESARROLLO WEB

2. SUBLIME TEXT

Multiplataforma y con multitud de funciones, Sublime Text es uno de los editores favoritos del público programador, en parte debido a su sorprendente conjunto de características. Plug-ins y complementos que están disponibles para lenguajes de programación específicos, toneladas de comandos de teclado para ayudarlo a que nunca tenga que quitar las manos del mismo mientras lo utiliza, un modo libre de distracciones que le permite centrarse en su trabajo y mucho más. La aplicación cuenta con una interfaz de pestañas para que pueda tener varios documentos abiertos al mismo tiempo, y una vista miniatura a la derecha para visualizar en que parte del documento está en cualquier momento. Puede seleccionar varias filas para hacer cambios simultáneos, personalizar atajos para satisfacer sus propias necesidades, entre otras operaciones. Sublime Text está disponible para Windows, OS X y Linux. Se distribuye como software de evaluación (que significa que es gratis para probar, pero no hay límite de tiempo en cuánto utilizarlo de forma gratuita). Si lo desea puede adquirir una licencia completa, la cuál es por usuario, así que usted puede utilizarla en tantos equipos como desee una vez que la pague.

3. ATOM Se autodenomina un editor de texto «para el siglo 21» , Atom ha ganado muchos elogios por ser diseñado para las necesidades de los desarrolladores de hoy. Está construido por el equipo de GitHub, e incorpora algunas de las lecciones que el equipo ha aprendido por la gestión de tanto código durante años. Es flexible y personalizable, cuenta con un gran número de seguidores y un montón de plugins,

gracias a su API abierta. Funciona como una aplicación nativa, e incluso el paquete de aplicaciones es adaptable. El software incorpora una interfaz con pestañas, diseño multi-panel, explorador de archivos sencillo, y con curva de aprendizaje baja (para que pueda empezar a trabajar con él rápidamente), aunque hay documentación sólida para ayudarlo, si la necesita. A Atom se le elogia su capacidad de personalización , plugins disponibles y el potencial para convertirse en uno de los mejores y más potentes editores de texto que hayamos visto en muchos años. Se puede instalar en sistemas Windows,

4. VISUAL STUDIO CODE Visual Studio Code está basado en Electron, una pieza de software que se basa en Chromium, utilizada para el desarrollo de aplicaciones de escritorio con io.js. Fue desarrollado por Microsoft, es totalmente gratuito y se encuentra disponible para utilizar en sistemas Windows, Linux y OS X. Visual Studio Code incluye soporte para depuración, control de versiones Git, autocompletado de código (también conocido como IntelliSense), y otras características. También es personalizable, así que puede cambiar el tema del editor, los atajos del teclado, preferencias, entre otros. 5. NOTEPAD++ Notepad++ combina la sencilla interfaz del Bloc de notas o de Wordpad, con funciones avanzadas que harán a escritores y desarrolladores felices. Algunas de sus características incluyen una interfaz personalizable, que puede hacerla con lo más mínimo o incluir una barra de herramientas enriquecida, un mapa del documento para que pueda ver en dónde va su trabajo, pestañas para que pueda trabajar en varios

programacion-ipara-que-sirve-diferencias-entre-html-css-php-asp- cu01004d&catid=75&Itemid=

**- https://desarrolloweb.com/javascript/

• https://www.aprenderaprogramar.com/index.php?** option=com_content&view=article&id=492:ique-es-php-y-ipara-que-sirve- un-potente-lenguaje-de-programacion-para-crear-paginas-web- **cu00803b&catid=70&Itemid=
• https://neoattack.com/neowiki/framework/
• http://www.lsi.us.es/~javierj/investigacion_ficheros/Framework.pdf
• https://lenguajehtml.com/p/html/introduccion/estructura-documento-html
• https://sites.google.com/site/aesgvaqenlainformatica/rsvp-and-guest-book/** **guest-book
• https://lenguajecss.com/p/css/introduccion/estructura-de-css**
• • https://lenguajesdeprogramacion.net/php/https://www.maestrodelacomputacion.net/mejores-editores-de-texto-para- programar/