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
JavaScript Html Css Sql
1°
2° DOM Scripting
Aprender un lenguaje de
3°
programación (js, php, etc
4° FW: Bootstrap
FW: Laravel JQuery VueJS
5°
React Angular
6° Rest API´s
7° ML, AI, etc

 DOM:
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 Ilimitad cPanel/WHM, Fantastico,
o ASP, Curl, Cron, Pay
(ambos) Monthly
2 $2.25 Ilimitado Easy &
/mes (ambos) Green
 hosting,
Drag and
Drop Site
Builder

3 $2.49 Ilimitado Free

/mes (ambos) Domain for
Life, Site
Builder,
Anytime
Money
Back

4 $6.95 Ilimitado In business

/mes (ambos) since 1996,
SSH
support
(Secure
Shell)
5 $3.95 Ilimitado 90-Days
/mes (ambos) Money
Back,
Easy
WordPress
hosting,

6 $3.95 Ilimitado Instant

/mes (ambos) Setup,
Real 24/7
customer
support,

7 $3.67 Ilimitado 100% wind

/mes (ambos) powered
Online
Store
Building
tool

8 $1.99 Ilimitado Cheapest

/mes (ambos) web
 hosting
Hassle-
Free
Unlimited
plan

9 $3.95 Ilimitado eCommerc

/mes (ambos) 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 Mockups-
Axure
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/