• Author / Uploaded
• Leonel Rivas

Citation preview

Desarrollo WEB

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.

El desarrollo web tiene en cuenta muchas consideraciones de seguridad como la verificación de errores en la entrada de datos a través de formularios, la salida de filtrado y el cifrado de la información. Las prácticas malintencionadas, como la inyección de SQL, pueden ser ejecutadas por usuarios con malas intenciones pero con un conocimiento primitivo del desarrollo web en su conjunto. Los scripts se pueden usar para explotar sitios web al otorgar acceso no autorizado a usuarios malintencionados que intentan recopilar información como direcciones de correo electrónico, contraseñas y contenido protegido como números de tarjetas de crédito. ¿Qué es un Script? Script (Archivo de procesamiento de órdenes de lote). Es un programa que se almacena en un archivo de texto plano. Los guiones son casi siempre interpretados Por este uso es frecuente que los intérpretes de órdenes sean a la vez intérpretes de este tipo de programas. Los scripts, se pueden clasificar de parte de Guiones por parte del cliente y Guiones por parte del servidor

Parte de esto depende del entorno del servidor en el que se ejecuta el lenguaje de secuencias de comandos como ASP, JSP, PHP, Python, Perl o Ruby, y por lo tanto no es necesariamente una tarea del desarrollador de la web. Sin embargo, se recomienda realizar pruebas rigurosas de las aplicaciones web antes del lanzamiento público para evitar que se produzcan tales explotaciones.

Framework Estructura conceptual y tecnológica de soporte definido, normalmente con artefactos o módulos de software concretos, que puede servir de base para la organización y desarrollo de software. Es código ya escrito que provee funcionalidad que es utilizado de forma común en la mayoría de proyectos. Debe tener la posibilidad de modificar el código de acuerdo de nuestras necesidades. Evita escribir código repetitivo. Desarrollar más rápido. Permitir hacer cosas avanzadas de manera segura. Estos frameworks ya tienen funcionalidades programadas (como sistemas de login, de consulta de bases de datos) algunas veces sobran estas funcionalidades para un proyecto y resultan ser muy cargados. Aparte de los frameworks para FE y BE existen los frameworks Mobile, los cuales su finalidad es pareces elementos nativos en aplicaciones móviles (Ej. Ratchet)

Un ejemplo puede ser laravel, symfony, zend o codelgniter relacionados al PHP. Según la tarea que se le quiera dar se utilizan distintos frameworks

 Herramientas, plataformas, procedimientos, tecnicas, etc.  Frameworks  Lenguajes para la web (edicion, programacion, etc)

 Lenguajes para el desarrollo WEB El uso de un lenguaje de programación web permite la creación de sitios dinámicos en Internet. Esto se consigue generando los contenidos del sitio a través de una base de datos mediante lenguajes de programación Web. Dominando la programación Web podremos crear sitios dinámicos como periódicos digitales o tiendas virtuales. Existen gran variedad de lenguajes para el desarrollo web. Los lenguajes y tecnologías se clasifican en CLIENTE y SERVIDOR

Lenguajes del lado del Cliente Un lenguaje de lado cliente es totalmente independiente del servidor, lo cual permite que la página pueda ser albergada en cualquier sitio sin necesidad de pagar más ya que, por regla general, los servidores que aceptan páginas con scripts de lado servidor son en su mayoría de pago o sus prestaciones son muy limitadas. Inversamente, un lenguaje de lado servidor es independiente del cliente por lo que es mucho menos rígido respecto al cambio de un navegador a otro o respecto a las versiones del mismo. Son los lenguajes que corren en el mismo navegador web, relacionado con el desarrollo de parte del FRONT END.  HTML indica al navegador donde colocar cada texto, cada imagen o cada video y la forma que tendrán estos al ser colocados en la página. Es utilizado para darle estructura a un sitio web de forma semántica y la presentación del contenido. (Acualmente está la versión 5.2)

 CSS. Cascading Stylesheets u Hojas de estilos de Cascada. Describen como se verán los elementos que definimos en HTML el sitio web (tamaños, espacios, animaciones, etc,) CSS grid y Flexbox son el nuevo estándar para posicionamiento  JavaScript. “El lenguaje de Scripting para la web”. Añade interacción como validar un formulario que no este vacio, agrgar animaciones, reaccionar a un clik, etc. Se trata de un lenguaje de programación del lado del cliente, porque es el navegador el que soporta la carga de procesamiento.  Applets de Java. Son pequeños programas precompilados que el navegador ejecuta en el espacio de la pagina , los cuales son menos dependientes al navegador que los scripts en javascript, estos son mas lentos de procesar por el pequeño espacio que se le da en la pagiga web. Un ejemplo de un applet es un reloj 3d el cual añade un efecto visual o un banner dinamico para animar las palabras de un espacio del bammer. Estos se manejan en archivos .CLASS  Visual Basic Script. Es un lenguaje para scripts pero solo compatible con INTERNET EXPLORER de Microsoft, es por eso que su utilización está desaconsejada a favor de JAVASCRIPT.

Desarrollo alrededor del Frontend. Se enfoca en el usuario, en todo con lo que podemos interactuar y lo que vemos mientras navegamos. Buena experiencia de usuario, inmersión y usabilidad, son algunos de los objetivos que busca un buen frontend y hoy en día existen una gran variedad de framework, preprocesadores y librerías que nos ayudarán en esta tarea Para un frontend la creatividad es el recurso más valioso, ya que tendrá que tomar fuentes, colores, imágenes y todos los recursos de los cuales disponga para crear sitios agradables que se vean bien en todos los dispositivos y resoluciones. Herramientas para el desarrollo del frontend 

Web API´s: (Application Progroamming Inrerface)

Interfaz de programación de aplicaciones. Es un conjunto de rutinas que provee acceso a funciones de un determinado software. Son publicadas por los constructores de software para permitir acceso a características de bajo nivel o propietarias, detallando solamente la forma en que cada rutina debe ser llevada a cabo y la funcionalidad que brinda, sin otorgar información acerca de cómo se lleva a cabo la tarea. Son utilizadas por los programadores para construir sus aplicaciones sin necesidad de volver a programar funciones ya hechas por otros, Un Web API es un API que se invoca a través del protocolo HTTP. La ventaja de usar HTTP es que es posible hacer peticiones desde cualquier lenguaje de programación, lo que hace a la Web un medio ideal para conectar aplicaciones. Ejemplos: API´s de Google (traductor, plus, maps, etc.) Apis de Instagram, comentarios de facebook, twitter, etc.

 JSON (Javascript Object Notation) Subconjunto de la notación literal de objetos de JavaScript. Es un formato de texto que es fácilmente entendido por múltiples lenguajes de programación. La sintaxis es muy parecida a los de objetos Literales en JS y tiene una diferencia clave donde los atributos del objeto deben llevar comillas. Estas propiedades hacen que JSON sea un lenguaje ideal para el intercambio de datos. JSON está constituído por dos estructuras:  Una colección de pares de nombre/valor. En varios lenguajes esto es conocido como un objeto, registro, estructura, diccionario, tabla hash, lista de claves o un arreglo asociativo.  Una lista ordenada de valores. En la mayoría de los lenguajes, esto se implementa como arreglos, vectores, listas o sequencias.

 Accesibilidad (ARIA) (Web Accessibility Initiative Accessible Rich Internet Applications (WAI-ARIA))

–

Iniciativa de accesibilidad web: aplicaciones de Internet enriquecidas y accesibles es una especificación técnica publicada por World Wide Web Consortium que especifica cómo aumentar la accesibilidad.

Está específicamente pensada para hacer más accesible el contenido dinámico y los controles desarrollados con Ajax, HTML, Javascript y sus tecnologías relacionadas. WAI-ARIA permite transmitir a las APIs de accesibilidad información sobre el comportamiento de la interfaz y su estructura, de manera que está información pueda ser utilizada por los productos de apoyo para la interacción con el usuario final. Conocimiento extra para el desarrollo completo en frontEnd

 CMS´s (Content Management System) Software desarrollado para que cualquier usuario pueda administrar y gestionar contenidos de una web con facilidad y sin conocimientos de programación Web. tenemos varios tipos de CMS según el tipo de página que necesitemos. Los hay para blogs, páginas corporativas, inmobiliarias, tiendas on-line, noticias o magazines, contenidos multimedia. CMS para páginas web: 

WordPress



Drupal



Joomla

CMS para tiendas on-line: 

Prestashop



WordPress + WooCommerce



Magento

 NodeJS (desarrollo fullstack frontend- backend) Entorno en tiempo de ejecución multiplataforma, de código abierto de JavaScript está diseñado para generar aplicaciones web de forma altamente optimizada y proporcionar una manera fácil para construir programas de red escalables . Sí, Node es un programa de servidor. Sin embargo, el producto base de Node definitivamente No es como Apache o Tomcat. Esos servidores básicamente son productos para servidor listos para instalar y que están listos para implementar aplicaciones instantáneamente.

 Diseño Cross Browser. Responsive web Design El responsive design corresponde a una tendencia de creación de páginas web que pueden ser visualizadas perfectamente en todo tipo de dispositivos, desde ordenadores de escritorio hasta smartphones o tablets. Con este tipo de diseño no necesitas tener una versión para cada dispositivo, una sola web se adapta a todos ellos. En lugar de construir una website para cada tipo de dispositivo (smartphone, tablet, ordenador desktop, laptop e incluso, hoy en día, para smart TV), se crea una sola website utilizando CSS3 media queries y un layout con imágenes flexibles. Una web creada con responsive web design mejora el SEO, las búsquedas a través de dispositivos móviles son diferente a las que se realizan desde un ordenador de escritorio por lo que tener una versión móvil de tu web es bueno

 MVC, MVVM MVC significa Modelo Vista Controlador, porque en este patrón de diseño se separan los datos de una aplicación, la interfaz de usuario, y la lógica de negocio en tres componentes distintos. Cuando la lógica de negocio realiza un cambio, es necesario que ella sea la que actualiza la vista. MVVM significa Modelo Vista VistaModelo, porque en este patrón de diseño se separan los datos de la aplicación, la interfaz de usuario pero en vez de controlar manualmente los cambios en la vista o en los datos, estos se actualizan directamente cuando sucede un cambio en ellos, por ejemplo si la vista actualiza un dato que está presentando se actualiza el modelo automáticamente y viceversa.

 Control de versiones  REST API´s WEB API REST. REST es una forma simple de organizar interacciones entre sistemas independientes. Esto se debe al hecho de que REST le permite interactuar con una sobrecarga mínima con clientes tan diversos como teléfonos móviles y otros sitios web. 

Debe usar estándares web donde tengan sentido



Debe ser amigable para el desarrollador y ser explorable a través de una barra de direcciones del navegador



Debe ser simple, intuitivo y consistente para hacer que la adopción no solo sea fácil sino también agradable



Debe proporcionar suficiente flexibilidad para impulsar la mayoría de la interfaz de usuario de encantamiento.



Debe ser eficiente, manteniendo el equilibrio con los otros requisitos

Los principios clave de REST implican separar su API en recursos lógicos. Estos recursos se manipulan utilizando solicitudes HTTP donde el método (GET, POST, PUT, PATCH, DELETE) tiene un significado específico.

 SEO (Search Engine Optimization). El posicionamiento en buscadores u optimización de motores de búsqueda es el proceso de mejorar la visibilidad de un sitio web en los resultados orgánicos de los diferentes buscadores. También es frecuente nombrarlo por su título inglés, SEO El SEO es una de las «disciplinas» que más ha cambiado en los últimos años. Solo tenemos que fijarnos en la gran cantidad de actualizaciones que ha habido de Penguin y Panda, y cómo éstas han dado un vuelta de 180 grados a lo que se entendía por SEO hasta hace poco. Este (SEO) Hace más útil tu página web tanto para los usuarios como para los motores de búsqueda. Aunque estos aún no pueden ver una página web como lo hace un humano. El SEO es necesario para ayudar a los motores de búsqueda a entender sobre qué trata cada página y si es o no útil para los usuarios. Ahora con el SEO se persigue lo que el propio Matt Cutts califica como «Search Experience Optimization» o lo que es lo mismo, «todo por el usuario».  On-site: El SEO on-site se preocupa de la relevancia. Se asegura de que la web está optimizada para que el motor de búsqueda entienda lo principal, que es el contenido de la misma. Dentro del SEO On-site incluiríamos la optimización de keywords, tiempo de carga, experiencia del usuario, optimización del código y formato de las URLs.  Off-site: El SEO off-site es la parte del trabajo SEO que se centra en factores externos a la página web en la que trabajamos. Los factores más importantes en el SEO off-site son el número y la calidad de los enlaces,

presencia en redes sociales, menciones en medios locales, autoridad de la marca y rendimiento en los resultados de búsqueda

 Wireframing es una manera de diseñar un sitio web en el nivel estructural analizando las necesidades de el usuario, asi como la información que llevara dicho sitio . Los Wireframes se usan al incio de un proceso de desarrollo para establecer la estructura básica de una página antes de que el diseño visual y el contenido se agrege.

 JQuery es una biblioteca multiplataforma de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web está diseñada para facilitar la navegación por un documento, seleccionar elementos DOM, crear animaciones, manejar eventos y desarrollar aplicaciones AJAX. JQuery también proporciona capacidades para que los desarrolladores creen complementos en la parte superior de la biblioteca de JavaScript. Esto permite a los desarrolladores crear abstracciones para interacción y animación de bajo nivel, efectos avanzados y widgets temáticos de alto nivel. Es posible realizar el mismo trabajo utilizando solamente JavaScript, sin la biblioteca jQuery, pero la razón principal por la que mucha gente prefiere jQuery es que es mucho menos verboso. Se puede hacer lo mismo con muchas menos líneas de código, esa es la clave de su éxito.

 Developer Tools conjunto de herramientas integradas en el navegador, diseñadas para facilitar el desarrollo de aplicaciones web. La mayoría de navegadores cuentan con un kit de herramientas de desarrollador, sin embargo en este artículo vamos a hablar de Chrome Developer Tools ya que es el conjunto de herramientas más completo y más popular. Si usas otro navegador no te preocupes, la mayoría de funcionalidades son muy parecidas y vas a poder encontrar el homólogo en el navegador que estés usando.



Ajax (Asynchronous JavaScript And XML)

Es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.

Frameworks para el frontend Enfocados por parte del cliente para diseños de interfaz por ejemplo

Herramientas frameworks para html:  HTML5 boilerplate Nos ofrece simplificar el proceso de construcción de sitios web en HTML5 y para ello nos permite descargar una especie de template o plantilla que puede ayudar no solo a los desarrolladores web novatos, sino también a los más experimentados.

   

dCodes E-mail Boilerplate Mobule Boilerplate (Mas dirigido al responsive) HTML5 Bones

Herramientas frameworks en CSS o utilidades: (usualmente su librería es muy ligera)    

BassCSS Skeleton TailwandCSS Shed

 Tachyons (Utilidades+ Interfaz):           

Base. Bulma. Concice. Bootstrap. Material design lite Mini.css Mobi.css Semantic UI Pure.css Foundation Metro UI

Herramientas frameworks para JAVASCRIPT(o librerías): Cualquier código y funcionalidad de un framework puede ser escrito por ti, y ahorra bastante tiempo Existen librerías para escribir código que interactúa sobre el HTML y CSS como el JQuery y otros para crear interfaces web como VUe JS o Angularo React. Js 1° 2° 3° 4° 5° 6° 7°  DOM:

JavaScript Html Css Sql DOM Scripting Aprender un lenguaje de programación (js, php, etc FW: Bootstrap FW: Laravel JQuery VueJS React Angular Rest API´s ML, AI, etc

Describe todos los elementos del HTML se relacionan unos con otros (Que otro contenido está más cerca a él, cuál es su hijo, etc). Para funcionar totalmente en el FE se debe dominar la escritura para la modificación del html y css= DOM scripting  JSON: JavaScript Object Notation. Es un format que utiliza llave y valor para transportar datos de una forma fácil de leer y ligera. Puede se consimida en otros lados desde un servidor hasta una app movile. La mayoría de los frameworks JavaScript pueden leer datos JSON sin ningún Problema Frameworks de JS para aplicaciones Web       

Angular.JS Aurelia React Polymer Ember VueJS Riot

Frameworks JS para aplicaciones móviles     

Ionic ReactNative (Facebook) Flutter Onsen.io Week

Framework JS para Aplicaciones de Escritorio  W MAC LINUX:  NW.js  Electron

Lenguajes del lado del Servidor Son aquellos reconocidos, cargados e interpretados por el propio servidor y que se envían al cliente en un formato comprensible para él, de manera que puedan ser entendidos directamente por el navegador, puesto que se encontrarían traducidos en lenguaje del lado cliente. La funcionalidad de estos lenguajes se enfoca en crear aplicaciones web. Estos funcionan con una base de daros ´para crear aplicaciones web más avanzadas. Se encargan de la seguridad de la aplicación, realizar consultas a bases de datos El lenguaje JavaScript ha evolucionado que se derivó en una plataforma como NODE.JS para crear estas aplicaciones web SQL (Structured Query Language) - Diseño e implementación de las bases de datos(query: consulta a DB). Existen herramientas que facilitan como una tabla se relaciona a otra (ORMS). Existe una gran variedad de BD pero SQL es un lenguaje que ha estado por más de 40 años y es clave para utilizarlas Servidores. Como instalar bases de datos. Configurar los lenguajes de programación utilizados en el servidor y su configuración a puesta punto de servidores. Configuración de servidor de pruebas o desarrollo. Es el servidor donde se desarrolla la aplicación antes de ser lanzada al público Seguridad Creación de código seguro para ataques de hackers y evitar que toquen las bases de datos para el no robo de información. Recibir pagos seguros validar usuarios y no recibir ningún archivo afectado Lenguajes Back end y para el lado del desarrollo del servidor  Java  Phyton  PHP

    

Ruby C++ C# Go Perl

(Con nodeJs es posible crear código de servidor con JavaScript)

Frameworks en Back end Todos los lenguajes para desarrollo web tienen al menos un framework y cada uno tiene sus propias reglas y como escribir su código y documentación. Código para crear usuarios y logins y Seguridad. En cualquiera de los lenguajes Phyton PHP, C# Java, etc. existe un framework. Facilidad de creación de Templates HTML Y CSS JAVASCRIPT y relacionar una tabla con otra en una base de datos Con Java:                   

DropWizard Grails GWT JHipster JSF Play Framework Spring Boot Struts Vaadin Con PHP: Laravel Code Igniter Symfony Zend Yii 2 CakePHP FuelPHP PHalcon Slim

 Aura

Con phyton:        

Django Flask TurboGears Web2py Pyramid Bottle CHerryPy Sanic

Con ruby:  Ruby on rails

Con C++:  CppCMS

Con JavaScript:  Express

Bases de Datos Es el espacio donde se van a almacenar los datos e información de una aplicación web, permite guardar grandes cantidades de información de forma organizada para que luego podamos encontrar y utilizar fácilmente. Se pueden guardar los usuarios y passwords encriptandolos. Y guardar fechas, ventas, producto, vendedores, etc. La base de datos es un sistema formado por un conjunto de datos almacenados en discos que permiten el acceso directo a ellos y un conjunto de programas que manipulen ese conjunto de datos.

Cada base de datos se compone de una o más tablas que guarda un conjunto de datos. Cada tabla tiene una o más columnas y filas. Las columnas guardan una parte de la información sobre cada elemento que queramos guardar en la tabla, cada fila de la tabla conforma un registro. 

Independencia lógica y física de los datos.



Redundancia mínima.



Acceso concurrente por parte de múltiples usuarios.



Integridad de los datos.



Consultas complejas optimizadas.



Seguridad de acceso y auditoría.



Respaldo y recuperación.



Acceso a través de lenguajes de programación estándar.

SQL es el lenguaje más utilizado para diseñar bases de datos, diagramas de entidad relación, tipos de datos ORM´s (Object-Relational mapping) transformación de las tablas de una base de datos, en una serie de entidades que simplifiquen las tareas básicas de acceso a los datos para el programador. Cada base de datos tiene un ORM que hara el trabajo más sencillo. Una base de datos permitirá realizar estas operaciones los cuales con ayuda de un lenguaje de programación mostrara mensaje de alguna operación ya sea correcta o incorrecta (instrucciones Cualquier aplicación web debe tener características de CRUD, por ejemplo, en una tienda virtual (un producto se tiene que actualizar, crear, borrar o leer) Aplicaciones CRUD (Create Read Update Delte)

Los sistemas de gestión de bases de datos (SGBD) que se utilizan para utilizar varios tipos de lenguajes en una aplicación web son:     

MySQL (cuenta con todos los lenguajes de programación) Oracle MariaDB PostgreSQL MongoDB (Bancos)



Redis

 Herramientas para el desarrollo WEB Editores de Codigo (Editores de Texto o IDE´s)

Para manipular el código del proyecto web, se necesitan herramientas como editores de código o ides que permiten colapsar código, organización de código, autocompletacion de código. Varios lenguajes.(css, html, javascript, etc) Editores de código:    

Atom, Adobe brackets, Sublime text. VisualStudio Code

Los IDE´s: cuentan con un mejor autocompletado (parámetros, funciones, propiedades)          

Neatbeans, dependiendo de la versión que escojas de JAVA SE, HTML JAVASCRIPT, C++, Etc permitirá manejar los distintos estilos Eclipse: de igualmanera es un editor para distintos lenguajes VisualStudio IDE: Permite emular los dispositivos móviles para teléfono PhpStorm:IDE Edicion de codigo php RubyMine. IDE para ruby on rails (framework) IntelliJ IDE. Code: Blocks IDE para C y C++ Aptana Studio. Editar archivos ruby, php, javascript, etc ActiveState AndroidStudio.

Ambientes de Desarrollo (Incluyen servidor, lenguaje y BD) Cuando se desarrolla un proyecto este se sube a un servidor local (y no a un hosting) Los ambientes de desarrollo local. (local host) MAMPSERVER WAMPSERVER XAMPSERVER

Para comenzar codigo php SQL bitnami.com/stacks : aplicaciones de stack para diferentes tipos de stocks (ruby, janjo, distintos frameowrks) Vagrant (servidores) como: Ubuntu server (no tiene interfaz grafica)

El PHP myAdmin es una interfaz que permite maniputar la base de datos de forma visual

Hospedaje Web Hosting de una página web. Permite que se sea accesible a todo el mundo un sitio web. El hosting vende espacio en sus servidores con acceso a internet para que un desarrollador pueda coloar sus archivos de sus proyectos. Esto ayuda a no tener la infraestructura física de la operación de una página web. (ej. Amazon web services) espacios de servidores para mantener páginas web (ej. Servidores de Facebook). Se le puede aumentar la capacidad de espacio y medidas de seguridad y soporte de respado de información Los archivos creados del proyecto web se les dan los accesos para ser almacenados en un servidor y que todos los visitantes del mundo puedan acceder a ella Estos hosting deben de tener bases de datos ya instaladas, ACCESO FTP( forma básica para acceder al servidor del hosting) CPanel( administración de dominios) Seguridad( Proteccion en la accesibilidad de datos de la pagina). Nombre de Dominio: tuempresa Extensión: .com.mx Estos nombres normalmente se llaman “dominios” (por ejemplo: xetahost.mx es nuestro dominio).

Ejemplos de web hosting: $3.96 /mes 2

Ilimitad o (ambos) $2.25 /mes

cPanel/WHM, Fantastico, ASP, Curl, Cron, Pay Monthly Ilimitado Easy & (ambos) Green

hosting, Drag and Drop Site Builder 3

$2.49 /mes

Ilimitado (ambos)

Free Domain for Life, Site Builder, Anytime Money Back

4

$6.95 /mes

Ilimitado (ambos)

5

$3.95 /mes

Ilimitado (ambos)

In business since 1996, SSH support (Secure Shell) 90-Days Money Back, Easy WordPress hosting,

6

$3.95 /mes

Ilimitado (ambos)

Instant Setup, Real 24/7 customer support,

7

$3.67 /mes

Ilimitado (ambos)

100% wind powered Online Store Building tool

8

$1.99 /mes

Ilimitado (ambos)

Cheapest web

hosting HassleFree Unlimited plan 9

$3.95 /mes

Ilimitado (ambos)

eCommerc e Hosting, Dedicated IP addresses

Los hosting web gratuitos, aparte del alojamiento de ficheros, suelen incluir las prestaciones más importantes: acceso vía FTP, correo electrónico y soporte para aplicaciones PHP. Para que el dominio sea también gratis, suelen ofrecer además gratis un subdominio del proveedor. Es decir, por ejemplo, el proveedor de hosting gratuito x10hosting.com asigna subdominios de “x10.mx”, de modo que para un usuario “pepito”, el dominio del servidor del usuario sería “pepito.x10.mx”. Ventajas:  Interesante para probar y aprender.  Permite mantener un entorno de desarrollo para un entorno real a coste cero. Desventajas:  Las opciones gratuitas suelen tener capacidad de proceso muy pequeña, poca memoria, severas limitaciones de los recursos como espacio en disco o la transferencia mensual  Nivel de servicio de muy baja calidad (muchas caídas y paradas de mantenimiento). Y es normal, no pretenden ser opciones para webs reales, sino alojamientos web compartidos (la modalidad que se explica a continuación) muy “capados”

como reclamos para contratar un hosting de pago con el proveedor en cuestión.  Por las razones anteriores, no son una opción válida para un proyecto real.

Navegadores Siempre que se cree un sitio web se le debe de dar una atención de su uso en los distintos navegadores para que funcione óptimamente en todos ( hasta móviles ) CrossBrowsing. Cada navegador tiene su versión “developer” para utilizarlo viendo los soportes acutuales de desarrollador Chrome canadi: versión de google chrome que mantiene una versión que agrega todas las herramientas actuales de las tecnologías web(HTML, CSS, etc). Firefox developer. Etc Para ver en donde funcionara el soporte de una aplicación web se revisa la pagina CanIuse.com . Para verificar si por ejemplo Grid funciona en todos los navegadores web posibles HTML5PLESE. Permite buscar funcionalidades y calificar una pagina web dependiendo de los soportes de los distintos navegadores web

Emuladores (Para manejar el responsive web) Todo sitio web tiene que ser responsivo. Es por esto que los emuladores permiten visualizar el resultado final de una página web.(los Web developer tolos permiten probar proyectos en distintas plataformas). BrowserSync. Simulador que permite crear un servidor temporal el cual arroja una IP para probar un sitio web. Genera un comando el cual funciona si se tiene unstalado NODE.JS en el cmd.

Web Developer Tools Cualquier navegador que se utilice cuenta con herramientas de desarrollo, los cuales principalmente funcionan para inspeccionar el código del que está hecho una página web, y que al momento de señalar un espacio de la página web, se muestre la parte del código del que esta hecho

Las herramientas de desarrollo también permiten editar (siempre que se guarde el archivo css para modificarlo y guardarlo) para mantener los cambios permanentes De igual manera se puede modificar la plataforma desde donde se esta viendo la página (rotar, reescalar,etc) como por ejemplo, cambiarlo a como se vería en un Iphone o en x dispositivo.

 Diseño de la interfaz de Usuario UI Es el diseño de la interfaz del producto, como puede ser una página web, software, aplicación móvil, etc. Su propósito es darle al usuario la

mejor experiencia al utilizar dicha aplicación y facilitar la interacción lo más fácil y eficiente posible. Generalmente lo realiza un diseñador para seleccionar los colores adecuados y prototipos para ver como los usuarios se relacionan con el producto Esta experiencia que tiene el usuario también referida como XD, esta categorizada en mejorar la usabilidad y accesibilidad para garantizar una experiencia adecuada de usuario-producto. UX (user experience) Características:  Un formulario que se puede llenar de forma fácil según el dispositivo en que se accede  Que se sea accesible en todos los dispositivos o plataformas disponibles  Es totalmente sencillo ver todos los elementos de la página sin rebuscar elementos  No muestran elementos innecesarios (especialmente en dispositivos pequeños)

WIREFRAMING (Inicio del proyecto) Es la forma de diseñar un producto (app, web, web app, sitio) en su forma estructural, donde se va a establecer donde se va a ubicar el contenido, antes de agregar los elementos visuales. Esto ayuda para mostrárselos al equipo de trabajo y de ahí empezar a desarrollar el proyecto (posicionamiento de contenidos)

Herramientas para el wireframing: -Balsamiq MockupsAxure

Justmind Proto.io UXPin

PROTOTYPING (Inicio del proyecto) Es una versión borrador del producto que se está desarrollando. Se describe la funcionalidad (tipografías, colores, animaciones). Este sirve para desarrollar las propuestas en el wireframing, y sirve para diseñar el funcionamiento antes del código para poder ser interactivo o básico (imágenes). En esta área, el diseño deja de ser una sugerencia y se convierte en una descripción del producto

El wireframing es un desarrollo tentativo, mientras que el prototyping cubre áreas específicas y definitivas

Herramientas para el prototyping: Sketch Adobe XD Proto.io Invisionapp

 SEO (Search Engine Optimization)

Es el proceso de afectar o modificar la visibilidad de un sitio web en un buscador sin necesidad de pagar (a diferencia del pago directo del buscador). Este sirve para mejorar el posicionamiento Posicionamiento natural, u orgánico. EL fin de tener un sitio web en los primeros resultados en las búsquedas es para tener más visitas

Funcionamiento del SEO Existen herramientas que ayudan a identificar lo que los usuarios están buscando, de esta forma se podrá crear contenido para cubrir esas categorías o búsquedas (analítica web). También las palabras clave que describen tu contenido, ayudan a que tu contenido se categorice para cuando un visitante realiza una búsqueda Dependiendo de la estructura del sitio, el buscador ayudara a que se posicione debido a su facilidad de accesibilidad en una revisión dependiendo del navegador- buscador. Optimización del sitio; Mejora la estrategia del SEO del sitio web el cual es gradual y lento debido a que requiere de mantenimiento para hacer el sitio más rápido y con mejor contenido Construcción de enlaces; las posibilidades de ir creciendo los rankings de búsquedas será mayor si un sitio o varios , enlazan tu contenido a entradas de blogs (los medios de comunicación y blogs pueden likear sitios) Usabilidad y diseño; El diseño es revisado por el buscador para asegurar la mejor experiencia del usuario, la prioridad de información y organización son claves para esta fase El contenido; El contenido debe de ser fácil de acceder para el buscador, se deben incluir palabras clave y otras etiquetas HTML que influyen en este proceso Herramientas para el SEO

 Keywordtool.io – permite buscar palabras claves  Google.com/webmasters/ - posiciona un sitio web, asi como dar de alta un sitio web, y ver que personas lo siguen.  Varvy.com/

 Responsive WEB Design Todo sitio web será accedido por miles de usuarios. Un sitio web debe funcionar correctamente para computadoras de distintos tamaños, laptops, tabletas, teléfonos, así como dispositivos como relojs, refrigeradores, televisiones, automóviles, etc (Evitar: para tener una mejor visualización descargar flash, para tener una experiencia accesar desde internet explorer) La herramienta que permite creer in sitio web responsive es CSS, (con ayuda de los mediaquery para crear un sitio webresponsivo) el cual permite controlar como se verá un sitio según el dispositivo Todos los frameworks CSS y HTML van a permitir crear sitios web responsive mas rápido, siendo el BOOTSTRAP el más popular para esto.

 CMS (Administradores de contenido) Permiten la fácil creación y modificación de contenido digital, estos permiten publicar contenido de forma dinámica por medio de una interfaz de administración y es almacenada en una Base de Datos El CMS Wordpress en PHP es el más popular de todos Estos reducen el tiempo de desarrollo, y su funcionalidad puede ser expendida con código personalizado (plugins o módulos).

Es recomendado utilizar un CMS existente gracias a que ya existen plantillas o plugins ya programados que permiten extender el código para un objetivo en específico, también es recomendable ya que se actualiza constantemente

Dentro de estas también existen plataformas de E-Commerce para poder crear una tienda virtual, es software ya programado para ser utilizado en comercio electrónico. Estas plataformas… Cran productos, alta de clientes, procesamiento de pagos, proceso de envios, administración de inventario, manekar promociones y cupones, etc  Prestashop  WooCommerce  Magneto

 Puestos de Trabajo Front End Developer: Conocimiento extenso en HTML, CSS y JavaScript (manipulación del DOM)

Ingeniero Front End: (javascript developer, fullstack js developer) se debe tener estudios de informática o computación, bastante experiencia en desarrollo de software. Desarrollador HTML y CSS: (Maquetadores) conocimientos en HTML y CSS Diseñador Web Front End: Diseñador que sepa html, css y Js, Que sepa diseño de UI y UX Web Front End User Interface, UI para el diseño y desarrollo Front end Developer para mobile y Tablet: desarrollador para crerar aplicaciones móviles, en desarrollo de tecnologías js. Front end SEO Expert: Desarrollador en optimización del SEO Front end Accesability: Desarrollador Front End con experiencia en optimización de la accesibilidad Front end DevOps: Desarrollo de Software para integrar, co,aborar, automatizar y medir rendimiento Front end Testing QA: Quality Assurance, persona que posee conocimiento realizando pruebas de software para asegurar la calidad de un producto Diseñador web o Full Stack: puesto que describe un rol que es responsable de todos los aspectos de desarrollo (back end y fornt end) Back end Developer: Bases de datos, este puesto evoluciono a ser experto en un framework para el back end asi como Node Js o desarrollador Laravel https://codigoconjuan.com/